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. Linux线程同步：条件变量

    条件变量通过允许线程阻塞和等待另一个线程发送信号的方法弥补了互斥锁的不足,它常和互斥锁一起使用.使用时,条件变量被用来阻塞一个线程,当条件不满足时,线程往往解开相应的互斥锁并等待条件发生变化.一旦其它 ...

  2. Linux下，如何给PHP安装pdo_mysql扩展

    下载了一个免费开源的广告系统(openadserver),在Linux上安装时,提示要安装 pdo_mysql 扩展,先前有过编译安装 soap扩展 的经历,今天要编译安装 pdo_mysql 扩展, ...

  3. Android下如何计算两经纬点之间距离

    节选自百度地图API: 若开发者使用的是百度地图或定位API,且版本在1.3.5以后的, 路线规划提供了获取路线距离的方法,见MKRoutePlan 类的 getDistance 方法. 如果是计算任 ...

  4. Eclipse 代码显示不全的问题

    Eclipse中的"Show Source of Selected Element Only"功能引起的, 定位到: Window->Customize Perspectiv ...

  5. word20161208

    EAP, Extensible Authentication Protocol / 可扩展身份验证协议 EFS, encrypting file system / 加密文件系统 embedded ob ...

  6. FreeImage编译及遇到问题解决

    FreeImage编译及遇到问题解决 1.下载freeImage源码包 wget http://downloads.sourceforge.net/freeimage/FreeImage3170.zi ...

  7. sqlserver表分区小结

    为什么要表分区?  当一个表的数据量太大的时候,我们最想做的一件事是什么?将这个表一分为二或者更多分,但是表还是这个表,只是将其内容存储分开,这样读取就快了N倍了 原理:表数据是无法放在文件中的,但是 ...

  8. csc.rsp Nuget MVC/WebAPI、SignalR、Rx、Json、EntityFramework、OAuth、Spatial

    # This file contains command-line options that the C# # command line compiler (CSC) will process as ...

  9. SQL Server 数据库巡检脚本

    --1.查看数据库版本信息 select @@version --2.查看所有数据库名称及大小 exec sp_helpdb --3.查看数据库所在机器的操作系统参数 exec master..xp_ ...

  10. MIT 6.828 JOS学习笔记5. Exercise 1.3

    Lab 1 Exercise 3 设置一个断点在地址0x7c00处,这是boot sector被加载的位置.然后让程序继续运行直到这个断点.跟踪/boot/boot.S文件的每一条指令,同时使用boo ...