HTML5语义化

什么是语义化?

语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

为什么要关注语义化

通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：

1. 可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
2. 可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
3. 国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
4. 互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护；

被滥用的语义化标签

以下是一些广泛被滥用的语义化标签：

• blockquote：一些人通过使用<blockquote>标签使文本达到缩进的目的，因为引用默认会进行文本缩进。如果你仅仅是想使文本达到缩进目的，而文本自身并非引用，那么就用CSS margin来代替；
• p：一些开发者用<p> </p>来为标签自检增加额外的空白段落，这里应该使用CSS margin/padding来实现；
• ul：一些开发者往<ul>中添加文本来达到文本缩进的目的，这种做法即不符合语义化要求，同样也是非法的HTML实践。<ul>标签中只能有<li>标签。
• <h1>~<h6>：该标签可以使文本字体变大，变粗，但如果文本并非是标题，应该使用CSS font-weight font-size；
  总结：其实上面四个例子都是为了说明一点，用正确的标签做正确的事

语义化标签介绍

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

一个没有用div标签布局的页面

如上图，这个页面结构中摒弃了所有div元素，取而代之的是HTML5语义化标签（用哪些标签取决于你的设计目的）。

同样，W3C制定了这些语义化标签，不可能完全符合我们的设计目标。我们的目标是为了能够让开发者或是爬虫读懂各个模块的语义化内容，因此，div作为一个没有任何语义，仅仅是用来构建结构的元素，是最适合做容器的标签。

HTML5语义化标签：

<header>

定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；

<nav>

定义文章导航栏，链接等;
nav一般和ul、li配合做导航栏；

<main>

定义文章的主要内容
main标签在一份文档中是唯一的，其后代元素常常包括<article>；

<article>

定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

<section>

与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

<aside>

侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

<footer>

页脚，通常包含作者、版权信息或者相关链接等；

极易混淆的语义化标签

下面这两组元素，虽然样式上极其相似，但是其在语义上各有侧重，弄明白他们的区别，可以帮你摸清HTML5语义化的思路...

<i>

• 表示一段普通文本中，因为某种原因和正常文本不同，例如专业术语、外语短语或排版用的文字，其通常表现为斜体，他的出现不会改变语义；
• 根据W3C对i标签的定义：

Terms in languages different from the main text should be annotated with [lang] attributes in the XML namespace).

一段文本中如果有插入语言不同的专业术语，需要在<i>标签中加上<lang>属性作为注解，例子如下：

 <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

<i lang="fr">是对je ne sais quoi（习语，表达妙不可言的意思）的注解，表示包含的术语语种为法语；

<em>

• 表达对文本内容的强调；
• 其强调位置的不同往往带来语义的变化（可以理解为英语口语中针对一句话中不同位置的重度，影响听话人的理解）；
• 在视觉效果上也是斜体的效果；

注意：

The [em] element also isn’t intended to convey importance; for that purpose, the [strong] element is more appropriate.

• <em>不适用于需要传达重要性的内容，传达重要性的语义应该使用<strong>；

The [em] element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the [i] element is more appropriate.

• <em>标签本质上并不是让包含文本变为斜体字。有时，作者只是想让部分文本在段落/句子中脱颖而出，或是在不同语气或者语态上，这时要用<i>；

<b>

• b表示样式上的粗体；
• 其包含文本，不具备强调重要性的作用，也不影响语态和语气，仅仅是从样式上让包含文本特殊化;
• 常用语关键字，文本驱动软件中的可执行语句或者一篇文章的导语，说明书中的产品/功能名称等；

<strong>

• strong表示强调带有着重意味，意在传达内容的重要性（需要尽快被看到）、严重性或者紧急性，；

总结：

1. <em>适用于在一段文本中突出重点，强调位置的不同往往会影响语义，而如果仅仅在语态或者语气上为了突出某个文本，应该使用<i>；
2. 在使用 <i>时，W3C鼓励开发者最好检查下是否有更合适的标签可替代，例如，上述的<em>，来突出重点，或是<dfn>，用来定义一个术语；
3. 如果为了突出文本的重要性，紧急性，严重性应该使用<strong>；
4. W3C明确说明，<b> 元素应当是在其他标签都不合适的情况下最后一个考虑使用的标签，言外之意，官方并不推荐使用b标签，

<figure>

文档中的一些嵌入式内容，比如引用的图片，插图，表格，代码段等，可以作为独立的单元，当这部分转移到附录中或者其他页面时不会影响到主体，这样的元素都可以放在<figure>元素内，而且可以搭配其子元素<figcaption>作很好的元素说明或者备注信息;

<img>

img元素最好附带alt信息，即对图片进行文本说明，当图像无法查看时会显示这段文本描述;

<table>

table元素现在有一系列语义化结构标签

• <caption>
  表格的标题，跳脱于表格之外;

• <thead>
  thead表格的表头行，定义表格的表头内容;

• <tbody>
  表格的主体部分，表格的主体部分;

• <tfoot>
  表格的脚注部分，tfoot要和thead，tbody结合起来使用;

<form>

<label>标签的用法：label标签，为input元素定义标注，改进了表单控件的可用性，当你点击到label标签时，会自动聚焦到对应控件上，label标签一般有两种用法

1. label的for属性与控件的id相对应，比如：

  - <label for="username">请输入用户名: </label> 
   - <input type="text" id="username" name="username">

2. label中内嵌控件，比如:

<label>请输入用户名<input type="text" id="username"    name="username"></label>

此外，

placeholder属性，其值会在输入字段为空时显示，并会在字段获得焦点时消失；
表单中的单选radio控件和复选checkbox控件以及下拉框select控件，可以为radio, checkbox添加checked属性以及为option添加selected属性让其默认选中