HTML语义化标签包含哪些_HTML语义化标签使用规范【经验分享】

作者：袖梨 2026-06-29

必须优先使用<header>、<nav>、<main>、<article>、<footer>五个标签，因它们被主流屏幕阅读器正确识别、搜索引擎稳定解析，且在IE9+及现代浏览器中无需hack即可块级渲染。

日常开发中真正该用、能放心用的 HTML 语义化标签就这五个：<header>、<nav>、<main>、<article>、<footer>。其他标签虽存在，但使用频率低、兼容性或语义明确性不足，强行套用反而增加维护成本。

判断一个语义化标签是否“该用”，核心看三点：是否被主流屏幕阅读器正确识别、是否被搜索引擎稳定解析、是否在 IE9+ 和所有现代浏览器中无需 hack 就能正常渲染为块级元素。

<header> 和 <footer>：适用于整个页面或某个 <article> / <section> 的头部/尾部，不是所有带 logo 或版权信息的容器都该用——只有具备结构性意义（如页面首屏顶部导航区、文章末尾作者信息区）才适用
<nav>：仅包裹主导航链接集合，侧边栏菜单、分页控件、面包屑都不算；一个页面可有多个 <nav>，但需通过 aria-label 区分用途（如 aria-label="主导航"）
<main>：每个页面**必须且只能有一个**，且不能嵌套在 <article>、<aside>、<header>、<nav>、<footer> 内部；它是辅助技术定位“主要内容”的唯一可靠锚点
<article>：代表独立、可复用、可单独分发的内容单元，比如博客正文、新闻稿、用户评论；它自带隐式 sectioning root，会影响 <h1> 的层级解析

这两个标签是误用重灾区。它们不是“样式容器”，而是有严格语义边界的结构单元。

<section> 必须有主题，且应配有标题（<h2> 或更高级别），否则不如直接用 <div>；常见错误是把轮播图区域、商品列表区全塞进 <section>，但实际它们只是视觉分组，无独立语义
<aside> 表示与主内容相关但可独立存在的补充信息，比如文章旁的术语解释、作者简介卡片；广告位、热门推荐、友情链接等不属于 <aside>，它们没有语义关联性，用 <div> 更准确
两者在 SEO 中几乎不传递额外权重，滥用不会提升排名，反而让结构树变混乱，影响屏幕阅读器线性朗读逻辑

IE9 会把所有 HTML5 语义化标签当行内元素渲染，导致布局错乱。这不是 JS 问题，而是 CSS 渲染层缺陷。

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

最简方案：全局加一条 CSS 规则 header, nav, main, article, section, aside, footer { display: block; }，无需 JS 检测或 polyfill
不要用 document.createElement 方式“注册”新标签——IE9 不支持，且现代项目基本已放弃 IE9 支持
如果项目仍需兼容 IE8 及以下，语义化标签就别用了，老实用 <div class="header"> 配合 ARIA 属性，否则投入产出比极低

它们不是装饰性标签，而是为机器可读服务的精确语义标记，用错比不用更糟。

<figure> 必须配合 <figcaption> 使用，且内容必须是自包含的媒体或数据单元（如图表、代码块、引用截图）；单纯一张产品图不构成 <figure>，除非配了说明文字
<time> 的 datetime 属性值必须是合法机器可读格式（如 2026-04-13 或 2026-04-13T07:21），不能写“今天”“上周五”；它对 SEO 几乎无影响，但对日历聚合类工具、无障碍时间播报有意义
这类标签一旦使用，就要保证语义闭环——比如写了 <figure> 却漏掉 <figcaption>，会被部分校验工具报 warning，也破坏结构完整性