HTML5语义化标签是浏览器、屏幕阅读器和搜索引擎理解页面结构的唯一依据，错误使用会导致可访问性断裂、SEO权重稀释和维护成本上升；header可多次使用，main必须唯一且不嵌套于article等标签内，nav用于主要导航路径，aside用于相关但非核心的补充内容，section用于主题分组，article用于可独立分发的内容单元。
不用 是否用 立即学习“前端免费学习笔记（深入）”；<div> 堆布局，HTML5 语义标签不是“锦上添花”，而是浏览器、屏幕阅读器和搜索引擎理解页面结构的唯一依据——用错或不用，直接导致可访问性断裂、SEO 权重稀释、维护成本翻倍。
<h3>header / main / footer 不是“换汤不换药”的 div 替代品</h3>
<p>很多人把 <code><header></header> 当成 <div class="header"> 的简写，这是最大误区。浏览器不会给 <code><header></header> 自动加样式，但它会向辅助技术宣告：“这里是页面或区块的头部导航/标题区域”。一个页面可以有多个 <header></header>（比如 <article></article> 内部也能有自己的 <header></header>），但 <main></main> 必须且只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<nav></nav> 里。
<main><article><header>...</header></article></main> —— 这会让 <main></main> 包含非主体内容<main><article><header>...</header><p>正文</p></article></main>，此时 <main></main> 确实包裹唯一主体流document.createElement 或引入 html5shiv，但现代项目基本可忽略nav 和 aside 的边界在哪？别靠视觉判断
<nav></nav>，不取决于它“长没长成导航栏”，而取决于它是否提供**主要导航路径**（如顶部菜单、侧边栏目索引、页脚站点地图）。面包屑（breadcrumb）一般不用 <nav></nav>，而用 <ol></ol> + aria-label="breadcrumb" 更准确。同理，<aside></aside> 不是“右边那块空白”，而是与当前内容**相关但非核心的补充信息**，比如文章里的术语解释、作者简介、关联推荐——如果删掉它，主内容逻辑依然完整，才适合用 <aside></aside>。<aside></aside> —— 它们既不相关也不补充，应归为 <section></section> 或普通 <div>
<li>性能提示：过度使用 <code><nav></nav>（比如每个卡片都包一层）会污染 ARIA 导航地标，让屏幕阅读器用户迷失<nav></nav> 和 <main></main> 判断页面核心结构，错误标记可能降低内容抓取优先级section 和 article 的选择取决于内容独立性
<section></section> 是主题分组，<article></article> 是可独立分发的内容单元。博客列表页里，每篇博文用 <article></article>；但“关于我们”页里分“团队”“愿景”“历程”三块，每块用 <section></section> 即可——因为它们无法脱离当前页面独立存在或被 RSS 抓取。
<article></article>
<article></article> 内可用 <section></section>（如文章内的小节），但 <section></section> 内不应嵌套无关的 <article></article>
<section></section>：没有明确主题、仅用于样式控制的容器，老实用 <div>，语义标签不是越多越好
<p>真正难的不是记住标签名，而是每次写 HTML 时问自己一句：这个区块对机器（爬虫、读屏器）意味着什么？如果答案模糊，大概率该换标签，或者先别急着加语义——比乱用更糟的是自欺欺人的“伪语义”。</p>
</div>
