HTML5的全新语义化元素

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>标签来包裹。

posted @ 2015-07-20 16:07  梦想的天空分外蓝  阅读(210)  评论(0编辑  收藏  举报