HTML 标签语义

什么是HTML

HTML全称是HyperText Markup Language，翻译过来就是超文本标记语言。它定义了网页的内容和结构。

为何要使用语义化标签

• 可读性、可维护性

html有不少标签，每一个标签都有它的语义，好比 h1～h6 表示不一样重要程度的标题。虽然平时不少同窗用无语义的标签 div 、span 等也能实现相同的效果，可是可读性就差了不少。也许有同窗以为可读性没有变差啊，那是由于咱们当中不少人平时就没有使用语义标签的习惯，全都是 div。

因为 html 是标记语言，是声明式写法，不具备可编程性，逻辑表达能力不强。html 标签就像其余可编程语言例如：Java 、C 、Javascript 等的变量，若是一位程序员随意给变量命名，代码的可读性会很是差，后期维护成本也会很是高。

• SEO

因为绝大多数网站的域名难以记住，不少人上网都是经过门户网站上网。可是，搜索引擎出来之后，使用搜索引擎上网愈来愈成为一种趋势。搜索引擎能够根据你输入的关键字，直接搜出相关网站和内容，免去人工一个一个去查找。

但是搜索引擎是如何知道网站是咱们要找的内容呢，搜索引擎派出爬虫会时时刻刻的去访问网络上的各类网站，当它获取到一个个网站的 html 文档，会根据文档头部内容里面的 meta 数据判断出网站类型以及内容，并保存到数据库。（恶意诱导爬虫另当别论）

seo 重要吗？固然很是的重要。seo 能给网站带来流量，流量就像网站的血液通常，没有访问量，网站就等于不存在。seo 如今已经成为了互联网的一个垂直行业。作得好的，年入百万不是梦。可是，seo运营并仅仅包含这些。

• 可访问性

一个好的网站应该尽量让更多的人无障碍浏览。例如盲人借助屏幕阅读器，也能够上网购物。若是网站的购物车按钮是用 div 写的，那么屏幕阅读器识别起来会很是的困难。咱们为何要让盲人也能够上网呢，这是一个很是有意思的问题。由于咱们天天要花许多的时间用手机或其余设备浏览网页，万一之后眼瞎了，咱们之后还能够冲浪啊。（不只如此，这个世界上还有盲人游戏、盲人程序员）

常见HTML标签语义

关于 html 标签语义的讨论和文章，已经数不胜数，也有不少网站开发人员想不遗余力去遵照，但是一旦到了开发的时候，就想不起该用什么标签了。因而，就开始挠头皮，时间久了，就秃了。

下面列举一些标签的用法：

article: 翻译过来就是文章的意思，其内容应当是一篇独立完整的文章。能够是杂志、报纸、技术或学术文章、论文或报告、博客或其余社交媒体文章。article 能够嵌套，可是其内容必须是相关的。每一个 article 都应该有一个标题（h1～h6）。

section: 段落。好比一篇文章（article）的片断。每一个段落应该有一个标题（h1～h6），当section 做为 arcticle 的子元素时，标题字号不要大于文章的标题（不然看起来很怪异）。也不建议对 section 使用样式或者做为脚本切入点（大体意思，就是不要用js操做它），应该使用 div 来替代它干这些事。它和 p 标签有区别。咱们平时写文章换行、起头空两个字，这个表示一个段落，能够用p 表示。而 section 能够是一个或多个 p 段落。这几个段落表达的意思相近或者构成一个完整的意思。相似于中小学语文课，老师让学生分段同样。

nav: 导航块。好比包含跳转到其余页面或者本页面的连接。nav 的内容能够是列表也能够不是。例如：

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

<nav>
    <h1></h1>
    <p>
        <a href="#">...</a>
    </p>
</nav>

不过，在网站的底部通常都有不少连接，例如地址、联系方式等。这个时候通常不必用 nav。

aside: 与当前位置段落相关的独立内容。例如相关文字、段落、广告、导航

h1 ～ h6: 重要程度不一的标题。

header、footer: body、article、 aside、 nav、 section均可以有一个头部或者脚部。header 一般用来包裹顶部的搜索框、目录、logo等，也能够包裹标题 h1 ～ h6，但不是必须的。

figure、figure-caption: 两个结合使用，可用于注释插图、图表、照片、代码列表等。例如：

<figure id="l4">
  <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
  <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence&lt;byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>

div: 没有任何语义。能够用来包裹一系列相关的子节点，以及将相关内容定位布局。

ol、ul、dl: 前面两个使用更为日常，分别是有序列表和无序列表。dl 有点像二维的无序列表。例如：

<dl>
  <dt>得分A</dt>
  <dd>赵xx</dd>
  <dd>钱xx</dd>
  <dd>孙xx</dd>
  <dd>李xx</dd>
  <dt>得分B</dt>
  <dd>周xx</dd>
  <dd>吴xx</dd>
  <dd>郑xx</dd>
  <dd>王xx</dd>
</dl>

blockquote、q: 都是引用的意思。一篇文章里面引用了另外一篇的内容。若是须要展现引用的地址或者相关信息，能够配合使用 cite 标签。不一样的地方是，blockquote 将包含 cite 标签在底部；q 引用内容更短小一些，像短语或者词语，且 cite 会做为其兄弟节点出如今它前面。虽然 q 的表现与双引号同样。可是，却有不一样的使用场景。例如：说过的话，能够用引号包裹强调，可能不适合 q。

s、del: 二者默认外观差很少，都有中贯线。可是， s 表示没那么重要了，而 del 意味着已经废除。

strong、em: 二者都有增强的意思。strong 着重强调相关内容，而 em 强调的是语气，像英语口语中的重音。

i: 外来或者专有名词，或交替出现的心情或者声音等情景。前半句比较好理解，后半句比较难理解。先看一个例子：

<p>雷曼开始睡觉了.</p>
<p><i>这艘船周二离港的</i>, 他梦见. <i>船上有许多人, 其中有一个叫凯莉的公主. 他看着凯莉，日复一日，但愿她可以注意到他，但是，她历来都没有.</i></p>
<p><I>终于，有一天晚上，雷曼鼓足了勇气对她说——</i></p>
<p>这时，一段火警发出的报警声把雷曼吵醒了.</p>

上面的例子，雷曼睡觉和醒来是现实的描写，而梦境是虚拟的，是另外一种场景，都用 i 扩起来了。有时候 i 能够被其余标签替代，咱们能够 em 表示语气的不一样，用 dfn 包裹那些外来或者特殊意义的名词。

b: 强调，引发注意，但不必定是重要的，对此，无须作出任何解释。好比，搜索高亮、一段文字的开头。下面是一个反例：

<p><b>注意!</b> 不要在巴比纳吐口水!</p>

这里更适合用 strong。

u: 很难辨认（发音）、拼写错误或者中国名字。

time: 与时间相关的内容，例如时间、时区等。

code: 代码片断。

var: 数学或者编程及其余地方用到的变量。例如：

<p> <var>x</var>的值是5</p>

samp: 表示一个例子或者对计算结果输出的引用。

span: 与 div 同样，也是没有任何的语义的。能够用来包裹行内元素或者文本，进行样式改造。

未完......