HTML语义化标签是现代网页可访问性、SEO和可维护性的基础设施，而非装饰；滥用div+class会丢失语义，导致辅助技术失效、SEO权重稀释及协作成本上升。
HTML语义化标签不是“锦上添花”的装饰，而是现代网页能被正确理解、可靠运行、长期维护的基础设施。不用 <main>、<nav> 或 <section>，浏览器和屏幕阅读器仍能渲染页面，但它们会失去对“这是导航”“这是主内容”“这是独立文章区块”的明确判断——这直接导致可访问性断裂、SEO权重稀释、团队协作成本上升。
为什么 <div> 不能替代 <header> 和 <footer>
用 <div class="header"> 模拟页眉，视觉上没问题，但语义信息彻底丢失。浏览器不会把它当作页面头部区域处理；屏幕阅读器无法通过快捷键（如 H 键跳转页眉）定位；搜索引擎也不会因此提升该区域内容的结构权重。
-
<header>可以嵌套在<article>内部，表示该文章自己的标题区；而全局<header>表示整个页面的头部 -
<footer>同样支持多级使用：页面级<footer>放版权，<article>内的<footer>可放作者、发布时间等元信息 - 滥用
<div>+ class 的写法，在大型项目中会导致 CSS 类名爆炸（.site-header、.article-header、.section-header），而原生语义标签天然自带作用域
<main> 必须且只能出现一次，但很多人忽略了它的嵌套限制
<main> 是页面中唯一代表“主导航之外的核心内容”的容器。它不能出现在 <article>、<aside>、<nav>、<header>、<footer> 内部——这些元素本身已有明确语义，再包一层 <main> 属于语义冲突。
- 错误写法：
<article><main><p>内容</p></main></article> - 正确写法：
<article><h2>标题</h2><p>内容</p></article>，由<article>自身表达“独立内容区块”语义 - 若页面有多个主要区块（比如双栏新闻+侧边推荐），应只用一个
<main>包裹全部，再用<section>划分逻辑区域
<nav> 不等于“所有链接集合”，它特指主导航用途
把面包屑、页脚链接、相关文章推荐都塞进 <nav> 是常见误用。W3C 明确指出：<nav> 应用于“页面主要导航区块”，即用户用来在网站不同区域间切换的入口集合。
立即学习“前端免费学习笔记（深入）”；
- 页脚中的“关于我们｜联系方式｜隐私政策”属于次要导航，建议用
<footer>直接包裹，不加<nav> - 文章末尾的“上一篇｜下一篇”属于上下文导航，更适合用
<section>或普通<div>，避免误导辅助技术 - 如果页面有多个主导航（如顶部主导航 + 侧边管理导航），可以使用多个
<nav>，但需通过aria-label区分，例如<nav aria-label="主导航">和<nav aria-label="后台管理导航">
真正难的不是记住每个标签怎么写，而是持续判断“这个内容在用户心智模型和机器解析模型中，究竟扮演什么角色”。语义化不是贴标签，是做翻译——把人的意图，准确转译成浏览器、爬虫、屏幕阅读器都能无歧义接收的信号。一旦开始依赖 class 名来“模拟语义”，就等于主动放弃了 HTML 的底层契约能力。
