HTML5学习之语义化标签

一、为什么HTML5要引入新语义标签

在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。

二、引入语义化标签的优点

引入语义化标签的好处主要有下列三点：

• 比<div>标签有更加丰富的含义，方便开发与维护
• 搜索引擎能更方便的识别页面的每个部分
• 方便其他设备解析（如移动设备、盲人阅读器等）

三、标签详解

所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍<article> <section> <nav> <aside>、<header> <footer>等HTML5新增的语义化区块标签。

（一） header

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

我们不但可以放置页面或者页面中某个区块的标题，还可以放置搜索表单、logo图片等元素，按照最新的W3C标准，我们还可以放置<nav>导航栏。

下面是一个使用该标签的网站头部实例：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**信息科技有限公司</h1>
</header>

需要注意的是，一个文档中可以包含一对或者一对以上的<header>标签。标签的位置是次要的，不一定非要显示在页面的上方，我们可以为任何需要的区块标签添加<header>元素，例如下面将要讲解的<article> <section>等标签。

（二）nav

表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。

<nav>不但可以作为页面独立的导航区域存在，我们还可以在<header>标签中使用。此外，<nav>标签还可以显示在侧边栏中。由此可见，一个页面之中可以有多个<nav>标签。

根据HTML5标准，<nav>标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在<nav>标签中,我们只要将主要的，基本的链接组放进<nav>即可,对于有辅助性的页脚链接则不推荐使用<nav>标签。

示例如下：

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**信息科技有限公司</h1>
    <nav>
        <li><a href="#">首页</a></li>
        <li><a href="example.html">客户案例</a></li>
        <li><a href="service_one.html">技术服务</a></li>
        <li><a href="aboutus_one.html">关于我们</a></li>
        <li><a href="connection.html">联系我们</a></li>
    </nav>
</header>

值得我们注意的是,HTML5规范不允许将<nav>标签嵌套在<address>标签中使用。

（三）aside

所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。

示例如下：

 <article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <aside>
        <h2>什么是语义化标签</h2>
        <p>语义化标签就是......</p>
    </aside>
</article>

（四）footer

一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

跟<header>标签一样，<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。

示例如下：

<footer>
    <small>
        版权所有 © 2016-2017 **信息科技有限公司
    </small>
</footer>

（五）article

表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

<article>标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下，一个<article>元素包括标题、正文和脚注。和<nav>标签一样，该标签同样不能用在<address>标签中；

示例如下：

<article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <footer>版权所有*伪版必究</footer>
</article>

<article>标签还可以嵌套使用，但是它们必须是部分与整体的关系。例如在一篇发表的博客中，我们可以对读者评论使用该标签。

示例如下：

<article>
    <h1>HTML5学习之语义化标签</h1>
    <p>....正文.....</p>
    <article>
        <header>
            <h2>读者评论</h2>
        </header>
        <article>
            <header>
                <h3>评论人：张三</h3>
                <p>评论时间：<time datetime="2017-02-15">2017-02-15 11:45:23</time></p>
            </header>
            <p>张三到此一游</p>
        </article>
        <article>
            <header>
                <h3>评论人：李四</h3>
                <p>评论时间：<time datetime="2017-02-09">2017-02-09 14:20:15</time></p>
            </header>
            <p>李四到此一游</p>
        </article>
     </article>
</article>

（六）section

是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段

<section>标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。

<section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。

示例如下：

<article>
    <h1>JavaScript框架</h1>
    <p>Javascript框架是指以Javascript语言为基础搭建的编程框架。</p>
    <section>
        <h2>angular.Js<h2>
        <p>angular.Js是一款优秀的前端JS框架</p>
    </section>
    <section>
        <h2>Vue.js<h2>
        <p>Vue.js是用于构建交互式的Web界面的库</p>
    </section>
    <section>
        <h2>jQuery<h2>
        <p>jQuery是一个快速、简洁的JavaScript框架。</p>
    </section>
</article>

在这篇关于JS框架的文章中,所列举的三个框架都是文章主题构成的一部分，所以我们使用<section>标签对其进行分段。

我们不但可以在<article>标签中使用<section>标签，还可以在<section>标签中使用<article>标签。

示例如下：

<section>
    <h1>HTML5技术栈</h1>
    <p>广义而言的HTML5包含HTML、CSS和JavaScript三个部分</p>
    <article>
        <h2>HTML<h2>
        <p>内容</p>
    </article>
    <article>
        <h2>CSS<h2>
        <p>样式</p>
    </article>
    <article>
        <h2>JavaScript<h2>
        <p>行为</p>
    </article>
</section>

在这个例子中，<section>标签代表一段内容，在这段内容中，HTML、CSS、Javascript是三个完全独立的部分，因而我们为这三个不同的部分分别使用<article>标签。

<div> <section> <article>三者的比较：

• <div>：应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签
• <section>：包含的内容是一个明确的主题，通常有标题区域
• <article>:如果我们的页面中需要一个单独的模块来实现一个单独的功能，就用<article>，其他的时候都用<section>。

四、文档级别语义

HTML5试图为每个元素加入一个特定的文档级别语义。

（一）ruby、rt、rp

ruby是一种排版注释系统，是位于横排基础文本上方的简短文字，主要针对东亚语言作出简单的读音注释。例如可以为中文或日文显示读音。

ruby涉及的元素包括ruby、rt以及rp。首先使用ruby指定一个具体的表达式，然后使用rt提供说明。rt部分将显示在表达式上方。

下面这个例子中，拼音将显示在文字的上方。

<ruby>
    北<rt>bei</rt>
    京<rt>jing</rt>
</ruby>

但是在不支持ruby的浏览器中需要使用rp对这两个区块进行视觉上的隔离。

<ruby>
    北
    <rp>
        <rt>bei</rt>
    </rp>
    京
    <rp>
        <rt>jing</rt>
    </rp>
</ruby>

（二）time

为了将现在的常用的日期和时间语句用规范的、利于机器识别的格式进行表述，time元素提供了一个可选的时间和时区组件。

为了确保机器能够正确识别，我们可以使用datetime属性，其属性值可以被定义为时间、日期或者这两者的复合体。

<time datetime="2017-07-03">

还可以使用pubdate为一个网页指定发布时间。

<time datetime="2017-07-03" pubdate>
<!--以下两种形式也可以行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">

注意：在 HTML5中，true或false并非有效的属性值，当解释器发现存在布尔属性时，它将直接解释为true。如果需要将属性设为false，将这个属性去掉即可。

（三）mark

mark元素用于高亮标记一段文字。

可以使用mark元素来标记出网页里被搜索的关键词或是用于高亮显示一段解释性的代码。

（四）wbr

wbr元素用于让浏览器为长单词增加可选择的破折号，以便自动拆行。

在相当长的单词中插入一对wbr元素，可以让浏览器根据排版的需要决定是否将单词换行。破折号是否出现，以及出现的位置完全由排版决定。wbr只是允许自动拆行，但非强制拆行。

（五）略微改变的元素

在HTML4版本中的标签元素在HTML5中有了新的定义。

使用b表示文档渲染为粗体，而i表示文档渲染为斜体。使用strong和em来强调一段重要的文本。cite用来为对参考文献的引用进行定义，比如书籍或杂志的标题。small不仅仅指的是小字体，它还同样为法律声明增添不具有重要性的旁注或小字。hr现在表达的是主体性的间断，不再仅仅是分割版面的一条水平线。