必须用的语义标签是、、；仅用于主导航链接集合，须为与主内容相关且可独立存在的补充信息，必须有主题和标题，代表可独立分发的内容单元，滥用或错误嵌套会损害可访问性、SEO和维护性。
直接用 <header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer> 这些语义标签，而不是无差别堆 <div>，就是最标准的 HTML 页面结构划分方式。
<h3>哪些语义标签必须用，哪些容易误用</h3>
<p>必须用的有且只有：<code><header></header>（页面或区块顶部）、<main></main>（唯一，承载核心内容）、<footer></footer>（对应 <header></header> 的底部）。其余如 <nav></nav> 仅用于导航链接集合，<aside></aside> 必须是与主内容相关但可独立存在的补充信息（比如侧边栏的作者简介、参考资料），不是所有侧边栏都该用它。
常见误用：
-
<section></section>被当成“样式容器”滥用——它必须有明确的主题，且应有<h2></h2>–<h6></h6>级标题作为其语义起点 -
<article></article>被套在整页新闻列表外——它表示一个自包含、可独立分发的内容单元（如单篇博客、一条微博），不是“内容区”的代名词 -
<nav></nav>套在面包屑或页脚链接上——这些属于辅助导航，更适合用<ol></ol>或普通列表，<nav></nav>应只包裹主导航菜单
嵌套规则和层级限制
HTML5 规范明确禁止某些嵌套：
立即学习“前端免费学习笔记（深入）”；
-
<main></main>不能出现在<article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav>内部（它必须是顶层内容容器） -
<header></header>和<footer></footer>可以多层出现（比如整个页面一个<header></header>，每个<article></article>也能有自己的<header></header>），但同一级不能出现两个<main></main> -
<nav></nav>内部不应再嵌<nav></nav>；若需二级菜单，用<ul></ul>/<ol></ol>即可
错误示例：<article><main>...</main></article> —— 浏览器会忽略嵌套的 <main></main>，且校验工具报错。
不写语义标签会有什么实际影响
表面看页面照样显示，但真实代价在三处：
-
无障碍访问失效：屏幕阅读器依赖语义标签跳转区域（如按
Ctrl+Alt+1直达<main></main>），全用<div> 就只剩“下一个 div”这种无效提示 <li> <strong>SEO 权重稀释</strong>：搜索引擎把 <code><main></main>内容视为主权重区域，<article></article>内容更易被识别为独立索引单元；混用<div class="main"> 会让算法无法准确提取主题 <li> <strong>CSS 维护成本飙升</strong>：靠 class 名维护结构（如 <code>.header-wrapper）意味着每次改布局都要同步改 HTML + CSS + JS 查询逻辑；语义标签天然稳定，main > article这种选择器十年都不用动
真正难的不是记住标签名，而是判断某个区块是否「值得拥有独立语义」——比如一个带标题的统计卡片，用 <section></section> 比用 <div> 更合适；但一组纯图标按钮，就老老实实用 <code><div> 配 CSS Grid 就行。语义不是装饰，是让机器和人都能一眼看懂“这是什么”。 </div>
