Web前端入门第 14 问：HTML 语义化是什么？

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

---

语义化：通俗地说，就是让机器可以理解编写出来的 HTML 代码。比如：搜索引擎、屏幕阅读器等。

非语义化写法

网站结构大概这样：

<div class="header"></div>
<div class="nav">导航</div>
<div class="main-content">
  <div class="article">文章主体内容</div>
</div>
<div class="footer">版权信息</div>

语义化写法

网站结构大概这样：

<header>网站LOGO</header>
<nav>导航</nav>
<main>
  <article>文章主体内容</article>
</main>
<footer>版权信息</footer>

两种写法对比

1. 语义化能更好的描述网页内容。
2. 增强了屏幕阅读器的可访问性，帮助视障用户理解内容。
3. 优化了搜索引擎爬虫的抓取效率，可以提升 SEO 排名。
4. 使用合适的语义化标签可以让代码更简介，减少不必要的 class 和 id，提升代码可读性与维护性。

常用语义化标签

<header> 页眉或内容区块的头部

<nav> 导航链接

<main> 页面主体内容（唯一）

<article> 独立内容（如文章、博客）

<section> 内容分组（需配合标题使用）

<aside> 侧边栏或附加内容

<footer> 页脚或内容区块的底部

<figure>和<figcaption> 图像、图表等媒体内容

<time> 时间或日期

<mark> 突出显示文本

<h1>-<h6> 用于定义不同级别的标题，表示文档或章节的重要程度

<p> 用于段落文本

总结

HTML 语义化通过标签的“自解释性”构建清晰的文档结构，是开发现代 Web 应用的基础实践。

它不仅优化了机器解析效率，也提升了开发体验和用户体验。

大概意思就是，HTML 用语义化标签定义好了一个大体框架，直接往这框架里面填写内容即可，屏幕阅读器和搜索引擎都很好这一口。