在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. C#事件-使用事件需要的步骤

    事件是C#中另一高级概念,使用方法和委托相关.奥运会参加百米的田径运动员听到枪声,比赛立即进行.其中枪声是事件,而运动员比赛就是这个事件发生后的动作.不参加该项比赛的人对枪声没有反应. 从程序员的角度 ...

  2. 基于Node.js实现一个小小的爬虫

    以前一直听说有爬虫这种东西,稍微看了看资料,貌似不是太复杂. 正好了解过node.js,那就基于它来个简单的爬虫. 1.本次爬虫目标: 从拉钩招聘网站中找出“前端开发”这一类岗位的信息,并作相应页面分 ...

  3. Java泛型的历史

    为什么Java泛型会有当前的缺陷? 之前的章节里已经说明了Java泛型擦除会导致的问题,C++和C#的泛型都是在运行时存在的,难道Java天然不支持“真正的泛型”吗? 事实上,在Java1.5在200 ...

  4. MyBatis2：config.xml文件

    前言 前一篇文章,讲了MyBatis入门,讲到了MyBatis有两个基本的配置文件,一个用来配置环境信息,一个用来写SQL语句.前者我把它命名为config.xml,config.xml的内容是: & ...

  5. 面向组合子设计Coder

    面向组合子 面向组合子(Combanitor-Oriented),是最近帮我打开新世界大门的一种pattern.缘起haskell,又见monad与ParseC,终于ajoo前辈的几篇文章. 自去年9 ...

  6. 小谈Scrum敏捷开发流程

    一晃眼,有两年没有写博客了,回顾前两年,各种奔波,各种忙碌,也有不少的收获.从今天开始,我要把这些收获都分享在这里. 其实这两年,对我影响最大的是开发流程.总所周知,一个好的开发流程,对于项目的进行, ...

  7. Entity Framework 6 Recipes 2nd Edition（13-10）译 -> 显式创建代理

    问题 你有一个POCO实体,原本在执行一个查询时动态创建代理,现在你不想EF延迟创建代理带来的代价. 解决方案 假设你有一个如图Figure13-15的模型 Figure 13-15. A model ...

  8. [转]： stm328种GPIO模式

    [原创]:这段时间开始研究stm32,今天撸着一段代码一直追,追到了GPIO口模式的枚举类型这里,遂去网上查看这8种模式到底是什么,网上一查,看到了一个答案被很多博主转载或者原创,那我也就不重复废话了 ...

  9. Rxjava Subjects

    上次提到调用observable的publish和connect方法后可以将一个Observable发出的对象实时传递到订阅在上的subscriber. 这个和Rxjava中Subject的概念十分相 ...

  10. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...