在HTML5之前采用HTML+CSS文档结构写法

【ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）】

【class选择器说明 class类选择器——可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目】

Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.It contains a header, footer, and horizontal navigation bar below the header.

The main content contains an article and sidebar on the right.

（翻译：上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉，页脚，横向的导航栏.主要内容包含一篇文章和右边的侧边栏 ）

缺点 1.不利于SEO搜索引擎对页面内容的抓取

2.文档结构定义不明确

于是HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签

 The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

（翻译:div元素被替换成新的元素：header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚.）

HTML5结构代码

<body>

  <header>...</header>

  <nav>...</nav>

  <article>

     <section>

       ...

    </section>

  </article>

  <aside>...</aside>

  <footer>...</footer>

</body>

对HTML5语义化标签解释

<main> 定义主要内容

<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等

<header>

 <hgroup>

    <h1>页眉主标题</h1>

    <h1>页眉副标题</h1>

 </hgroup>

</header>

<nav> 定义主体模块或者导航链接的集合

<nav>

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Contact</a></li>

  </ul>

</nav>

<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

<article>

   <header>

       <hgroup>

             <h1>这是一篇介绍HTML 5结构标签的文章</h1>

             <h2>HTML 5的革新</h2>

      </hgroup>

      <time datetime="2011-03-20">2011.03.20</time>

   </header>

   <p>文章内容详情</p>

</article>

<aside>与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。

<aside id="sidebar">

	<section class="widget">

		<h4 class="widgettitle">Sidebar</h4>

		<ul>

		  <li><a href="#">WordPress</a> (3)</li>

		  <li><a href="#">Design</a> (23)</li>

		  <li><a href="#">Design </a>(18)</li>

		</ul>

	</section>

</aside>

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。

一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>

<section>

  <h1>这里是section标题...</h1>

  <p>这里是section标题对于内内容...</p>

</section>

<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。

<!-- Just a figure -->

<figure>

  <img src="figure.png" alt="figure.png图片按" title="figure图片">

</figure>

<p>段落</p>

<!-- Figure with figcaption -->

<figure>

   <img src="figure.png" alt="figure.png图片按" title="figure图片">picture">

   <figcaption>figure图片描述</figcaption>

</figure>

<p>段落.....</p>

<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）

<footer>

  原创作者;版权信息;联系方式;文档相关链接等...

</footer>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）

<hgroup>

  <h1>Main title</h1>

  <h2>Secondary title</h2>

</hgroup>

【参考资料】

http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/

https://samdutton.wordpress.com/2015/04/02/high-performance-html/

https://developer.mozilla.org/CN/docs/Web/HTML/Element

http://www.cnblogs.com/houodeit/archive/2012/05/27/2519798.html

http://alistapart.com/article/previewofhtml5

https://dev.w3.org/html5/html-author/#syntactic-overview HTML5 API

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6182406.html

关于作者：专注于WEB前端开发

本文版权归作者所有,转载请标明原文链接。

HTML5的新语义化的标签的更多相关文章

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

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  2. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. Html块标签、含样式的标签、语义化的标签：

    Html块标签: (1)<div>标签 块元素,表示一块内容,没有具体的语义 (2)<span>标签 行内元素,表示一行中的一小段内容,没有具体的语义 <p>标签 ...

  4. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. Html5新增的语义化标签（部分）

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  6. 让低版本IE支持Html5的新语义标签

    HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...

  7. html5中新增的语义化的标签

    html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络 ...

  8. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  9. HTML5-新增语义化结构标签

    总结目录结构: 1.简洁的DOCTYPE声明 2.新的布局结构标签 header,article,section,aside,footer 3.新的其它常用标签: nav,hgroup,figure, ...

随机推荐

  1. 【干货分享】流程DEMO-补打卡

    流程名: 补打卡申请 业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请. 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单:  流程: 图片 ...

  2. 【SAP业务模式】之ICS（六）：发票输出类型

    这篇开始主要讲述发票输出类型: 首先我们新建一个发票类型,用于公司间的发票MIV,而标准的发票类型还是F2保持不变: 一.新建发票类型: 目录:SPRO-销售与分销-出具发票-开票凭证-定义出具发票类 ...

  3. 打破陈规抓痛点，H3 BPM10.0挑战不可能

    高效益意味着相似的运营活动比竞争对手做得更好,而战略定位则意味着企业在运营活动中有区别于竞争对手的实施方式,即差异化竞争.在新经济体下,面对社会的变革.市场的竞争环境.不断攀升的成本压力,几乎没有企业 ...

  4. (整理)MyBatis入门教程（一）

    本文转载: http://www.cnblogs.com/hellokitty1/p/5216025.html#3591383 本人文笔不行,根据上面博客内容引导,自己整理了一些东西 首先给大家推荐几 ...

  5. linux常用命令(3)mkdir命令

    mkdir命令1 命令格式:mkdir [选项]目录名2 命令功能:通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录.要创建文件夹或目录的用户必须对所创 ...

  6. a标签绝对定位，点击区域被图片遮挡（IE下）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用MonoTouch.Dialog简化iOS界面开发

    MonoTouch.Dialog简称MT.D,是Xamarin.iOS的一个RAD工具包.它提供易于使用的声明式API,不需要使用导航控制器.表格等ViewController来定义复杂的应用程序UI ...

  8. C#移动跨平台开发（1）环境准备

    C#依托于mono平台可以实现Unix平台服务器端开发已经不是什么新鲜事了,而Xarmain公司(初始成员大多来自原Mono.MonoTouch.Mono For Android成员)继续将C#的先进 ...

  9. 使用Hystrix提高系统可用性

    今天稍微复杂点的互联网应用,服务端基本都是分布式的,大量的服务支撑起整个系统,服务之间也难免有大量的依赖关系,依赖都是通过网络连接起来. (图片来源:https://github.com/Netfli ...

  10. MongoDB Java Driver操作指南

    MongoDB为Java提供了非常丰富的API操作,相比关系型数据库,这种NoSQL本身的数据也有点面向对象的意思,所以对于Java来说,Mongo的数据结构更加友好. MongoDB在今年做了一次重 ...