语义类标签

# 语义类标签

# 语义类标签的利弊

优势
- 增强了可读性，易修改，易维护。
- 无障碍阅读（机器阅读）支持。
- 更适合搜索引擎检索（SEO）等等。
缺点
- 不恰当地使用语义标签，反而会造成负面作用。（例如给所有并列关系都用 ul，会造成大量冗余标签）

原则：用对比不用好，不用比用错好。

# 几种比较重要的语义标签

# 用于消除歧义的标签（em）

有时候，HTML 的有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。

例如今天我吃了一个苹果。，当把这句话放到不同上下文中，可能表达的意思完全不一样。

昨天我吃了一个香蕉。今天我吃了一个苹果。
昨天我吃了两个苹果。今天我吃了一个苹果。

当没有上下文时，如何消除歧义呢？这就要用到 em 标签了。em 表示重音：

今天我吃了一个<em>苹果</em>。
今天我吃了<em>一个</em>苹果。

1
2

# 用于强调重要内容的标签（strong）

网上一些文章常常会拿 em 和 strong 做对比，实际上，我们只要理解了 em 的真正意思，它和 strong 可谓天差地别，并没有任何混淆的可能。

从上下文来看，如果我们觉得某个词很重要，那就可以使用 strong 标签。

从样式上，strong 标签表现为加粗样式；em 表现为倾斜样式。

# 作为整体结构的语义类标签

h1-h6：最基本的标题，它们表示了文章中不同层级的标题。
header：如其名，通常出现在前部，表示导航或者介绍性的内容。
footer：通常出现在尾部，包含一些作者信息、相关链接、版权信息等。
aside：表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。
main：整个页面只出现一个，表示页面的主要内容，可以理解为特殊的 div。
article：一种特别的结构，它表示具有一定独立性质的文章。所以，article 和 body 具有相似的结构。同时，一个 HTML 页面中，可能有多个 article 存在。
section：一个“有语义的 div”，它会改变 h1-h6 的语义，使得其中的 h1-h6 下降一级。

正确使用整体结构类的语义标签，可以让页面对机器更友好。比如一个典型的新闻专题页面，它的 body 类似这样：

<body>
  <!-- 顶部导航 -->
  <header>
    <nav>……</nav>
  </header>
  <!-- 侧边栏 -->
  <aside>
    <nav>……</nav>
  </aside>
  <!-- 新闻区 1 -->
  <article>
    <header>……</header>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>……</footer>
  </article>
  <!-- 新闻区 2 -->
  <article>……</article>
  <!-- 新闻区 3 -->
  <article>……</article>
  <!-- 尾部信息 -->
  <footer>
    <address>……</address>
  </footer>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

一些实践中的经验：

header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是标准中并没有明确规定。
aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。
aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。
footer 中包含 address，这是个非常容易被误用的标签。address 并非像 date 一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address 明确地只关联到 article 和 body。

# 其它一些语义标签

标签	说明
hr	表示故事走向的转变或者话题的转变。如果不是出于语义目的，那么显示一条横线更好的方式是通过 CSS 设置 border 来实现。
small	之前表示字体缩小的废弃标签，HTML5 救回来表示补充评论。
s	之前表示划线的废弃标签，HTML5 救回来表示错误的内容，经常用于电商领域表示打着前的价格。
i	之前表示斜体的废弃标签，HTML5 救回来表示读的时候变调。表现样式与 em 相同，但是一种无意义的斜体，该元素只在没有更适合的语义元素表示时使用。
b	之前表示黑体的废弃标签，HTML5 救回来表示关键字。如果不是出于语义目的，那么显示粗体更好的方式是通过 CSS 将 font-weight 属性设置为 "bold"。
u	之前表示下划线的废弃标签，HTML5 救回来表示避免歧义的注记。
data	与 time 标签类似，给机器阅读的内容，意义广泛，可以自由定义。
var	变量，多用于计算机和数学领域。
kbd	用户输入，表示键盘按键居多。
sub	下标，多用于化学/物理/数学领域。
sup	上标，多用于化学/物理/数学领域。
bdi, bdo	用于多语言混合时指定语言或者书写方向（左到右或者右到左）。
mark	表示高亮，这里并非指显示为高亮，而是从读者角度希望的高亮（注意与 strong 的区分）。
wbr	表示可以换行的位置，主要是英文等文字不允许单词中间换行，这个标签一般在把多个单词粘成很长的单词时候用。
menu	ul 的变体，用于功能菜单时使用。
dl, dd, dt	一般出现较为严肃的文章，对一些术语进行定义，dt 和 dd 其实并不总是成对出现，两者是多对多的关系。
abbr	表示缩写，比如 WWW 是 World Wide Web 的缩写，那就可以用： `<abbr title="World Wide Web">WWW</abbr>`。

# 更多资源

要想系统学习语义标签，可以看下 MDN 的 HTML 元素参考 (opens new window)，它里面会有标准的定义，告诉我们每种标签适用的场景。

如果是简单了解标签的写法，可以看下 W3school HTML标签 (opens new window)。

（完）

HTML 基本结构未完待续