语义化标签的本质是表达内容在文档结构中的角色，而非视觉样式；如表示头部信息、表示导航链接、表示可独立分发的内容，误用会损害可访问性与seo。
语义化标签不是“长得像什么”，而是“它本来就是什么”
很多人一看到 <header></header> 就默认它是页面顶部带粗字体的区域，看到 <article></article> 就觉得必须配个标题+图片+正文三件套——这是把语义当样式用了。语义化标签的本质，是告诉浏览器、搜索引擎、屏幕阅读器：“这段内容在文档结构里扮演什么角色”，而不是“它该渲染成什么样”。<h1></h1> 的语义是“本页最高层级标题”，哪怕你用 CSS 把它设成 10px 灰色字，它依然是 <h1></h1>；同理，<nav></nav> 的语义是“一组用于导航的链接”，哪怕它横在页面右侧或藏在汉堡菜单里，只要功能没变，就该用它。
不用 <div> 套 <code>class 并不等于自动语义化
常见错误：把所有容器都换成 <section></section>，或者给每个模块硬套 <article></article>，以为这样就算语义化了。其实不然：
-
<section></section>要求有明确的主题和标题（<h2></h2>–<h6></h6>），否则只是个无意义的分组，不如用<div> <li> <code><article></article>必须能独立存在、可被单独分发或重用（比如一篇博客、一条新闻、一个用户评论），整页内容塞进一个<article></article>反而破坏语义 -
<aside></aside>不是“右边那栏”，而是与主内容相关但可分离的补充信息（如侧边引用、术语解释），广告位或无关推荐不该用它 - 屏幕阅读器可能跳过重复
<header></header>、误判<main></main>范围，导致视障用户无法快速定位核心内容 - Google 等搜索引擎对
<article></article>+<time datetime="..."></time>的组合更信任发布时间，对<nav></nav>内链接赋予更高导航权重 - 某些无障碍检测工具（如 axe、WAVE）会直接标记
<main></main>缺失或<footer></footer>放在<header></header>里面为严重问题 - 这段内容是否代表整个页面/区块的头部信息？→ 用
<header></header>（注意：一个页面可以有多个<header></header>，但每个<article></article>也可自带<header></header>） - 这些链接是否用来帮用户跳转到其他页面或锚点？→ 优先
<nav></nav>，否则用普通<ul></ul>或<div> <li>这段文字是否能脱离当前页面独立存在、被 RSS 抓取或转发？→ 是则 <code><article></article>，否则考虑<section></section>或<div> <p>语义化最难的部分不在标签本身，而在于持续判断内容意图——它要求你写 HTML 时始终带着“这段内容对机器意味着什么”的意识，而不是只盯着“它在 Chrome 里看起来怎么样”。</p> </div>
浏览器不强制校验语义，但辅助技术与爬虫会严格依赖
你写错 <main></main> 或嵌套多个 <header></header>，页面照样能渲染出来，控制台也不会报错。但这会直接影响两类关键使用者：
实际写的时候，先问三个问题再选标签
面对一段内容，别急着翻 MDN 查标签列表，先快速判断：
