HTML5新增8个核心语义标签：、、、、、、、+，其中前7个在HTML4中完全不存在。

HTML5 新增的语义化标签有哪些

HTML5 引入了 8 个核心语义标签，用来替代大量 堆砌的结构，让文档逻辑更清晰、可访问性更强、SEO 更友好。它们不是“装饰性”的，而是有明确含义的块级元素。

• ：页面或区块的头部（注意：一个页面可有多个，不只顶部）
• ：专用于导航链接的容器（如主导航、页脚导航）
• ：页面中唯一、主要的内容区域（每个页面最多一个）
• ：能独立分发/复用的内容单元（如博客文章、新闻条目）
• ：具有主题的通用内容分组（需带标题，否则优先用 ）
• ：与主内容相关但可分离的旁支内容（如侧边栏、术语注释）
• ：页面或区块的尾部（可嵌套使用，不限于页面底部）

• + ：成对出现，用于图表、代码块等自包含媒体及其标题

哪些 HTML5 语义标签在 HTML4 中完全不存在

HTML4 没有语义化布局概念，所有结构都靠 和 撑起。以下 7 个标签是 HTML5 首次定义、此前标准中**零存在记录**的：

• （特别注意：IE 完全不支持，需用 ARIA role="main" 降级）

• 

• （HTML4 有 ，但那是元信息容器，和
  完全无关）

• 和 （作为一对新元素，共同构成新语义）

⚠️ 注意：

虽然名字像旧元素，但它在 HTML4 中也不存在——HTML4 只有 用于联系信息，且语义完全不同。

容易误用的三个语义标签场景

语义标签一旦用错，反而会损害可访问性。常见混淆点如下：

• ≠ ：它必须表达一个「有主题的内容段」，且建议紧邻一个

  –

  标题；纯样式分组请继续用
• ≠ 单篇内容：它要求内容可独立存在（比如 RSS 抓取、单独打印），一个产品列表页里的每条商品卡片，通常用
  或 更合适
• 不等于「所有链接集合」：页眉 logo 旁的几个非导航链接（如「登录」「注册」）、页脚一堆友情链接，都不适合包进 ；只有主要导航路径才适用

兼容性与实际使用建议

所有现代浏览器（Chrome/Firefox/Safari/Edge）原生支持这些标签，但 IE9 及以下不识别，会导致样式失效或 DOM 结构异常。实际项目中需注意：

• 对老 IE 必须加 document.createElement() 或引入 html5shiv.js，否则
  等标签无法被 CSS 选中
• 的可访问性价值最高：屏幕阅读器会提供快捷跳转，但若页面出现多个
  ，部分读屏工具会忽略后续所有
• 不要为了“语义”而强行替换：如果一个 内容既不是 也不是
  ，就别硬改——语义混乱比无语义更糟

  真正关键的不是标签数量，而是每个标签是否准确表达了内容意图。写完可以问自己一句：去掉所有 CSS，仅靠标签结构，能否大致还原出页面的信息层级和功能分区？