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