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