HTML 语义化 - 绿叶网

HTML 语义化，指的是使用恰当的语义化标签来描述网页内容。使用语义化标签，可以提高代码的可读性和利于代码的维护，并且更容易被搜索引擎理解和检索。

HTML 语义化简介

前面我们学习了不少标签，很多初学的小伙伴由于不熟悉标签的语义，常常用某一个标签来代替另一个标签，从而实现相同的效果。举个简单的例子，如果想要实现有序列表的效果，可能有些小伙伴会使用下面代码来实现。

示例：不使用语义化标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>1.HTML</div>
    <div>2.CSS</div>
    <div>3.JavaScript</div>
    <div>4.jQuery</div>
    <div>5.Vue.js</div>
</body>
</html>

页面效果如下图所示。

HTML语义化

分析：

乍一看，代码不同，但是跟使用 ul 和 li 实现的效果差不多呢！然后在心里暗暗窃喜：“哎呀，这方法太棒了，估计也就只有我能想得出来！” 曾经我也这样自诩过，实在惭愧。

用某一个标签来代替另外一个标签实现相同的效果，尤其是 “用 div 一把梭”，这是大多数初学者都会遇到的问题。正是这种错误的思维，导致很多人在学习 HTML 时，没有认真地把每一个标签的语义理解清楚，糊里糊涂就学过去了。能用某一个学过的标签来代替，我就懒得认真学新的标签，这就是 HTML 学习中最大的误区。

不少人可能会问：“对于大多数标签实现的效果，使用 div 和 span 这两个就可以做到了，干嘛那么费心费力去学习那么多标签呢？” 这个问题刚好戳中了 HTML 的精髓。说得一点都没错，你可以用 div 来代替 p，也可以使用 p 来代替 h1。但这样你就违背了 HTML 这门语言的初衷。

HTML 的精髓就在于标签的语义。HTML 大部分标签都有它自身的语义，例如 p 标签表示的是 “paragraph” ，它标记的是一个段落；h1 标签表示 “header1” ，它标记的是一个最高级标题……而 div 和 span 是无语义的标签，我们应该优先使用其他有语义的标签。

语义化，是非常重要的一个思想。在整站开发中，编写的代码往往都是成千上万行，你现在的几行代码无法与其相提并论。如果全部使用 div 和 span 来实现，我相信你看得头都晕。要是某一行代码出错了怎么办？你怎么快速地找到那一行代码呢？除了可读性，语义化对于搜索引擎优化（即 SEO）来说，也是极其重要的。

HTML 很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习 HTML 的目的并不是记住所有的标签，更重要的是在你需要的地方使用正确的语义化标签。把标签用在对的地方，这才是学习 HTML 的目的所在。

HTML 标签的语义

下面这张表是一个非常有价值的表，它列举了 HTML 最常用的标签及其语义，我们可以很方便地记忆和查询。

HTML 文本标签
标签	英文全称	语义
h1~h6	header 1~6	1~6级标题
p	paragraph	段落
div	divsion	区块（块元素）
span	span	区块（行内元素）
strong	strong	强调（粗体）
em	emphasized	强调（斜体）
a	anchor	超链接

HTML 列表标签
标签	英文全称	语义
ol	ordered list	有序列表
ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语（标题）
dd	definition description	定义描述（内容）

HTML 表格与表单
标签	英文全称	语义
table	table	表格
thead	table head	表头区域
tbody	table body	表格主体
tfoot	table foot	表格底部
th	table header	表头单元格
td	table data cell	普通单元格
form	form	表单区域
input	input	输入控件
button	button	按钮
label	label	标签（用于绑定表单控件说明）

HTML 结构标签
标签	英文全称	语义
header	header	头部
nav	navigation	导航
main	main	主体
article	article	文章
section	section	版块
aside	aside	侧边栏
footer	footer	底部