正确使用HTML语义化标签能提升结构清晰度、SEO和无障碍访问。应根据内容含义选择标签：header用于页眉，nav专用于导航，main包含核心内容且唯一，article包裹独立内容如文章，section划分主题区块，aside表示附加信息，footer定义底部内容。标题用h1~h6合理分级，强调用strong或em，引用用blockquote或q，缩写用abbr，时间用time。避免滥用div或错误嵌套，如nav内不需section，非独立单元不用article。语义化关键在于按内容意图编码，而非仅追求视觉效果，有助于长期维护与兼容性。

HTML语义化标签的正确使用，能让网页结构更清晰、可读性更强，同时提升SEO效果和无障碍访问支持。选择合适的语义化标签，关键在于理解每个标签的实际含义和适用场景，而不是仅仅为了实现视觉效果。

区分内容区块：用对结构化标签

页面整体结构应使用具有明确语义的区块标签，帮助浏览器和辅助工具理解页面布局。

• header：用于页面或区块的顶部区域，通常包含标题、导航或品牌信息。如果是整个页面的页眉，放在 body 直接子级；如果是某个 section 的标题区域，则嵌套在对应区块内。
• nav：只用于主导航链接组，比如顶部菜单、侧边栏导航。不是所有链接集合都用 nav，例如页脚的一些跳转链接一般不用 nav。
• main：表示页面核心内容，一个页面只能有一个 main 标签，且不应被 aside、footer 等非主要内容容器包裹。
• article：独立、可分发的内容，如博客文章、新闻条目、论坛帖子。它能被外部引用或聚合，有明确的主题和完整性。
• section：表示文档中的一个主题区块，通常包含一个 heading。适合将内容按逻辑分组，比如“产品介绍”“用户评价”等板块。
• aside：侧边内容，与主内容相关但可独立存在，如侧边推荐、广告、作者简介。注意不要把所有侧栏都当作 aside，只有语义上是“附加信息”才适用。
• footer：页面或区块的底部信息，常包含版权、联系方式、备案号等。可以出现在页面级，也可以属于某个 article 或 section。

正确表达文本语义：不只是加粗和换行

很多人用 div + CSS 实现标题或强调效果，忽略了语义标签的作用。

• 用 h1~h6 构建清晰的标题层级，h1 应该只有一个，代表页面主标题。避免跳级使用，比如 h1 后直接 h4。
• 强调内容优先考虑 strong（重要性）和 （强调语气），而不是 b 或 i。它们不仅影响样式，还传递语义信息，对屏幕阅读器有实际意义。
• 引用他人话语时使用 blockquote（大段引用）或 （短引用），并配合 标注来源。
• 缩写词使用 abbr，例如 HTML，有助于提升可访问性。

根据内容类型选择最贴切的标签

不同场景下，看似相似的内容可能需要不同的标签。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

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

• 产品列表页面中，每个商品是一个独立单元，适合用 article 包裹。如果只是分类展示，没有独立发布属性，用
  或

  更合适。

  评论区域中，每条评论是独立内容，用

  ；整个评论区可用

  包裹，并加上 aria-label 提升可访问性。

  仪表盘或管理后台的卡片布局，若内容不具备独立传播性，建议使用

  或

  ，避免滥用 article。

  时间信息使用 time 标签，比如 5月20日，便于机器解析。

  避免常见误区

  语义化不是堆砌标签，理解本质才能用得恰当。

  • 不要为了结构而强行嵌套，比如在 nav 里放多个 section 是不必要的。
  • div 和 span 并非“不语义”，它们在无特定语义时是合理选择，重点是“该用语义标签时不用”才是问题。
  • 避免用 header、footer 在非结构性位置，比如在一个小按钮旁加个 footer 是错误的。
  • 确保语义标签的嵌套合理，例如 article 内可以有自己的 header、footer、section，但不要反过来包裹 main。

  基本上就这些。关键是养成按内容意图写HTML的习惯，而不是只看最终样式。语义清晰的代码，长期维护更轻松，兼容性和可访问性也更有保障。