必须全局唯一且不得嵌套于等结构元素内，它是浏览器、屏幕阅读器和搜索引擎识别页面核心内容的唯一语义锚点，错用会导致无障碍失效、seo降权及lighthouse报错。
因为浏览器、搜索引擎和屏幕阅读器不认 class 名，只认标签名本身携带的语义含义。 用 <div class="main"> 包裹内容，对机器来说只是“一个盒子”；换成 <code><main></main>，它立刻知道这是页面唯一的核心内容区。
浏览器和辅助技术靠标签名做结构解析
屏幕阅读器用户按 Ctrl+Alt+1 跳到 <h1></h1>，按 Ctrl+Alt+M 直接进入 <main></main> —— 这些快捷键依赖原生标签，不是靠 CSS 类或 JS 注入模拟出来的。如果全用 <div>，这些导航能力就失效。
<ul><li>
<code><nav></nav> 是唯一被识别为“主导航”的区域，<div class="nav"> 不会被读屏软件归类为导航
<li>
<code><article></article> 告诉爬虫：“这段内容可独立分发、RSS 抓取、跨站引用”，<section></section> 则强调“这是文档中的一个逻辑章节”，二者语义不可互换
<main></main> 是否缺失、<header></header> 是否嵌套在 <article></article> 内 —— 这些检查基于标签名，不是 class 名SEO 排名中，语义标签是隐式信号源
Google 不公开算法细节，但大量实测表明：<main></main> 内的 <h1></h1> 权重高于其他区域；<article></article> 中的 <time datetime="2026-08-25"></time> 能被正确提取为发布时间，而 <span>2026年8月25日</span> 很可能被忽略。
- 多个
<article></article>并列时，搜索引擎倾向于将它们视为同级内容单元（如首页博客列表），而非父子关系 -
<aside></aside>内容通常不参与主关键词密度计算，适合放广告或推荐链接，避免稀释主体权重 - 错误嵌套（比如把
<nav></nav>放进<footer></footer>）可能触发 Lighthouse 的“结构性警告”，间接影响 Core Web Vitals 评分
开发者维护成本直接受语义清晰度影响
一个 3 年前的项目里，如果看到 <div class="content-area">，你得翻 5 个文件才能确认它是否包含侧边栏逻辑；而 <code><main><article><aside></aside></article></main> 的嵌套结构，打开 HTML 就能判断数据流向和样式作用域。
-
<section></section>必须有标题（<h2></h2>或更高），否则语义断裂 —— 这不是规范强制，但会导致 Lighthouse 报 “sectionmissing heading” -
<main></main>在整个页面中只能出现一次，重复使用会破坏可访问性树（Accessibility Tree）结构 - 用
<button></button>替代<div onclick> 不仅是为了语义，更因为前者自带键盘焦点、空格/回车触发、<code>disabled属性原生支持真正容易被忽略的是：语义化不是“加几个新标签就完事”，而是每次写标签前要问一句——这个区块在脱离样式后，是否仍能被机器准确归类？如果答案是否定的，那大概率该换标签，而不是加 class。
