当前位置:首页 >> 网页制作

html5组织文档结构_动力节点Java学院整理

文档部分,即body部分,包含了访问者可以看到的内容。传统的HTML文档通常通过div元素来组织文档结构,再配上适当的样式表。但div元素的问题是缺少语义信息,在查看别人的源代码时,必须费点劲才能理解哪个div表示什么,整个页面时怎么搭建起来的,通常需要在HTML页面、样式表和浏览器之间跳来跳去。特别是如果HTML页面的组织结构不好,很容易就会导致困惑。对此,HTML5中新增了许多语义元素,用来替换div元素,并且将语义和呈现分离。
所有的语义元素都有一个显著的特点:不真正做任何事,它们在外观上对内容的影响微乎其微,甚至根本没有影响。语义元素的存在主要有以下几条理由:
 

  1)容易修改和维护。通过HTML5的语义元素,可以传达出额外的结构化信息,让人很容易理解文档的整体布局和不同区块的作用。
  2)无障碍性。现代web设计的一个重要主题,就是让任何人都能无障碍地访问网页,就是让使用屏幕阅读器和其他辅助工具的人都能在页面中自由导航。
  3)搜索引擎优化。使用HTML5能够让搜索引擎能够更好的理解你的网站,可以让它们收集到它们索引的页面的更多信息。
  4)未来的功能。新浏览器和Web编辑工具未来一定会利用语义元素。比如:将文档的主要部分重点呈现。

最关键的是,如果你正确地使用了语义元素,就能够创建更加清晰的页面结构,就能够适应未来的浏览器和Web设计工具的发展趋势。下面将介绍用于组织文档结构的语义元素,首先以一个例子来了解HTML5通常的文档结构。

HTML5文档结构

老的HTML页面都是用div元素,再配上适当的样式表,但div元素的问题在于,它本身不反映与页面相关的任何信息。而HTML5的页面就是将这些div元素替换为具有描述性的语义元素。下面的例子包含了HTML5中用于描述文档结构的主要的语义元素,语义元素的使用和它们标注的内容的含义密切相关,理解了它们的含义,你就能灵活的使用它们。

<body>
 <header>
  <hgroup>
   <h1>Things I like</h1>
   <h2>by Adam Freeman</h2>
  </hgroup>
  <address>
   Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a>
  </address>
  <nav>
   <h1>Contents</h1>
   <ul>
    <li><a href="#fruitsilike">Fruits I Like</a></li>
    <ul>
     <li><a href="#morefruit">Additional Fruits</a></li>
    </ul>
    <li><a href="#activitiesilike">Activities I Like</a></li>
    <ul>
     <li><a href="#tritypes">Kinds of Triathlon</a></li>
     <li><a href="#mytri">The kind of triathlon I am aiming for</a></li>
    </ul>
   </ul>
  </nav>
 </header>
 <main role="main">
  <article>
   <header>
    ......
   </header>
   <aside>
    <h1>Why Fruit is Healthy</h1>
    <section>
     Here ar three reasons why everyone should eat more fruit:
     <ol>
      <li>Fruit contains lots of vitamins</li>
      <li>Fruit is a source of fibre</li>
      <li>Fruit contains few calories</li>
     </ol>
    <section>
   </aside>
   <section>
    <p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p>
    <details>
     <summary>Kinds of Triathlon</summary>
     There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
     <ol>
      <li>1.5km swim</li>
      <li>40km cycle</li>
      <li>10km run</li>
     </ol>
    </details>
   </section>
  </article>
 </main>
 <nav>
  More Information:
  <a href="http://fruit.org">Learn More About Fruit</a>
  <a href="http://triathlon.org">Learn More About Triathlons</a>
 </nav>
 <footer id="mainFooter">
  ©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a>
 </footer>
</body>

在上面的文档中包含了许多HTML5的元素,如果你想要将不同的元素在呈现上区分开来,你需要配合上适当的外观,这篇文章不涉及外观。

标题

HTML定义了一套标题元素体系,从h1到h6,h1级别最高。同级标题通常用来将内容分作几个部分,每个部分一个主题。而各级标题则通常用来表示同一主题的各个方面。他们共同构成了文档的大纲,因此用户只要浏览文档的各级标题即可初步了解其大意和结构,通过标题体系用户还可以迅速导航到感兴趣的内容。

<body>
 <h1>Fruits I like</h1>
 ......
</body>

子标题

hgroup元素可以用来将几个标题元素作为一个整体处理(如果不使用hgroup元素,主标题和子标题将被作为两个标题,而使用hgroup之后,主标题和子标题将被作为一个标题对待),以免扰乱HTML文档的大纲。

<body>
 <hgroup>
  <h1>Fruits I like</h1>
  <h2>How I Learned to Love Citrus</h2>
 </hgroup>
 ......
</body>

在这里,“How I Learned to Love Citrus”就是作为“Fruits I like”的子标题存在,两个将被作为一个标题对待,通常在样式上会将标题和子标题靠的更紧。

标记页面的主要区域

页面通常只有一个部分代表其主要内容,可以将这样的内容放在main元素中,该元素在一个页面仅使用一次。

<body>
 ......
 <main role="main">
  <article>
   ......
  </article>
 </main>
 ......
</body>

role="main"可以帮助屏幕阅读器定位页面的主要区域。

创建文章

article元素代表HTML元素中一段独立成篇的内容,可以独立于页面其余内容发布或使用,可以看作一篇文章。article可以嵌套在另一个article中,只要里面的article与外面的article是部分与整体的关系,且在语义上是可以独立存在的。一个页面可以有多个article元素,每个article都可以独立成篇,一个article可以包含一个或多个section元素(见下一节)。

<body>
 ......
 <main role="main">
  <article>
   <header>
    ......
   </header>
   <aside>
    ......
   </aside>
   <section>
    ......
   </section>
  </article>
  <article>
   <header>
    ......
   </header>
   <aside>
    ......
   </aside>
   <section>
    ......
   </section>
  </article>
  ......
 </main>
 ......
</body>

section

section元素是HTML5新增,用于表示文档中的一节。并没有明确的规定什么情况下该使用section元素,但通常section元素应该用于包含那种应该列入文档大纲或目录中的内容。section可以属于某个article,一个article可以包含一个或者多个section。section元素通常包含一个或多个段落及一个标题,不过标题并不是必需的。

<body>
 <section>
  <hgroup>
   <h1>Fruits I Like</h1>
   <h2>How I Learned to Love Citrus</h2>
  </hgroup>
  I like apples and oranges.
  <section>
   <h1>Additional fruits</h1>
   I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
   <section>
    <h1>More information</h1>
    You can see other fruits I like <a href="fruitlist.html">here</a>.
   </section>
  </section>
 </section>
</body>

 上面定义了3个section,逐层嵌套,每个section的标题都是h1。不过在不同的浏览器上,section的层级结构的默认外观会有差异,可以通过创建自定义样式来解决这个问题。section和article的区别在于,section在本质上组织性和结构性更强,可以看作一个独立的段落,而article代表的是自包含的容器。

首部和尾部

header元素表示一节的首部,可以包含刊头和徽标。header元素通常包含一个标题元素或一个hgroup元素,还可以包含该节的导航元素。一个页面可以包含任意数量的header元素,他们的含义可以根据其上下文而不同。
footer元素表示一节的尾部,通常包含该节的总结信息,还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等。

<body>
 <header>
  <hgroup>
   <h1>Things I like</h1>
   <h2>by Adam Freeman</h2>
  </hgroup>
 </header>
 <section>
  <header>
   <hgroup>
    <h1>Fruits I Like</h1>
    <h2>How I Learned to Love Citrus</h2>
   </hgroup>
  </header>
  ......
 </section>
 <section>
  <header>
   <h1>Activities I like</h1>
  </header>
  ......
 <section>
 <footer id="mainFooter">
  ©2011, Adam Freeman. <a href="http://apress.com">Visi Apress</a>
 </footer>
</body>

本例定义了3个header元素。body元素的header元素作为整个文档的首部。
注意:不能在footer中嵌套header或另一个footer,也不能将tooter嵌套在header或address元素里。

导航区域

nav元素表示文档中的导航区域,包含到其他页面或同一页面的其他部分的链接。并不是所有的链接都需要放到nav元素中,该元素的目的是规划出文档的主要导航区域。

<body>
 <header>
  <hgroup>
   <h1>Things I like</h1>
   <h2>by Adam Freeman</h2>
  </hgroup>
  <nav>
   <h1>Contents</h1>
   <ul>
    <li><a href="#fruitsilike">Fruits I Like</a></li>
    <ul>
     <li><a href="#morefruit">Additional Fruits</a></li>
    </ul>
    <li><a href="#activitiesilike">Activities I Like</a></li>
    <ul>
     <li><a href="#tritypes">Kinds of Triathlon</a></li>
     <li><a href="#mytri">The kind of triathlon I am aiming for</a></li>
    </ul>
   </ul>
  </nav>
 </header>
 <section>
  ......
 </section>
 <section>
  ......
 </section>
 <nav>
  More Information:
  <a href="http://fruit.org">Learn More About Fruit</a>
  <a href="http://triathlon.org">Learn More About Triathlons</a>
 </nav>
 <footer id="mainFooter">
  ......
 </footer>
</body>

这里使用了两个nav元素,在header中的部分为用户提供了本文档中的导航方法,另一个放在文档末尾,为用户提供了一些额外的链接。
注意不要将所有链接都放在nav区块中,nav通常应该只用于页面中最大最主要的导航区。例如上面提供的文档导航是由必要放在nav区块中的,可是,如果只是一些许可和联系方式的信息,就没必要放在nav区块中了。

附注栏

aside元素用来表示跟周边内容稍微沾一点边的内容,类似于书籍或杂志中的侧栏,其内容往往与页面的其他内容、article或section有点关系,但并非主体内容的一部分,它可以是一些背景信息、到相关文章的链接,诸如此类。

<body>
 <header>
  ......
 </header>
 <article>
  <header>
   ......
  </header>
  <aside>
   <h1>Why Fruit is Healthy</h1>
   <section>
    Here ar three reasons why everyone should eat more fruit:
    <ol>
     <li>Fruit contains lots of vitamins</li>
     <li>Fruit is a source of fibre</li>
     <li>Fruit contains few calories</li>
    </ol>
   <section>
  </aside>
  ......
 </article>
 <footer id="mainFooter">
  ......
 </footer>
</body>

你可以像在印刷品中使用附注栏一样使用aside元素,可以通过它介绍另一个相关的话题,或者对主文档中提出的某个观点进行解释。也可以使用aside元素来存放广告、相关内容链接等。

联系信息

address元素用于表示文档或article元素的联系信息。address元素如果为article元素的子元素时,它提供的联系信息被视为该article的;当address元素为body元素的子元素时,它提供的联系信息被视为整个文档的。address元素不能用来表示文档或文章的联系信息之外的地址,例如:不能用来表示客户或用户的地址。

<body>
 <header>
  ......
  <address>
   Questions and comments?<a href="mailto:adam@myboringblog.com">Email me</a>
  </address>
  ......
 </header>
 ......
</body>

详情区域

details元素在文档中生成一个区域,用户可以展开它以了解关于某主题的更多详情。details元素通常包含一个summary元素,用于为该详情区域生成一个说明标签或标题。

<body>
 <header>
  ......
 </header>
 <article>
  <header>
   ......
  </header>
  <section>
   <p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p>
   <details>
    <summary>Kinds of Triathlon</summary>
    There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
    <ol>
     <li>1.5km swim</li>
     <li>40km cycle</li>
     <li>10km run</li>
    </ol>
   </details>
  </section>
 </article>
</body>

details元素在浏览器中是有默认外观的,在chrome中的效果如下:

html5组织文档结构_动力节点Java学院整理

details元素默认情况下会是折拢状态,只有其summary元素的内容可见,要让页面一开始就展开,可以使用它的open属性(布尔属性)。

<details open>
 <summary>Kinds of Triathlon</summary>
 There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
 <ol>
  <li>1.5km swim</li>
  <li>40km cycle</li>
  <li>10km run</li>
 </ol>
</details>

效果如下:

html5组织文档结构_动力节点Java学院整理

小结

HTML5的语义元素是其发明者对已有的网页研究的基础上定义出来的,他们不仅浏览了自己喜欢的站点,也研读了谷歌对十亿个网页的统计信息。如果你感兴趣,可以在这里(google的站点,无法直接查看)查看。
 

目前,HTML5的语义元素在所有现代浏览器上都得到了支持,但对于一些老版本的浏览器(主要是IE9之前的Internet Explorer),需要一些补救措施。由于语义元素本身什么都不做,要支持它们,只要让浏览器把它们当作普通的div元素就行,而剩下的工作,就是为它们添加点样式规则,之后,即使使用老古董浏览器来访问这些网页,也都没有问题了。幸运的是,这些工作Modernizr已经帮你实现了。