HTML5语义化标签正确使用

前几天翻看自己三年前的代码，差点没被自己恶心到。
满屏的<div>和<span>，像一块块没贴标签的砖头，堆得整整齐齐，却谁也看不出哪块是门、哪块是窗。
那时候觉得“能跑就行”，结果后面加个搜索框，改个侧边栏，改一下午，样式到处崩，JS也像打补丁一样越贴越多。
后来才明白，问题不是写得不够多，而是说得不够清楚——对浏览器、对搜索引擎、对协作的同事都没把“话”说明白。

标签不是装饰，而是把话说明白

HTML5推出一堆语义化标签，并不是为了炫技，而是让页面先“说得清”。
我以前写导航，喜欢用<div class="nav">包个<ul>，再加个点击展开的JS。样式一多，CSS就像打结的耳机，解半天。
后来换成<nav>，最明显的变化是：不用写那么多“选中父级再找子级”的绕圈选择器，结构一目了然。
哪怕不加样式，屏幕朗读工具也能直接读出“这是导航”，而不是一串没有名字的可点击区域。
语义化不是让页面好看，而是让“好”得更有依据。

结构一旦清晰，改起来就不慌

做内容型页面时，我踩过一个大坑：把文章标题、发布时间、作者全塞进一个<div>，用类名硬区分。
结果运营要加个“推荐阅读”，我复制粘贴完，发现标题层级乱了，SEO评分掉了一截。
换用<article>包裹独立内容，再用<header>放标题和元信息，结构立刻清爽。
时间用<time datetime="">标注，机器读得懂“2024-03-01”到底是发布日期还是活动截止；人看源码，也不费劲猜哪个类名对应日期。
改需求时，只需要往里添<section>或调整<header>，不会牵一发而动全身。

别让“无意义的容器”背锅

我们总怕少一个<div>页面会塌，其实很多场景根本不配当容器。
页脚信息我见过用三个<div>叠出来的：版权、备案号、友情链接。
改成<footer>之后，不只是代码行数少了，CSS也省了“去重边距”“清浮动”这些补丁。
侧边栏也是，曾经用<div class="aside">硬撑，换成<aside>之后，焦点顺序更合理，键盘用户操作起来不再“迷路”。
这些标签不是摆设，而是给不同角色的一份地图：让CSS知道哪块能独立排版，让JS知道哪块可以懒加载，让搜素引擎知道哪块是主内容。

语义化不是死规则，而是讲分寸

也不是说看到列表就一定要上<article>，或者每个按钮都得包一层<section>。
我见过一个后台管理系统，把表格每一行都套<article>，结果屏幕朗读把数据读得像新闻连播，哭笑不得。
语义化的分寸在于：这个块是不是独立可复用？有没有明确的主题？需不需要被单独索引？
导航、主内容、附属信息、发布时间，这些有明确含义的场景，用对标签收益最大。
而纯粹为了布局撑出来的结构，用<div>也坦坦荡荡，别硬拗“看起来高级”。

案例不复杂，但足够说明问题

去年做活动页，我试着把语义化当“第一步”来做，而不是“最后补的功课”。
顶部用<header>放品牌和主导航；主区域用<main>包住轮播和活动规则，避免被侧边栏干扰权重；规则本身用<section>分段，每段有小标题；独立的活动介绍用<article>，发布时间用<time>。
底部放协办信息和备案号，用<footer>统一收口。
最直接的感受是：联调时，后端同事看模板能直接定位“把数据插到哪个块”；测试用无鼠标模式也能顺畅跳转；上线后，页面被收录的速度比以往快了不少。
样式上，我只写了少量类名，更多靠标签本身的层级关系把骨架撑起来，改色换字体几乎没动结构。

结语
语义化标签不是“更高级的写法”，而是一种更诚实的表达。
它让页面不再只是“看起来像样”，而是“说得清楚、用得省心”。
当结构先走对一步，样式、交互、可访问性都会跟着松一口气。
下一次打开新文件时，不妨先别急着敲<div>，想一想这块内容到底是谁、在哪、做什么。
把话说清楚，剩下的路，反而走得更快。