HTML5语义标签的核心是为内容赋予明确角色而非仅作布局容器：header表介绍性容器、nav专用于导航链接、main全页唯一且不可嵌套、article为独立可分发单元、section需带标题按主题分组、aside为间接补充信息、footer用于页脚或区块尾部。

HTML5语义标签不是为了“画盒子”，而是为内容定角色——用对标签，结构自然清晰，机器能懂、人好维护、屏幕阅读器能读、搜索引擎能判主次。

核心标签各司其职，不靠class猜意图

每个语义标签自带明确功能边界：

• header：表示介绍性内容容器，可多级使用。页面顶部是它，一篇文章开头的标题区也是它
• nav：专包有导航功能的链接集合，如主导航、目录、分页；零散链接或装饰图标不适用
• main：全页唯一，且不可嵌套在 article、aside、footer 等内部；只放与当前页主题直接相关的核心内容
• article：自包含、可独立分发的内容单元，如一篇博文、一条新闻、一个评论，拿出去仍完整
• section：按主题组织的一组内容，必须有标题（h1–h6），例如“产品特性”“用户反馈”等逻辑区块
• aside：与主内容间接相关但非必需的补充信息，如侧边栏广告、术语解释、作者简介
• footer：页脚或区块尾部，可出现在页面级或 article 内部，承载版权、联系方式等收尾信息

结构优先，先想“这是什么”，再选标签

写代码前先问自己三个问题：

• 这块内容是独立可复用的吗？→ 考虑 article
• 它只是把几段相关内容归个类吗？→ 更适合 section
• 它是整页的主体，还是某个模块的头部？→ 区分 main 和 header 的层级关系

避免强行套用：一个纯图标按钮旁的简短说明，用 span 或 p 更合适；只有具备完整主题和信息闭环时，才启用 article 或 section。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

语义正确，才能真正提升可访问性与SEO

语义标签本身不带样式，但提供关键结构线索：

• 屏幕阅读器依据 nav、main、article 自动构建跳转路径，用户可快速定位
• 搜索引擎通过这些标签识别内容主次，强化关键词上下文权重，比如 article 内的标题和正文比 aside 中的文本权重更高
• 配合 ARIA 属性（如 aria-label）可进一步补足语义，例如多个 nav 时标注“主导航”“文章内目录”

布局实现不依赖div，但需合理嵌套与CSS协同

语义化不是放弃样式控制，而是让CSS有据可依：

• 用 display: grid 或 flex 直接作用于 header、main、aside 等原生标签，结构即布局锚点
• 避免 main 套 section 再套 article 的冗余嵌套；若 article 已是独立单元，不必再用 section 包一层
• 多级 header 或 footer 必须与其父容器主题一致，比如 article 内的 header 应描述该文章，而非整个网站