HTML5新增8个核心语义标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<figure>+<figcaption>，其中前7个在HTML4中完全不存在。
HTML5 新增的语义化标签有哪些
HTML5 引入了 8 个核心语义标签，用来替代大量 <div> 堆砌的结构，让文档逻辑更清晰、可访问性更强、SEO 更友好。它们不是“装饰性”的，而是有明确含义的块级元素。
-
<header>：页面或区块的头部（注意：一个页面可有多个，不只顶部） -
<nav>：专用于导航链接的容器（如主导航、页脚导航） -
<main>：页面中唯一、主要的内容区域（每个页面最多一个） -
<article>：能独立分发/复用的内容单元（如博客文章、新闻条目） -
<section>：具有主题的通用内容分组（需带标题，否则优先用<div>） -
<aside>：与主内容相关但可分离的旁支内容（如侧边栏、术语注释） -
<footer>：页面或区块的尾部（可嵌套使用，不限于页面底部） -
<figure>+<figcaption>：成对出现，用于图表、代码块等自包含媒体及其标题
哪些 HTML5 语义标签在 HTML4 中完全不存在
HTML4 没有语义化布局概念，所有结构都靠 <div> 和 <span> 撑起。以下 7 个标签是 HTML5 首次定义、此前标准中**零存在记录**的：
-
<main>（特别注意：IE 完全不支持，需用 ARIArole="main"降级） <article><section><aside>-
<header>（HTML4 有<head>，但那是元信息容器，和<header>完全无关） <nav>-
<figure>和<figcaption>（作为一对新元素，共同构成新语义）
⚠️ 注意：<footer> 虽然名字像旧元素，但它在 HTML4 中也不存在——HTML4 只有 <address> 用于联系信息，且语义完全不同。
容易误用的三个语义标签场景
语义标签一旦用错，反而会损害可访问性。常见混淆点如下：
立即学习“前端免费学习笔记（深入）”；
-
<section>≠<div>：它必须表达一个「有主题的内容段」，且建议紧邻一个<h1>–<h6>标题；纯样式分组请继续用<div> -
<article>≠ 单篇内容：它要求内容可独立存在（比如 RSS 抓取、单独打印），一个产品列表页里的每条商品卡片，通常用<section>或<div>更合适 -
<nav>不等于「所有链接集合」：页眉 logo 旁的几个非导航链接（如「登录」「注册」）、页脚一堆友情链接，都不适合包进<nav>；只有主要导航路径才适用
兼容性与实际使用建议
所有现代浏览器（Chrome/Firefox/Safari/Edge）原生支持这些标签，但 IE9 及以下不识别，会导致样式失效或 DOM 结构异常。实际项目中需注意：
- 对老 IE 必须加
document.createElement()或引入html5shiv.js，否则<header>等标签无法被 CSS 选中 -
<main>的可访问性价值最高：屏幕阅读器会提供快捷跳转，但若页面出现多个<main>，部分读屏工具会忽略后续所有 - 不要为了“语义”而强行替换：如果一个
<div class="card">内容既不是<article>也不是<section>，就别硬改——语义混乱比无语义更糟
真正关键的不是标签数量，而是每个标签是否准确表达了内容意图。写完可以问自己一句：去掉所有 CSS，仅靠标签结构，能否大致还原出页面的信息层级和功能分区？
