标签的语义

HTML设计都是有语义考虑的，下表是部分标签的含义：

标签名 英文 翻译
div division 分隔
span span 范围
ol ordered list 排序列表
ul unordered list 不排序列表
li list item 列表项目
dl definition list 定义列表
dt definition item 定义术语
dd definition description 定义描述
del deleted 删除
ins inserted 插入
h1~h6 header 1 to header 6 标题 1 到标题 6
p paragraph 段路
hr horizontal rule 水平尺（效果为分割线）
a anchor 锚
abbr abbreviation 缩写词
acronym acronym 取首字母的缩写词
address address 地址
var variable 变量
pre preformatted 预定义格式
blockquote block quotation 区块引用语
strong strong 加重
em emphasized 加重
b blod 粗体
i italic 斜体
big big 变大
small small 变小
sup superscripted 上标
sub subscripted 下标
br break 换行
center center 居中（不赞成使用）
font font 字体（不赞成使用）
u underlined 下划线
s strikethrough 删除线
fieldset fieldset 域集
legend legend 图标
caption caption 标题

html5 也定义了一些新的语义标签

标签名 英文 翻译
article article 文章
aside aside 旁边
figure figure 图形（规定自包含内容：如照片）
figcaption figcaption 图标描述（定义figure的标题）
header header 页眉
main main 主内容
nav navigation 导航
footer footer 页脚
mark mark 标记（定义重要或强调的文本）
section section 章节（定义文档中的节）
details details 细节（定义可查看或隐藏的细节）
summary summary 概要（定义details的标题）
time time 时间（定义日期时间）

其中 div 和 span 没有语义，它们只是分别用作块级元素和行内元素的区域分隔。

为什么需要使用语义标签

早期的网页主要用于交流论文，用于展示论文，对于网页的样式并没有多大的要求。随着互联网开始进入我们的生活，简陋的样式已经不能够满足网页功能的需要了，人们迫切需要网页有更强的表现力。

但是一开始的网页不具备布局的功能，人们想到了利用 table 来强行实现布局。直到 css 的出现才解决网页表现力不够的问题。

css 布局也就是俗称 div + css 布局。其核心的思想就是用 css 来控制网页中元素的样式，包括位置、大小、颜色等。css 布局可以摒弃 table 布局方式中为强制定位而添加的大量元素，从而让 HTML 可以从样式、结构混杂的局面中挣脱出来，专注于结构。

css 布局弱化了标签的“布局”能力，将“布局”完全放到样式中进行控制，而标签重新恢复了原来的作用。css 布局具有代码量少、结构精简、语义清晰等有点。

也就说，通过 css，我们可以无视标签的默认样式，可以任意控制它们的表现形式。也正是 css 的强大，所以可以用完全不同的 HTML 代码制作出在视觉上相同的页面。

但是这是一把双刃剑。如果使用不当，容易使我们陷入 css 布局的一个误区——只要不是 table 布局，只要是通过 css 来布局的，就是合适的，就是符合 Web 标准的。如果只是考虑最终的视觉效果，而不是考虑标签的语义，其实有走上了 table 布局的老路。

事实上，css 布局只是 Web 标准的一部分。在 HTML、CSS、Javascript 这三大元素中，HTML 才是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定 HTML，确定语义的标签，再来选用合适的 CSS。

如何确定你的标签语义是否良好

css 是用来控制网页样式的，那么是不是说，如果一个网页不使用 css，网页就没有样式了？不是的，浏览器会根据标签的语义给定一个默认的样式，同时不同的浏览器给定的默认样式也存在差异。比如 h1、h2 系列标签，会有加粗、上下边距等默认样式。

所以，判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页的结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式之后结构依然很清晰。

同样的设计图，不同的 HTML 标签可以通过 css 实现同样的页面，但是语义不好的 css 布局和语义良好的 css 布局在去掉样式后的表现却可能截然不同。

除了去掉样式之后的可读性外，值得重点提及的还有 h 标签。h 标签的含义是“标题”，搜索引擎对这个标签比较敏感，尤其是 h1 和 h2。一个语义良好的页面，h 标签应该是完整有序没有断层的。也就是说，要按照 h1、h2、h3、h4 这样一次排列下来，不要出现类似 h1、h3、h4，漏掉 h2 的情况。

为了方便调试，使用 Chrome 浏览器的话推荐安装 Web Developer 插件。选择 Disabled Embedded Styles 即可。

image.png

常见的模块你真的了解吗

标题和内容

标题和内容模块如下图所示，这种标题配内容的模块，我们可以用如下几种方案来实现同样的效果。

image.png

  • 方案一
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     .h2 { position: relative; border-bottom: 1px dashed #7d7373; }
  10.     .h2 a { position: absolute; right: 0; top: 0;}
  11.     .p { text-indent: 2em; line-height: 150%; margin: 0 0 20px 0; }
  12.     .strong { color: red; }
  13.   </style>
  14.   <script src="./main.js"></script>
  15. </head>
  16. <body>
  17.   <div class="h2">标签的语义<a href="#">更多&gt;&gt;</a></div>
  18.   <div class="p">段落一内容，根据不同的内容应该选择合理的标签...<span class="strong">根据浏览器的默认样式</span>决定语义标签的样式</div>
  19.   <div class="p">段落二内容，根据不同的内容应该选择合理的标签...<span class="strong">根据浏览器的默认样式</span>决定语义标签的样式</div>
  20. </body>
  21. </html>

视觉效果是达到了，我们再来看看它的语义，我们只能看到“div”、“span”这样无语义的标签，从标签上看不出结构的逻辑。这显然不是很合适，我们需要用标签让代码能够清晰地透露出“标题”，“内容”，“被强调的文本”等信息。

我们再做一下改进，换第二种方案

  • 方案二
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     h2 { position: relative; border-bottom: 1px dashed #7d7373; }
  10.     h2 a { position: absolute; right: 0; top: 0;}
  11.     p { text-indent: 2em; line-height: 150%; margin: 0 0 20px 0; }
  12.     strong { color: red; }
  13.   </style>
  14.   <script src="./main.js"></script>
  15. </head>
  16. <body>
  17.   <h2>标签的语义<a href="#">更多&gt;&gt;</a></h2>
  18.   <p>段落一内容，根据不同的内容应该选择合理的标签...<strong>根据浏览器的默认样式</strong>决定语义标签的样式</p>
  19.   <p>段落二内容，根据不同的内容应该选择合理的标签...<strong>根据浏览器的默认样式</strong>决定语义标签的样式</p>
  20. </body>
  21. </html>

方案二有很大的改进，从标签中能清楚的看出标题和内容的划分，也能看到“根据浏览器的默认样式”被强调了。等等，我们再注意看看 更多>> 被包围在二级标题标签中，它属于二级标题吗？不对，虽然在视觉上它和“标签语义”是放在同一行，但是事实上，它并不属于标题！这里再改进一下，如方案三。

  • 方案三
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     .title { border-bottom: 1px dashed #7d7373; text-align: right; overflow: hidden;}
  10.     .title h2 { float: left; padding: 0; margin: 0;}
  11.     p { text-indent: 2em; line-height: 150%; margin: 0 0 20px 0; }
  12.     strong { color: red; }
  13.   </style>
  14.   <script src="./main.js"></script>
  15. </head>
  16. <body>
  17.   <div class="title">
  18.     <h2>标签的语义</h2>
  19.     <a href="#">更多&gt;&gt;</a>
  20.   </div>
  21.   <p>段落一内容，根据不同的内容应该选择合理的标签...<strong>根据浏览器的默认样式</strong>决定语义标签的样式</p>
  22.   <p>段落二内容，根据不同的内容应该选择合理的标签...<strong>根据浏览器的默认样式</strong>决定语义标签的样式</p>
  23. </body>
  24. </html>

OK，现在我们的代码既精简，语义又清晰。这里需要说明一下，当页面标签无法满足我们的要求时，才适当添加 div 和 span 等无语义来辅助实现。