html语义化是现代页面结构的底线要求，而非加分项；不用、等标签会导致屏幕阅读器无法识别主次、搜索引擎仅视作无名堆砌。
HTML语义化不是“加分项”，而是现代页面结构的底线要求——不用 浏览器和辅助技术（比如盲人用的屏幕阅读器）不认类名，只认原生标签语义。 常见错误现象： 关键看内容是否“可独立存在、可单独分发”。博客正文、新闻稿、用户评论，适合用 使用场景对比： 不是。只有“主导航”才用 性能与兼容性影响： 不是。 容易踩的坑： 真正难的不是记住每个标签怎么写，而是每次敲下 <header></header>、<main></main> 这类标签，你的页面在屏幕阅读器里可能读不出主次，在搜索引擎眼里就是一堆无名 <div> 堆砌。
<h3>为什么 <code><div class="header"> 不如 <code><header></header>？
<div class="header"> 对它们来说和 <code><div class="sidebar"> 完全没区别；而 <code><header></header> 一出现，阅读器就知道“这是页眉，可跳转”，搜索引擎也立刻标记为高权重区域。
<div id="nav"> 写导航，但没加 ARIA role，导致键盘 Tab 无法聚焦到整个导航区块
<li>多个 <code><main></main> 出现在同一页面，违反 HTML5 规范（每个页面只能有一个 <main></main>）<article></article> 当成样式容器乱套，结果文章被搜索引擎识别为“独立可分发内容”，反而稀释主页面权重
<section></section> 和 <article></article> 怎么选？<article></article>；而“关于我们”“服务列表”“客户评价”这类依附于当前页面逻辑的区块，用 <section></section> 更准确。
<article></article>：一篇带标题、作者、发布时间的博客；一个可 RSS 订阅的评论条目<section></section>：首页里的“最新动态”栏目（里面可能包含多个 <article></article>）；产品页里的“技术参数”小节<section></section> 很可疑，HTML5 规范建议每个 <section></section> 应有 <h2></h2>–<h6></h6> 级标题
<nav></nav> 必须包裹所有链接吗？<nav></nav>，比如顶部菜单、侧边全局导航、页脚主要链接组。面包屑、文章内跳转锚点、分页控件、社交分享按钮这些，都不该塞进 <nav></nav>。
<nav></nav> 会让屏幕阅读器反复播报“导航区域开始/结束”，干扰用户<nav></nav> 支持不稳定，建议单层为主<nav></nav> 内链接，但不会因此提升权重——它只是帮你“说清结构”，不是 SEO 开挂工具
<footer></footer> 只能放在页面最底下？<footer></footer> 是“所属区块的页脚”，可以出现在 <article></article> 或 <section></section> 内部。比如一篇博客 <article></article> 底部放作者信息和发布时间，就该用 <footer></footer>，而不是硬塞到整个页面 尾部。
<footer></footer> 里，却忘了给它加 <address></address> 或 role="contentinfo"（尤其当它是页面级页脚时）<article></article> 内用了 <footer></footer>，但里面又塞了全站导航链接——这违背语义，应该用 <nav></nav> 或普通 <ul></ul>
<footer></footer> 里误用 <h1></h1>：页脚不是内容主体，标题层级应从 <h2></h2> 或更低开始 时，先问一句：“这段内容，在脱离样式后，还‘是什么’？”
