html5语义化标签之结构标签

html5里面新增加了一些标签,这些标签使得html更语义化,本文主要提到的标签有:section、article、header、nav、footer、hgroup、aside。

section标签

<section>标签,定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。

当我们描述一件具体的事物的时候,通常鼓励使用article来代替section;当我们使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。

article标签

<article>是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。一般来说,article会有标题部分(通常包含在header内),有时也会包含footer。article可以嵌套,内层的article对外层的article标签有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。

nav标签

nav标签代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。

<nav>
	<ul>
		<li><a href="http://www.rainleaves.com">首页</a></li>
		<li><a href="#">html+css</a></li>
		<li><a href="#">jQuery</a></li>
		<li><a href="#">seo优化</a></li>
		<li><a href="#">wordpress教程</a></li>
	</ul>
</nav>

但并不是页面上的所有链接团体都需要放在nav标签内,它主要是由页面的主要导航块组成。例如,我们通常在网站的页脚里放一组链接,包括服务条款、网站介绍、版权声明等,这时,我们通常使用footer,而不是nav。

一个页面可可以包含多个nav标签,作为页面整体或者不同部分的导航。在下面的例子中,有两个nav标签,一个是网站的主体导航,另外一个是当前页面本身的辅助链接导航。

<h1>雨打浮萍</h1>
<nav>
    <ul>
        <li><a href="/">首页</a></li>
	<li><a href="#">html+css</a></li>
	...more...
    </ul>
</nav>
<article>
    <header>
	<h1>html5语义化标签之结构标签</h1>
	<p><span>发表于</span>2011-12-22</p>
    </header>
    <nav>
	<ul>
	    <li><a href="#">子导航</a></li>
	    <li><a href="#">子导航</a></li>
	    ...more...
	</ul>
    </nav>
    <div>
	 <section id="public">
	    <h1>section里面仍然可以再用h1标签</h1>
	    <p>...more...</p>
	 </section>
	 <section id="destroy">
	    <h1>section里面仍然可以再用h1标签</h1>
	    <p>...more...</p>
	 </section>
	...more... </div>
    <footer>
	<p><a href="#">关于我们</a> |
	<a href="#">友情链接</a> |
	<a href="#">杂七杂八</a></p>
    </footer>
</article>
<footer>
    <p><small>© copyright 2011 </small></p>
</footer>

nav标签本身并不要求包含一个列表,它还可以包含其它内容形式。

<nav>
    <h1>Navigation</h1>
    <p>You are on my home page. To the north lies <a href="/blog">my
	blog</a>, from whence the sounds of battle can be heard. To the east
	you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
	you can spy a little figure who appears to be me, desperately
	scribbling a <a href="/school/thesis">thesis</a>.</p>
    <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
	boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
    <p>To the south lies a dark and dank <a href="/about">contacts
	page</a>. Cobwebs cover its disused entrance, and at one point you
	see a rat run quickly out of the page.</p>
</nav>

aside标签

aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。

header标签

<header>标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。

通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。

<header>
	<h1>雨打浮萍</h1>
	<p>专注于web前端开发</p>
</header>
<article>
	<header>
		<h1>html5语义化标签之结构标签</h1>
		<p>article、section、hgroup、aside、nav...</p>
	</header>
	<p>...这里面包含很多东西...</p>
</article>

footer标签

footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和<header>标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。

hgroup标签

hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

 <hgroup>
 	<h1>雨打浮萍</h1>
	<h2>专注于web前端开发</h2>
 </hgroup>

写在最后:

博客从上线到现在,一直在不断的修改当中,在制作这方面也遇到不少问题,因为跟自己平常的习惯不太一样,修改起来,有时候感觉非常吃力,从学习到工作,都只是一个人在摸黑前进,很多东西都不规范,所以看起别人的东西来,也不知道究竟哪种写法才是对的,迷茫中。wordpress的模板里面穿插着html5和CSS3,这两方面我还不太了解,借修改的机会,自己也补充一下,希望能给大家也带来帮助,有不妥的地方,还望大家多多提出宝贵意见,不吝纠正。

马上分享给你的朋友吧~

html5语义化标签之结构标签》上有 2 条评论

  1. Pingback 引用通告: 2.HTML5新增的结构元素 | 滴洋

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>