在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. 易用BPM时代，企业如何轻松驾驭H3？

    众所周知,BPM作为企业发展的推动力,能敏捷高效的融合业务流程和信息资源.通过综合考虑流程的成本.效率.质量等方面因素,用IT系统将调整后的流程固化下来,从而降低企业管理成本,提高内部运营效率,提升企 ...

  2. 【转】ofbiz数据库表结构设计

    真心不错的文章,可以加深对企业信息化的设计理解:) http://blog.sina.com.cn/s/blog_a2ca5d8c01017fa0.html http://blog.sina.com. ...

  3. 【Java并发编程实战】-----“J.U.C”：ReentrantReadWriteLock

    ReentrantLock实现了标准的互斥操作,也就是说在某一时刻只有有一个线程持有锁.ReentrantLock采用这种独占的保守锁直接,在一定程度上减低了吞吐量.在这种情况下任何的"读/ ...

  4. CSharpGL(27)讲讲清楚OpenGL坐标变换

    CSharpGL(27)讲讲清楚OpenGL坐标变换 在理解OpenGL的坐标变换问题的路上,有好几个难点和易错点.且OpenGL秉持着程序难以调试.难点互相纠缠的特色,更让人迷惑.本文依序整理出关于 ...

  5. .NetCore之EF跳过的坑

    我在网上看到很多.netCore的信息,就动手自己写一个例子测试哈,但是想不到其中这么多坑: 1.首先.netCore和EF的安装就不用多说了,网上有很多的讲解可以跟着一步一步的下载和安装,但是需要注 ...

  6. 解析大型.NET ERP系统 数据审计功能

    数据审计,英语表达是Audit,是追踪数据变化的过程,记录数据变化前后的值,供参考分析.通过设置,ERP可以追踪一个表的所有字段的变化,也可以只记录指定的字段的值变化.欧美企业每年都有独立的审计部门, ...

  7. Enterprise Solution 进销存管理软件 C/S架构，支持64位系统 物流，资金流，信息流全面集成

          定位  Target Customers 中小型生产制造企业,批发零售类,贸易企业 主要模块 Modules 采购.销售.库存.财务账款四大模块,包含企业运作过程中销售.采购.库存各岗位需 ...

  8. 【Win10应用开发】签名与验证

    对数据进行签名和验证,是为了防止数据被“盗版”.比较常规的做法是通过公钥进行验证. 算法上多用SAH_xxxx,就是哈希算法.由于MD5后来被发现存在“非唯一性”,你会发现现在很多一些下载的文件验证都 ...

  9. 【转】c#、wpf 字符串，color，brush之间的转换

    转自:http://www.cnblogs.com/wj-love/archive/2012/09/14/2685281.html 1,将#3C3C3C 赋给background this.selec ...

  10. 已经重写，源码和文章请跳转http://www.cnblogs.com/ymnets/p/5621706.html

    文章由于写得比较仓促 已经重写,源码和文章请跳转 http://www.cnblogs.com/ymnets/p/5621706.html 系列目录 前言: 导入导出实在多例子,很多成熟的组建都分装了 ...