HTML5结构标签和div的区别，表面上是标签名称的不同，本质上却是页面语义表达能力的差异。div是一个纯粹的块级容器，它不携带任何关于内容角色的信息，浏览器和搜索引擎看到div时只知道这里有一个分区，却无法判断这个分区是页头、导航、正文还是侧边栏。而header、nav、main、article、section、aside、footer这些标签出现之后，开发者可以直接用标签名告诉解析器每一块区域的功能定位。这种差异不会影响页面在浏览器中的视觉呈现，却会深刻影响代码的可维护性、搜索引擎对页面结构的理解，以及屏幕阅读器用户的操作体验。
理解这组区别需要先明确一个前提：HTML5结构标签并不是用来替代div的，它们解决的是不同层面的问题。div解决的是布局和分组问题，结构标签解决的是语义标注问题。在真实项目中，一个合理的页面往往同时包含结构标签和div，二者各司其职。如果强行把页面中所有div都替换成结构标签，不仅不会提升代码质量，反而可能制造新的语义噪音。下面从文档结构、语义收益、实际选型三个角度分别展开。
文档结构与语义标签的对应关系
HTML5引入结构标签的初衷，是让网页文档的结构能够脱离CSS样式独立存在。早期网页开发中，页面区域的划分完全依赖div配合class或id属性，比如<div class="header">、<div class="nav">、<div class="footer">。这种方式虽然能实现布局，但class命名没有统一标准，不同开发者可能把页头命名为header、top、head-wrap或者page-head，搜索引擎爬虫无法从这些五花八门的类名中可靠地识别页面结构。
结构标签的引入提供了一套标准化的语义词汇表。<header>表示页面或区块的头部信息，通常包含标题、logo、简介等内容；<nav>表示导航链接的集合，主站导航、面包屑、分页都属于这个范畴；<main>标记页面的主要内容区域，每个HTML文档中只能有一个main；<article>表示可以独立分发或复用的完整内容单元，比如一篇博客文章、一条新闻、一个论坛帖子；<section>表示文档中的一个主题分组，通常带有自己的标题；<aside>表示与周围内容相关性较弱的补充信息，比如侧边栏、广告位、相关链接；<footer>表示页面或区块的尾部信息，通常包含版权声明、联系方式、备案号等。
这些标签之间的关系可以用一个典型的博客页面来说明。页面最外层有一个<header>承载站点名和主导航，导航用<nav>包裹；中间部分用<main>包围，里面有一个<article>表示博客正文，文章内部的章节可以用<section>划分；侧边栏用<aside>放置相关文章推荐；最下面是<footer>放置版权和备案信息。整个结构不依赖任何CSS就能被清晰地解读出来，这就是语义化的核心价值所在。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化页面示例</title>
</head>
<body>
<header>
<h1>技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/articles">文章</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTML5结构标签详解</h2>
<section>
<h3>header的用法</h3>
<p>header可以出现在页面层级，也可以出现在article内部。</p>
</section>
<section>
<h3>footer的用法</h3>
<p>footer同样既可以用于整个页面，也可以用于单个区块。</p>
</section>
</article>
<aside>
<h2>相关推荐</h2>
<ul>
<li>理解CSS Grid布局</li>
<li>Flexbox实用技巧</li>
</ul>
</aside>
</main>
<footer>
<p>版权所有 © 技术博客</p>
</footer>
</body>
</html>需要注意的是，<section>并不是一个可以随意使用的通用容器。根据HTML规范，section应该代表一个具有独立主题的区块，并且通常应该包含一个标题元素（h1到h6）。如果一个区块没有明确的主题，或者仅仅是为了样式布局而存在，那么使用div比使用section更合适。误用section会导致文档大纲混乱，搜索引擎和辅助技术反而无法准确理解页面结构。
语义化优势的具体体现
语义化的第一个受益方是搜索引擎。搜索引擎爬虫在解析页面时，会优先识别结构标签来确定内容的主次关系。<main>中的内容会被认为比<aside>中的内容更重要，<article>中的文本会被判断为页面的核心主题内容。这些信号会直接参与搜索引擎对页面相关性和质量的评估。相比之下，如果整个页面全部使用div构建，爬虫需要依赖更多的启发式算法去猜测哪部分是正文、哪部分是导航，这增加了被误判的概率。
第二个受益方是无障碍访问用户。屏幕阅读器（如NVDA、JAWS、VoiceOver）会读取HTML结构来生成页面导航信息。使用结构标签后，屏幕阅读器用户可以快速跳转到页面的主要区域、导航区域或页脚区域，而不需要从头到尾逐行听读。从技术实现角度看，结构标签隐式携带了ARIA landmark角色：header对应banner、nav对应navigation、main对应main、aside对应complementary、footer对应contentinfo。这些隐式角色让辅助技术能够更准确地理解页面。
<!-- 结构标签隐式携带ARIA角色，无需重复声明 --> <header> <!-- 等价于 <div role="banner"> --> </header> <nav> <!-- 等价于 <div role="navigation"> --> </nav> <main> <!-- 等价于 <div role="main"> --> </main> <aside> <!-- 等价于 <div role="complementary"> --> </aside> <footer> <!-- 等价于 <div role="contentinfo">，但仅限页面级footer --> </footer>
第三个受益方是开发团队本身。结构标签让代码的阅读成本显著降低。当一个开发者接手一个使用语义化标签的项目时，他可以直接从标签名判断页面骨架，不需要逐个查看class名称去猜测区块用途。这在多人协作和长期维护的项目中尤为重要。另外，结构标签也为CSS选择器提供了语义锚点，比如可以直接使用main > article这样的选择器来定位正文区域，而不需要依赖自定义类名。
不过需要提醒的是，语义化并不等于完全抛弃class。结构标签负责表达区域角色，class负责表达具体样式和状态，两者可以并行存在。<header class="site-header site-header--sticky">这种写法是完全可以接受的，class的命名空间不会因为使用了结构标签而被限制。
实际项目中的选型方法
选择结构标签还是div，核心判断标准只有一个：这块区域是否有明确的语义角色。如果答案是肯定的，就使用对应的结构标签；如果这块区域仅仅是布局需要的包裹层，或者是用来承载某些装饰性元素的容器，那么div依然是正确的选择。以下几个场景可以帮助理解这个判断标准。
第一个典型场景是页面主框架。页面顶部通常负责展示站点标识和主导航，使用<header>和<nav>是合适的；页面主体内容使用<main>；页脚使用<footer>。但在这个框架内部，用来控制布局的flex或grid容器仍然使用div。例如一个常见的布局结构：<header>内部可能有一个div用来做容器的宽度限制和水平居中，这个div就没有对应的语义标签，使用div是恰当的。
第二个典型场景是内容区块。一篇完整的文章使用<article>，文章内根据主题拆分的段落组使用<section>，文章内的评论列表则可以使用多个嵌套的<article>或者用<section>包裹。但文章内部为了排版而添加的分隔线、卡片容器、装饰性盒子，使用div就足够了。再比如一个商品列表页，每个商品卡片如果包含完整的商品信息（名称、价格、描述、链接），可以用<article>标记；如果商品卡片仅作为展示单元，用div配合列表结构反而更简明。
第三个典型场景是侧边栏和弹窗。侧边栏如果承载的是与主要内容相关的补充信息，用<aside>；如果是一组通用的操作按钮或者广告位，语义关联性不强，用div也是合理的。模态弹窗的内容如果是独立完整的对话或表单，可以考虑用<section>或者直接使用div配合role属性。这里可以引入ARIA role来补充语义，比如<div role="dialog" aria-modal="true">，这样既保持了无语义容器的灵活性，又提供了无障碍所需的信息。
<!-- 示例：结构标签与div配合使用 -->
<body>
<header class="site-header">
<div class="container">
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout-grid">
<article>
<h2>文章标题</h2>
<div class="article-meta">
<span>作者：张三</span>
<span>发布时间：2024-01-15</span>
</div>
<section>
<h3>背景介绍</h3>
<p>正文内容……</p>
</section>
</article>
<aside>
<h2>相关文章</h2>
<div class="sidebar-card">
<a href="#">CSS Grid入门</a>
</div>
</aside>
</div>
</main>
<footer>
<div class="container">
<p>版权信息</p>
</div>
</footer>
</body>选型过程中还有几个值得注意的误区。第一个误区是认为用了结构标签就必须完全排除div，这会让布局代码变得非常别扭，因为很多纯布局性质的包裹层根本没有对应的语义标签可用。第二个误区是把<section>当作div的替代品来用，前面已经提到，没有主题标题的区块不应该使用section。第三个误区是忽略了<main>的唯一性约束，在一个页面中放置多个main会破坏语义完整性。第四个误区是在不适合使用结构标签的地方强行套用，比如用<nav>包裹所有包含链接的区块，实际上只有主要导航链接集合才应该使用nav，侧边栏中的标签云、文章底部的相关链接通常不需要nav。
综合来看，一个简单的选型路径可以是：先明确区块的内容角色，再判断是否存在与之匹配的结构标签，同时检查该区块是否满足对应标签的语义约束，如果都满足则使用结构标签，否则回到div。将这个判断过程固化到团队规范中，可以让不同开发者产出的HTML结构保持一致性，这也是语义化实践能够长期维持的关键。