HTML语义化指的是使用恰当的HTML标签来表达内容的含义和结构，让浏览器、开发者和搜索引擎都能明确各个部分的作用。符合语义的HTML代码不仅能提升页面的可维护性，还能在SEO和无障碍访问方面带来明显优势。
HTML语义化的核心原则
编写语义化HTML首先要遵循内容优先的原则，先确定页面内容的逻辑结构，再选择对应的标签，而不是先选标签再填充内容。其次要做到标签职责单一，每个标签只承担其设计之初的语义功能，避免滥用通用标签实现样式效果。
常用语义化标签的使用规范
结构类语义标签
这类标签用于划分页面的整体结构，替代传统的<div>滥用场景：
- <header>：用于放置页面的头部内容，比如导航栏、站点标题，一个页面可以包含多个<header>，比如文章内部的头部区域也可以使用
- <nav>：专门用于包裹导航链接集合，不要把所有的链接组都放在<nav>中，只放核心导航内容
- <main>：表示页面的主要内容区域，一个页面只能有一个<main>标签，且不能直接放在<header>、<footer>、<nav>等标签内部
- <article>：代表独立的可分发内容，比如一篇博客文章、一条用户评论，内容本身具有独立性和完整性
- <section>：用于对相关内容进行分组，每个<section>通常应该有对应的标题，和<article>的区别是<section>的内容不需要完全独立
- <aside>：放置和主内容相关的附属内容，比如侧边栏、广告、相关推荐链接
- <footer>：用于页面或某个区块的底部内容，比如版权信息、联系方式、相关站点链接
文本类语义标签
文本类语义标签用于明确文本的含义，替代单纯的<span>或<div>包裹文本的用法：
- <h1>到<h6>：标题标签，按照层级使用，<h1>通常是页面主标题，一个页面尽量只有一个<h1>，层级不要跳跃，比如不要跳过<h2>直接用<h3>
- <p>：段落标签，用于包裹一段完整的文本内容，不要多个段落用同一个<p>，也不要在<p>内部嵌套块级元素
- <strong>：表示文本具有重要性，浏览器默认会加粗显示，不要仅仅为了加粗效果使用<strong>
- <em>：表示文本需要被强调，浏览器默认会斜体显示，不要仅仅为了斜体效果使用<em>
- <time>：用于包裹日期或时间内容，建议添加datetime属性明确时间格式，方便机器识别
其他语义标签
- <figure>和<figcaption>：<figure>用于包裹独立的媒体内容，比如图片、图表、代码块，<figcaption>是对应内容的标题或说明，二者配合使用
- <mark>：用于标记需要高亮的文本，比如搜索结果中的匹配关键词
- <details>和<summary>：<details>用于创建可展开收起的内容块，<summary>是对应的标题，点击标题可以切换内容显示状态
编写语义化HTML的常见误区
- 滥用<div>和<span>：把所有内容都用<div>包裹，忽略了语义标签的存在，导致页面结构难以理解
- 为了样式效果选择标签：比如为了换行用<br/>代替<p>的段落间距，为了加粗用<strong>代替CSS的font-weight属性
- 标题层级混乱：页面中出现多个<h1>，或者标题层级跳跃，比如<h1>之后直接接<h3>，没有<h2>
- 忽略标签的嵌套规则：比如在<p>标签内部嵌套<div>、<section>等块级元素，导致HTML解析出错
- 给语义标签添加无意义的类名：比如给<nav>添加class="nav"，本身就是冗余的，语义标签本身已经能表达含义
语义化HTML的验证方法
可以通过W3C的HTML验证工具检查代码是否符合语义规范，也可以手动检查：查看代码时是否能不依赖CSS就明确每个区块的作用，是否所有内容都有对应的合适标签，是否存在无意义的<div>嵌套。另外也可以使用浏览器的开发者工具查看页面的无障碍树结构，确认语义是否正确传递。
语义化HTML示例代码
下面是一个符合语义规范的简单博客页面代码示例：
<!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="/html">HTML教程</a></li>
<li><a href="/css">CSS教程</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>如何保证HTML语义化</h2>
<p>发布时间：<time datetime="2024-05-20">2024年5月20日</time></p>
</header>
<section>
<h3>语义化的核心原则</h3>
<p>编写语义化HTML要遵循内容优先的原则，先确定内容结构再选择标签。</p>
</section>
<section>
<h3>常用语义标签</h3>
<p>合理使用<strong>header</strong>、<strong>main</strong>等标签可以提升页面可读性。</p>
</section>
</article>
</main>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="/css-semantic">CSS语义化技巧</a></li>
</ul>
</aside>
<footer>
<p>版权所有 © 2024 前端技术博客</p>
</footer>
</body>
</html>
语义化HTML的实际价值
符合语义的HTML代码首先能降低团队协作的沟通成本，其他开发者接手项目时能快速理解页面结构。其次能提升SEO效果，搜索引擎爬虫更容易识别页面核心内容，提升页面排名。另外也能提升无障碍访问体验，屏幕阅读器用户可以通过语义标签快速导航页面内容，不会因为结构混乱无法获取信息。