在HTML5出现之前，前端开发者构建页面结构几乎全靠div和span这两个万能容器。这种写法虽然能实现视觉效果，但代码里充斥着<div class="header">、<div id="nav">这样的命名约定，浏览器和搜索引擎只能靠class名去猜测每个区域的用途。HTML5引入了一批语义化标签，让标签本身就能表达内容的含义，比如<header>表示页头、<article>表示独立文章。本文将系统介绍这些标签的使用场景，并分析语义化带来的实际好处。
什么是HTML语义化，为什么它很重要
语义化指的是用恰当的标签去描述内容的性质和结构，而不是只关注标签的呈现效果。举个例子，一段标题文字应该用h1到h6表示，一段强调的文字用strong或em表示，一篇独立的博文用article包裹。浏览器读到这些标签时，不需要任何额外信息就能理解内容的角色。
语义化的重要性体现在三个方面。第一，搜索引擎爬虫会根据标签判断页面内容的权重和层次，比如h1通常被视为页面主标题，出现在article中的内容会被认为是核心正文。第二，屏幕阅读器等辅助设备依赖标签为视障用户朗读页面结构，语义清晰的页面能让用户快速跳转到导航或正文区域。第三，对开发者自己而言，语义化的代码结构一目了然，后期维护和团队协作的成本都会显著降低。
常用HTML5语义化标签及使用场景
HTML5新增的结构类语义化标签大约有十几个，掌握最核心的几个就能应对绝大多数页面。下面逐一说明它们的典型场景。
<header>通常用于页面顶部或某个区块的头部，可以包含logo、标题、搜索框等。需要注意的是，header不等于页头，一篇文章开头的标题和元信息也可以用header包裹。<nav>专门用于导航链接集合，页面主导航、面包屑、侧边栏目录都适合用它，但页脚里零散的几个链接则不必强套nav标签。<main>表示页面的主体内容，一个页面中应该只有一个可见的main，且不应该嵌套在article、aside等标签内部。
<article>和<section>是最容易混淆的一对。article强调内容的独立性和完整性，即脱离当前页面也能单独成立，比如一篇新闻、一条评论、一个商品卡片。而section表示文档中的一个主题分组，通常带有自己的标题，比如页面中的“产品介绍”“用户评价”两个板块。判断技巧是：内容能被RSS单独订阅或转发就用article，只是页面内的逻辑分段就用section。
此外还有<aside>表示与主内容间接相关的侧边内容，如侧边栏、广告位、相关推荐；<footer>表示页面或区块的底部，常放版权信息和联系方式；<figure>和<figcaption>用于图文组合，让图片和它的说明文字产生明确关联。
语义化布局与传统div布局的对比
下面通过两段代码直观感受差异。传统div布局的写法类似这样：
<div class="page">
<div class="header">
<div class="nav">导航链接</div>
</div>
<div class="content">
<div class="post">文章内容</div>
<div class="sidebar">侧边栏</div>
</div>
<div class="footer">版权信息</div>
</div>改用语义化标签后，结构变成：
<body>
<header>
<nav>导航链接</nav>
</header>
<main>
<article>文章内容</article>
<aside>侧边栏</aside>
</main>
<footer>版权信息</footer>
</body>对比可以看出，语义化版本减少了大量无意义的class命名，结构层级更扁平，代码意图也更清晰。更重要的是，辅助设备和爬虫可以直接通过标签名定位区域，而不依赖开发者自行约定的命名规范。
语义化标签的注意事项与实践建议
使用语义化标签时有几个常见误区需要避开。一是不要为了语义化而语义化，比如把所有段落都塞进section，或者在没有导航含义的地方使用nav，标签的滥用和错用反而会误导机器对页面的理解。二是header和footer可以在页面中多次出现，它们是区块级概念，不必局限于页面顶部和底部。三是旧版浏览器如IE8不支持这些新标签，需要通过JavaScript创建元素并设置display: block才能正常布局，不过如今这类浏览器已基本退出市场。
在实践层面，建议先用大纲思维规划页面：确定页头、主导航、主内容、侧边栏、页脚五大区域，再判断主内容是否由多个独立条目组成，从而决定用article还是section。对于交互组件，可以配合ARIA属性进一步增强可访问性，例如给nav添加aria-label来区分多个导航区域。写完代码后，可以用浏览器的阅读模式或开发者工具的辅助功能面板检查页面结构是否被正确识别。
总的来说，语义化标签是低成本高回报的实践：它不要求额外的框架和工具，只需要在写HTML时多想一步内容到底是什么性质。坚持语义化，你的页面在SEO表现、可访问性和团队协作上都会获得长期收益。