语义化 HTML

前言

HTML5 新增了不少功能性标签如 video、audio 等多媒体标签，canvas、svg 图像标签，新的表单类型和属性，以及很是多的语义标签。

然而在的平常开发中除了用一些如 footer、header 等 h5 语义化标签外，其余的基本都是 div + span 一梭子所有搞定。快速还原设计稿，并不会感受有什么不妥。由于在 HTML 语义上面花费太多时间并不会有一个很明显的收益，还可能会被领导误认为在摸鱼。因此语义化的 HTML 在紧张的开发迭代中就这么被忽略了。

可是看了 winter 对于语义化 HTML 的讲解以后，才忽然认识到这些年写的 HTML 就是在瞎 ** 写，虽然实现了布局结构可是意义彻底是变了味道的。

语义化 HTML 的意义

• 语义类标签对开发者更为友好，使用语义类标签加强了可读性，即使是在没有 CSS 的时候，开发者也可以清晰地看出网页的结构，也更为便于团队的开发和维护。
• 除了对人类友好以外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可让搜索引擎爬虫更好地获取到更多有效信息，有效提高网页的搜索量，而且语义类还能够支持读屏软件，根据文章能够自动生成目录等等。

正文

ruby

ruby 元素被用来展现东亚文字注音或字符注释。

龙行 龘dá 龘dá

明日 Ashita

以前在遇到这种布局的时候通常都是使用定位达到显示效果，可是 ruby 元素才是该场景的最优解。

em

em 标签告诉浏览器把其中的文本表示为强调的内容。对于全部浏览器来讲，这意味着要把这段文字用斜体来显示。

em 是英文 emphasize 的缩写，意思为强调。

我今天吃了一个苹果

我今天吃了一个苹果

上面两句话，第一句强调的是苹果第二句强调的是今天。因此若是有须要强调某个词语的时候就应该使用 em 标签，若是仅仅是为了斜体显示则使用 i 标签。

strong

strong 标签和 em 标签同样，用于强调文本，但它强调的程度更强一些。

若是常识告诉咱们应该较少使用 em 标签的话，那么 strong 标签出现的次数应该更少。若是说用 em 标签修饰的文本好像是在大声呼喊，那么用 strong 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话老是一言既出;驷马难追，与此相同，限制 strong 的使用能够令应该更加引人注意，并且更加有效。

aside

aside 元素表示一个和其他页面内容几乎无关的部分，被认为是独立于该内容的一部分而且能够被单独的拆分出来而不会使总体受影响。其一般表现为侧边栏或者标注框（call-out boxes）。

• 被包含在 article 元素中做为主要内容的附属信息部分，其中的内容能够是与当前文章有关的相关资料、名次解释，等等。
• 在 article 元素以外使用做为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可使友情连接，博客中的其它文章列表、广告单元等。

hgroup

hgroup 标签用于对网页或区段（section）的标题进行组合。

h1-h6 是最基本的标题，它们表示了文章中不一样层级的标题。有些时候，咱们会有副标题，为了不副标题产生额外的一个层级，咱们使用 hgroup 标签。

section

section 元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，通常来讲会有包含一个标题。

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
复制代码

section 的嵌套会使得其中的 h1-h6 降低一级

article

article 是使用来定义独立于文档且有意义的来自外部的内容，好比：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。

article 是一种特别的结构，它表示具备必定独立性质的文章。因此，article 和 body 具备类似的结构，同时，一个 HTML 页面中，可能有多个 article 存在。 除了内容主题之外，一个 article 元素一般会有本身的标题及脚注。

header

如其名，一般出如今前部，表示导航或者介绍性的内容。

footer

一般出如今尾部，包含一些做者信息、相关连接、版权信息等。

hr

hr 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）

在还原设计稿的时候一般会遇到很长的横线，有不少方法都能实现这个横线，border、hr、伪类、高度元素等，因此在不一样的场景使用不一样的实现方法。

blockquote

blockquote 元素（或者 HTML 块级引用元素），表明其中的文字是引用内容。一般在渲染时，这部分的内容会有必定的缩进（注 中说明了如何更改）。若引文来源于网络，则能够将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，能够经过 元素。

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
复制代码

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

time

time 标签用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。

<p>The concert starts at <time>20:00</time>.</p>

<p>This article was created on <time pubdate>2011-01-28</time>.</p>

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
复制代码

figure

用于表示与主文章相关的图片，代码、表格等流内容。

dfn

dfn 标签是用来包裹被定义的名词。

<p><dfn>硬核</dfn>做为网络流行语的该词，本来的含义为形容摇滚乐的分支之一硬核，好比硬核朋克，是更具备力量感的音乐形式，热情奔放猛烈强劲。但不知什么时候被做为网络语而流行了起来，甚至有了调侃的意思。</p>
复制代码

pre

pre 元素表示预约义格式文本。在该元素中的文本一般按照原文件中的编排，以等宽字体的形式展示出来，文本中的空白符（好比空格和换行符）都会显示出来。(紧跟在 pre 开始标签后的换行符也会被省略)

<pre>
    html
  js     css      
</pre>
复制代码

    html
  js     css      

samp

samp 元素用于标识计算机程序输出

<pre>
    <samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
    </samp>
</pre>
复制代码

GET /home.html HTTP/1.1
Host: www.example.org

code

code 元素呈现一段计算机代码。

<code>
    const a = 123
</code>
复制代码

const a = 123

kbd

kbd 标签常常用在于计算机相关的文档和手册中，定义键盘文本。

键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单
复制代码

键入 quit 来退出程序，或者键入 menu 来返回主菜单

var

var 元素表示数学表达式或编程上下文中的变量。

<p> 一个简单的方程：<var>x</var> = <var>y</var> + 2 </p>
复制代码

一个简单的方程：x = y + 2

small

small元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被从新定义为表示边注释和附属细则，包括版权和法律文本。

s

s 元素 使用删除线来渲染文本。使用 s 元素来表示再也不相关，或者再也不准确的事情。

常常用于电商领域表示打折前的价格。

del

del 定义文档中已被删除的文本。

页面效果跟 s 同样，意义不一样。

ins

ins 标签订义已经被插入文档中的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
复制代码

My favorite color is blue red!

i

i 用于表现因某些缘由须要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容一般以斜体显示。

b

一般做为关键字使用。

u

u 元素使文本在其内容的基线下的一行呈现下划线。文本标记为中文文本中的专有名称，或 将文本标记为拼写错误。

参考

• HTML语义：div和span不是够用了吗？