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. sql语句修改列

    1.修改列名的常用语句 exec sp_rename '[dbo].[Table_1].[birthday]','birth'  --将表中列名为birthday改为birdh 属性不变,用的是数据库 ...

  2. Hadoop 部署过程中的一些问题与解决方案

    环境--> centos7.1 --> jdk1.8 1.JDK卸载与安装 http://blog.csdn.net/czmchen/article/details/41047187 2. ...

  3. R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记（转）

    https://ask.julyedu.com/question/7490 labelImg:https://github.com/tzutalin/labelImg

  4. Collection接口

    Collection接口所定义的方法: clear:清空 retainAll 求一个Collection和另一个 Collection的交集. object[] toArray()  把里面的各个对象 ...

  5. Memcache 内存分配策略和性能(使用)状态检查

    前言: 一直在使用Memcache,但是对其内部的问题,如它内存是怎么样被使用的,使用一段时间后想看看一些状态怎么样?一直都不清楚,查了又忘记,现在整理出该篇文章,方便自己查阅.本文不涉及安装.操作. ...

  6. 红黑树/B+树/AVL树

    RB Tree 红黑树  :http://blog.csdn.net/very_2/article/details/5722682 Nginx的RBTree实现   :http://blog.csdn ...

  7. C Primer Plus_第5章_运算符、表达式和语句_编程练习

    Practice 1. 输入分钟输出对应的小时和分钟. #include #define MIN_PER_H 60 int main(void) { int mins, hours, minutes; ...

  8. 【XLL 框架库函数】 TempErr/TempErr12

    创建一个包含了 Excel 工作表错误的临时 XLOPER/XLOPER12 原型 LPXLOPER TempErr(WORD err); LPXLOPER12 TempErr12(BOOL err) ...

  9. 网络编程之socket

    网络编程之socket socket:在网络编程中的一个基本组件,也称套接字. 一个套接字就是socket模块中的socket类的一个实例. 套接字包括两个: 服务器套接字和客户机套接字 套接字的实例 ...

  10. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...