语义化html是seo、css和可访问性的基础，必须用、、等标签替代等非语义写法，确保结构正确、权重明确、嵌套合规。
语义化 HTML 不是“写得好看一点”的可选操作，而是给 SEO 和 CSS 提供稳定、可预测、低耦合的挂载点。用 <div> 堆出来的结构，爬虫和样式都得靠 class 名硬猜；而 <code><header></header>、<nav></nav>、<main></main> 这类标签，本身就是天然的语义锚点。
为什么 <div> 不能替代 <code><nav></nav> 做导航样式？
很多人用 <div class="nav"> 写导航，再配一堆 CSS 选择器去控制样式——这本身没问题，但隐患藏在维护和扩展里。
<ul>
<li>SEO 层面：搜索引擎不识别 <code>class="nav"，它只认 <nav></nav> 标签语义，意味着导航链接权重不会被自动提升
.nav 可能被误用于侧边栏、面包屑甚至分页条，样式污染风险高<div class="nav"> 完全无效，必须依赖 ARIA 属性手动补救
<h3>
<code><main></main> 是唯一合法的“主内容”挂载点，别用 <section></section> 或 <article></article> 替代
<main></main> 在规范中要求页面有且仅有一个，它是浏览器、爬虫、辅助技术公认的“核心内容起始位置”。用错会直接破坏结构信任链。
- 错误做法：
<section class="main-content"></section>—— 搜索引擎无法区分这是主内容还是某个子模块 - 正确做法：
<main></main>包裹真正不可省略的页面主体，比如文章正文、商品列表、表单容器 - 注意边界：
<main></main>不能嵌套在<article></article>、<aside></aside>、<footer></footer>内部，否则语义冲突
标题层级（<h1></h1>–<h6></h6>）不是样式开关，而是内容权重信号
很多项目把 <h2></h2> 当成“比 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8851" title="Seo Keyword Researcher"><img
src="https://img.php.cn/upload/skill/000/000/081/179229249674940.jpg" alt="Seo Keyword Researcher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8851" title="Seo Keyword Researcher" class="overflowclass">Seo Keyword Researcher</a>
<p class="overflowclass">为任意主题进行SEO关键词调研，并生成完整文章摘要，包括主关键词、次关键词、竞争分析、文章结构等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8851" title="Seo Keyword Researcher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 大一号的字”来用，结果整页全是 <h2></h2>，<h1></h1> 缺失或乱用。这会让 SEO 和屏幕阅读器彻底迷失主次。
-
<h1></h1>应该且只能出现一次，代表整个页面的主题（如“iPhone 15 Pro 购买指南”） - 每个
<section></section>或<article></article>内部可以有自己的<h2></h2>–<h6></h6>子层级，但必须保持嵌套逻辑 - CSS 中避免用
h2 { font-size: 1.5em; }这类全局重置——应通过 class 控制视觉，保留标签原始语义权重
最常被忽略的一点：语义标签不是“加了就完事”，它们之间的嵌套关系必须符合规范。比如 <nav></nav> 放在 <header></header> 里合理，但放在 <footer></footer> 里也合法；而 <main></main> 如果被包在 <article></article> 里，就会让爬虫误判内容粒度。结构对了，挂载点才真正可靠。
