HTML5语义化标签正确使用

有时候写页面就像请客吃饭。菜摆得满桌都是，客人却找不到哪盘是热菜、哪盘是凉菜。HTML如果只堆div和span，浏览器和读屏软件也只能干瞪眼。HTML5语义化标签的出现，与其说是给代码“化妆”，不如说是给结构“挂牌子”。牌子挂对了，路才好走。

写页面别只顾“看起来像”，要让结构“说得清”。

见过不少项目，首页像俄罗斯套娃：div套div，class取名像密码，header写成box-top，footer叫bottom-bar。样式倒是做出来了，可一打开开发者工具看DOM树，全是灰色的方块。搜索引擎爬来爬去，抓不住重点；屏幕阅读器读着读着，用户已经失去耐心。语义化标签的初衷很简单：不是替CSS干活，而是替“人”解释内容。比如看到<header>，不用猜这可能是导航、可能是logo，它就是页面或区块的“抬头”；看到<nav>，直接明白这是去别的地方的路。多花几分钟把结构理顺，后面改需求、调交互、搞自动化测试，都会松快不少。

把“一块内容”包起来，用对标签比用对颜色更重要。

有个做企业官网的案例挺典型。整页被切成好几块视觉模块：轮播图、公司介绍、产品列表、新闻动态、联系方式。早先全用div实现，样式靠命名硬撑。改版时换成语义化标签：轮播图放在<section>里，上方配<header>写小标题；产品列表用<section>包裹，每款产品用<article>独立。新闻动态也用<article>，发布时间塞在<time>里。导航用<nav>，页脚汇总地址和备案信息用<footer>。样式几乎没大动，但代码在文档大纲里自动排好了层级。后来加“跳过导航”功能和结构化数据，半天就搞定了——标签自己会“说话”，不用再用aria到处打补丁。

标题层级不是装饰品，是地图的等高线。

语义化不只是选对标签，还要有清晰的层级。很多页面喜欢用div模拟标题，再用font-size和color把它“撑大”。结果机器读不到权重，用户也理不清脉络。HTML5建议用<h1>到<h6>画出一张逻辑等高线图：每个<section>可以有自己的标题体系，互不干扰但层次分明。比如一篇文章页，主标题用<h1>，章节用<h2>，小节用<h3>。侧边栏的推荐文章是另一个<aside>，它的标题可以从<h2>重新开始。这样不仅对SEO友好，读屏软件也能按章节跳转，而不是一串毫无停顿的长句读到底。

别让标签“越俎代庖”，也别让功能“无家可归”。

并不是所有显眼的东西都叫header，也不是所有条列都要nav。见过把登录框包在header里，其实它更像表单；也见过把一堆版权说明硬塞进nav，结果屏幕阅读器当成导航读。语义化标签有自己的“职责范围”：<main>放独一无二的页面内容，<aside>放与主内容相关但可独立的信息，<figure>和<figcaption>处理图文组合，<details>和<summary>做可折叠说明。少用标签不代表落后，乱用标签才会制造障碍。工具越简单，越要克制。

结语

HTML5语义化不是炫技清单，而是日复一日对可维护性、可访问性和可理解性的投资。它不会替我们写出更美的界面，但能让代码在时间面前站得更久。下一次打开编辑器，不妨先不问“怎么画出来”，而是先问“这是什么”。一块内容、一条导航、一篇文章、一组补充信息，给它们贴对标签，结构会自己长出手脚，把未来的路铺得更平。把页面当成给人读的书，而不是给机器猜的谜，语义化的价值，就藏在这些不必言说的秩序里。