HTML语义化标签探析

什么是HTML语义化

HTML语义化就是根据具体内容，选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。

为何要语义化

1. 有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的，所以语义化标签能使爬虫抓取更多的有效信息。

2. CSS文件读取失败的准备：万一CSS文件挂了，语义化的HTML也能呈现较好的内容结构与代码结构。

3. 方便其它设备的解析(如屏幕阅读器、盲人阅读器、移动设备)。

4. 便于团队开发和维护。

具体的语义化标签探析

本文主要是为了探析部分HTML标签在语义化中的差异。同时也探索HTML5新加入的语义化标签。

1. ul/ol(列表标签)

ul和ol虽然都是列表项，可是具体使用时，差异仍是很大的。

A. ul(无序列表)

说明: ul的英文全称为unordered list，翻译成中文就是无序列表。表示列表中的项目。是没有前后顺序的。网页中大部分列表均为无序列表。

<ul>
  <li>Lxxyx的博客</li>
  <li>Lxxyx的评论</li>
  <li>联系Lxxyx</li>
</ul>
<!-- 列表中的三个项目，均没有先后顺序的分别。 -->

B. ol(有序列表)

说明: ol的英文全称为ordered list，表示列表中的项目。是有前后顺序的。这一点是ol和ul的本质区别。

<ol>
  <li>1. Lxxyx的第一篇文章</li>
  <li>2. Lxxyx的第二篇文章</li>
  <li>3. Lxxyx的第三篇文章</li>
</ol>
<!-- 列表中的三个项目，有先后顺序的分别。 -->

2. dl,dt,dd(定义列表)

说明: dl,dt,dd是自定义列表，可是使用上又与前面的ul/ol有所不一样。自定义列表不单单是一列项目，而是项目及其注释的组合。

1. dl: 英文意思为definition list，做用是定义列表。

2. dt: 英文意思为defines terms，做用是定义列表中的项目。

3. dd: 英文意思为defines description，做用是定义列表中项目的注释。

举例:

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

效果图:

C. b/strong , i/em(强调标签)

说明: 在HTML中，b和strong都是加粗，i和em都是斜体。可是从HTML4到HTML5中，又发生了转变。因此有必要写下来。

1. b/strong(加粗)

说明:虽然b和strong的展现效果同样，都是将字体加粗表示。可是b在HTML5中又发生了变化。

1. b标签(bold):

HTML4的定义:

The <b> tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思为b标签仅仅表示加粗，不带有任何强调的意味。(只是为了排版或者好看)
<hr/>

HTML5的定义:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思为表示“文体突出”文字，通俗讲就是突出不安分的文字。像概要中的关键字，产品名。或者表明强调的排版方式

2.strong标签(全称是stronger emphasis):

<strong> represents a span of text with strong importance.a <strong> tag within another <strong> tag has even more importance.

// 意思为strong 标签是语气加剧，更为重要的强调，若是两个strong标签嵌套还表示极度重要。strong的重要程度是要大于em标签的

总结：b仅仅只是加粗，并无任何语义。可是strong标签则有语气加剧的强调的意思。

2. i/em(斜体)

说明:就像b和strong的关系同样。i和em的对应关系也很容易理解。

1. i标签(全称是italic):

HTML4的定义:

The <i> tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思为i标签仅仅只是将字体显示为斜体，无任何语义化意思
<hr/>

HTML5的定义:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思为i元素如今表现为在文章中突出不一样意见或语气或的一段文本,例如外语，科技术语、或者是排版用的斜体文字

1. em(全称是emphasis):

The <em> represents a span of text with emphatic stress.

// 意思是说em有强调的意思

总结:i仅仅只是斜体显示，并无任何语义。可是em标签则有增强的语义在内。

3.em/strong(强调标签)

说明:在上面的介绍中，已经介绍了em和strong，个中差异，看英文既能分辨。
em的全称是:emphasis,意思为强调。
strong的全称是:stronger emphasis，意思就是语气更强的强调。
总结:em和strong标签均带有强调的语义，可是strong标签所表现的强调语气要大于em的。

总结与参考连接

这一部分，查阅的文档和资料太多了，看完了html4发现html5又更改了意思，只能跑去w3c去看规范。
总结:i和b在Html5中被赋予语义，不一样于html4。em和strong的差异在于强调的程度。

参考连接：

Using <b> and <i> elements
HTML5: The Semantic Difference Between Bold and Strong

总结

暂时总结的就这么多了,重点在于b/strong , i/em几个标签的区别。也是目前前端学习中的盲点。
前两天看到一句话：

"不少人很是努力的学习JavaScript，认为学好了JavaScript就是一切。可是忽略了JavaScript实际上是一门'胶水语言'的本质，它是用来粘合HTML和CSS的。"

看到这句话后，决定在寒假认真学习HTML与CSS。这些东西，虽然说简单，但写好也很难。好比说最近学习的Sass，PS切图等。不管哪一个，都属于技术盲点。

由于经验尚浅，因此若是有出错的地方，但愿各位能帮忙指正。
最后附上本人博客地址和原文连接，但愿能与各位多多交流。

Lxxyx的前端乐园
原文连接：寒假前端学习(2)——HTML语义化标签探析