HTML5学习之语义化标签（一）

1、为何HTML5要引入新语义标签

在HTML5出现以前，咱们通常采用DIV+CSS布局咱们的页面。可是这样的布局方式不只使咱们的文档结构不够清晰，并且不利于搜索引擎爬虫对咱们页面的爬取。为了解决上述缺点，HTML5新增了不少新的语义化标签。

2、引入语义化标签的优势

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

• 比<div>标签有更加丰富的含义，方便开发与维护

• 搜索引擎能更方便的识别页面的每一个部分

• 方便其余设备解析（如移动设备、盲人阅读器等）

3、标签详解

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

（一） header

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

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

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

<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>标签的导航栏应用案例：

<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>元素。一般状况下，一个<article>元素包括标题、正文和脚注。和<nav>标签同样，该标签一样不能用在<address>标签中；

示例以下：

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

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

示例以下：

<article>
   <h1>HTML5学习之语义化标签</h1>
   <p>....正文.....</p>
   <article>
       <header>
           <h2>读者评论</h2>
       </header>
       <article>
           <header>
               <h3>评论人：张三</h3>
               <p>评论时间：<time datetime="2017-01-17">2017-2-15 11:45:23</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>Node.Js<h2>
        <p>Node.js就是运行在服务端的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>。

最后，欢迎IT专业学生及编程爱好者加入QQ交流群：154658901领取学习资料，一块儿学习，共同进步。