1.<section>

　　<section>元素用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个人信息，一个<section>用于联系信息，另一个用于新闻动态。需要重点理解的是用它不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用<div>。

2.<nav>

　　<nav>元素用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区域。因为<nav>用于主导航，所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的（虽然将它用在这些区块里包含链接也没问题）。

3.<article>

　　<article>元素与<section>元素很容易混淆。它是用来包裹独立的内容片段。当搭建一个页面时，想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义？另一个方法是，想想包裹<article>中的内容能否在RSS订阅源中独立成为一篇文章？应该使用<article>标签包裹的内容，最明显的例子就是博客正文。注意，如果出现嵌套的<article>元素，那内层的<article>元素内容应该和外层文章内容直接有关。

4.<aside>

　　<aside>元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边栏（当它包含合适的内容时）。另外，引文、广告以及导航元素（如友情链接等）也可以使用它。

5.<hgroup>

　　如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题，则可以考虑使用<hgroup>将他们包裹起来。这样在HTML5的大纲结构算法中就会隐藏次级标题元素，从而只让<hgroup>中的第一个标题元素进入文档大纲。

　　注：可以使用下面的HTML大纲生成器来测试生成网页的大纲结构：

　　（1）http://gsnedders.html5.org/outliner/

　　（2）http://hoyois.github.com/html5outliner/

6.<header>　

　　由于<header>元素不计入大钢结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中，<header>可用作网站头部的“刊头”区域，也可用作对其他内容如<article>元素的简要介绍。

7.<footer>

　　和<header>一样，<footer>元素也不计入大纲结构，所以也不能用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接，或者用它包含版本信息。和<header>一样，它也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以使用它，同时博客正文<article>元素内的文脚也可以使用它。不过规范指出，博文作者的联系信息应该使用<address>元素来包裹。

8.<address>

　　<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。为避免产生混淆，请记住<address>中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

HTML5的全新语义化元素的更多相关文章

  1. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

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

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

  3. HTML5学习之语义化标签

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

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

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

  5. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

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

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

  7. HTML5标签（语义化）

    HTML语义化是什么? HTML语义化是指根据内容的结构化,选择合适的标签.举个例子:之前所有的都用div, span等标签实现页面结构,而这些标签都没有实际的意义, 而新的HTML5标签<he ...

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

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

  9. HTML5 部分新增语义化标签元素

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

随机推荐

  1. mediastreamer使用教程

    mediastreamer使用教程 1.各个函数功能简介 ms_filter_destroy 释放filter资源 ms_ticker_destroy释放ticker 说明:ticker为定时器线程, ...

  2. rabbitmq 的心跳机制&应用

    官方文档说: If a consumer dies (its channel is closed, connection is closed, or TCP connection is lost) w ...

  3. Excel 相对引用与绝对引用

      相对引用与绝对引用 相对引用与绝对引用的区别在于,当将公式复制到其它单元格时,公式中单元格或单元格区域的地址是否有变化. 相对引用在复制公式时地址跟着发生变化,而绝对引用不会发生变化!绝对引用的方 ...

  4. go：interface{}、断言与类型转换

    interface{}可用于向函数传递任意类型的变量,但对于函数内部,该变量仍然为interface{}类型(空接口类型), 不清楚这点将可能导致错误.如以下代码: package main impo ...

  5. 第一天：安装nodejs

    1.首先,下载NodeJs程序.地址 http://www.nodejs.org/download/,选择Windows Installer 64bit 2.下载下来后,狂点下一步,安装在本地硬盘上. ...

  6. Lattice FPGA 板子 调试笔记

    最近在调试LATTICE  FPGA 做的视频板子,颇不顺利,所以记录下来作为以后的参考: 1.FPGA的IO口不是所有的都是双向的,有些有特殊作用的是单向的. 在查阅 LatticeECP3-17E ...

  7. 解决win7下PIL无法打开图片的问题

    找到PIL安装文件里的ImageShow.py 把第99行的 return "start /wait %s && del /f %s" % (file, file) ...

  8. 移动WEB前端开发资源整合

    meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,m ...

  9. AngularJs2 学习之路-笔记1-Atscript Ts ES6包含关系

    Atscript 这门新的语言是由谷歌的Angular团队弄出来的 就是为了编写ng2.0 ng2是个极具前瞻性的尝试 这种激进的革新在于对未来标准的迎合 ng2的标准包括了如下:1 module 2 ...

  10. 关于DOM的一些操作 整理 积累

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...