语义化是让html标签准确表达内容角色而非样式，需按结构层级选标签、用time/strong/button等增强机器可读性，并通过h1唯一性、nav/aside/article合理使用等清单验证完整性。

语义化不是给标签加个新名字，而是让每个标签真正“说话”——告诉浏览器、搜索引擎和屏幕阅读器“这段内容是什么”，而不是“它看起来像什么”。核心不在多用几个新标签，而在每次写代码前问一句：这块内容在逻辑上属于什么角色？

结构先行：从内容角色出发选标签

别纠结“这里该用 section 还是 article”，先确认内容本质。比如一篇博客正文，它能独立存在、可被单独订阅或分享，那就用 article；如果只是页面里一个带标题的模块（如“关于我们”“服务流程”），没有独立传播价值，就用 section。

• 主导航链接集合 → 用 nav，不是 <div class="nav"> <li>页面顶部区域（含 logo + 导航）→ <strong>header</strong>，但注意：每个 <strong>article</strong> 或 <strong>section</strong> 也可以有自己的 <strong>header</strong> </li> <li>侧边栏、广告、相关推荐 → <strong>aside</strong>，前提是它和主内容有关联但非核心</li> <li>页脚版权、联系方式 → <strong>footer</strong>，同样可嵌套使用</li> <h3>层级真实：标题不是样式工具</h3> <p><strong>h1</strong> 到 <strong>h6</strong> 是内容层级的骨架，不是字号调节器。一个页面只有一个 <strong>h1</strong>（通常是网站名或主标题），<strong>main</strong> 区域的首级标题也应是 <strong>h1</strong> 或按逻辑降级（如 <strong>h2</strong>），不能跳级。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>文章标题用 <strong>h2</strong>，小节标题用 <strong>h3</strong>，依此类推</li> <li>避免 <strong>h1</strong> 后直接跟 <strong>h3</strong>，中间缺的层级会破坏结构理解</li> <li>即使没视觉样式，仅靠标题层级也应能理清内容主次</li> </ul> <h3>机器可读：时间、强调与交互要“有据可查”</h3> <p>语义不只是给人看的。搜索引擎和辅助技术依赖标签背后的含义做判断。</p> <ul> <li>发布时间别只写“2024年3月15日”，加上 <strong><time datetime="2024-03-15">2024年3月15日</time></strong>，机器就能准确识别日期</li> <li>重要信息用 <strong>strong</strong>，不是为了加粗，而是声明其权重；<strong>em</strong> 表示语气强调，不是斜体替代品</li> <li>按钮功能必须用 <strong>button</strong> 标签，不能用 <strong>div</strong> + JavaScript 模拟，否则键盘用户无法聚焦、屏幕阅读器无法识别</li> </ul> <h3>检查闭环：用最小清单验证语义完整性</h3> <p>不靠记忆，靠可执行项。每次写完结构，快速过一遍：</p> <ul> <li>是否只有一个 <strong>h1</strong>？<strong>main</strong> 是否包裹了全部主体内容？</li> <li>主导航是否在 <strong>nav</strong> 内？侧边栏是否用了 <strong>aside</strong>？</li> <li>每篇独立文章是否用 <strong>article</strong> 包裹？其中是否包含标题和时间？</li> <li>有没有还留着 <code><div id="header"> 或 <code><div class="footer"> 这类无意义容器？ </div>