3.4 标题:<header>
、<hgroup>
、<h1>
~<h6>
以及<footer>
<header>
:用于分节元素的内容介绍和导航。
<footer>
:用于表现内容的附加信息。像<header>
一样,它也不能再包含<header>
和<footer>
元素。
<hgroup>
:这是<header>
的一种特殊形式,它只能包含<h1>
~<h6>
元素,用于对带有副标题的标题进行组合。
<h1>
~<h6>
:这些HTML4的标题元素已经被沿用下来,并没有什么改变。
<header>
或<footer>
因为不能包含<header>
或者<footer>
,所以对于一个复杂页面的标头或脚注,如果需要嵌套分节的内容元素,而这些元素又带有自己的<header>
和<footer>
时,则要用<section>
代替。
3.4.4 带有标题、副标题以及元数据的文章
<article>
<header>
<hgroup>
<h1>Article heading</h1>
<h2>Article subheading</h2>
</hgroup>
<p>(<time datatime="2009-07-13" pubdate>13th July,2009></ time>)</p>
</header>
<p>Content...</p>
</article>
3.5 大纲算法
每一个内容分节元素的第一个<h1>
~<h6>
会作为大纲中该小节的标题,而其任意的后续标题会形成大纲中的一个隐式的封装小节。
<hgroup>
是个例外,大纲算法会隐藏它除第一个标题之外的所有子<h1>
~<h6>
元素,我们很快便会看到。注意,<header>
并不是一个内容的标题元素或内容分节元素,因而它并不影响大纲算法。
3.5.1 实际情况下的大纲
<body>
<h1>Article heading</h1>
<h3>Article subheading</h3>
<p>Some text</p>
<h2>Section heading </h2>
</body>
1.文章标题Article heading(隐式小节)
1.文章标题Atrticle heading(隐式小节)
2.小节标题Section heading(隐式小节)
3.另一个小节标题Another section heading(隐式小节)
而采用HTML5形式,采用了明确的分节元素和<hgroup>
<body>
<article>
<hgroup>
<h1>Article heading</h1>
<h2>Article subheading</h2>
</hgroup>
<p>Some text</p>
<section>
<h2>Section heading</h2>
<p>Mort text</p>
</section>
<section>
<h2>Another section heading</h2>
<p>A little more text</p>
</setction>
</article>
</body>
2.无标题小节
1.文章标题Article heading
1.小节标题Section heading
2.另一个小节标题Another section heading
3.5.3 无标题小节的来源
除了内容分节元素外,还有另一组元素,它们可以有自己的大纲
<blockquote>
<body>
<details>
<fieldset>
<figure>
<td>
这些根分节元素并不形成其祖先元素的大纲,一般情况下,这意味着他们对大纲算法是隐藏的,因而不会被包含在大纲中。
因此一般情况下,<section>
、<article>
、<body>
始终应该有一个标题。
3.6.1 嵌套标题元素级别示例
<article>
<hgroup>
<h1>Article heading</h1>
<h2>Article subheading</h2>
</hgroup>
<section>
<h3>Section heading</h3>
<p>Content...</p>
<section>
<h4>Subsection heading</h4>
<p>Content...</p>
</section>
</section>
</article>
3.7 更多的结构化元素<nav>
、<aside>
、<figure>
以及<figcaption>
<nav>
:导航链接小节,这些链接或是链接到其他页面,或是链接到同一页面的其他小节。
<aside>
:页面的一个小节,由与周边内容略微相关但又单独分开的内容所组成。
<figure>
:用于这样一种内容:对理解至关重要,但可以在文档流中迁移,而不影响文档的含义。
<nav>
<h2 class="ally">Main navigtion</h2>
<ul>
<li><a href=/">Home</a></li>
<li>><a herf="/blog/">Weblog</a></li>
<li><a herf="/about/">About</a></li>
<li><a herf="/contact/">Content</a></li>
</ul>
</nav>
<aside>
内容应当是对主内容的补充(但对主内容的理解并不是必需的),意即是一种有点相关的内容。但是请记住,<aside>
必须是相关的。举例来说,让放在<aside>
中的网站侧边栏作为<body>
的子元素就很好,但整个网站范围的信息不应该出现在作为<article>
子元素的<aside>
中。另外,<aside>
适合于放置广告,只要它与父分节元素有关即可。
<figure>
的内容是必需的,但他的位置是可变的。最后<figure>
可以包含多个内容片段。
W3CSchool上的内容解释是规定独立的流内容,<figure>
元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。
<aside>
和<figure>
到底选用哪个?
如果这种内容只是相关而非必要,则使用<aside>
。如果这种内容是必要的,但其在内容流中的位置并不重要,则使用<figure>
。
另外,<aside>
和<nav>
也是内容分节元素,因此它们的标题也会被添加到文档大纲。<figure>
是跟分节元素,故它的任何子标题在大纲中都是被隐藏的。
3.8 综合到一起
3.8.2 将一个简单的页面转换成HTML5
HTML5标准写法:
<!--'HTML-style' HTML5-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article (HTML 5)</title>
</head>
<body>
<header id="branding"><!--page header (ont in section etc) -->
<h1>Site name</h1>
<!-- other page heading content -->
</header>
<nav>
<ul><li>Main navigation</li></ul>
</nav>
<div id="content"><!-- wrapper for styling and no title so not section -->
<article><!-- main content (the article) -->
<header>
<h1>Article title</h1>
<p>Article metadata</p>
</header>
<p>Article content...</p>
<footer>Article footer</footer>
</article>
<aside id="sidebar"><!-- secondary content for page (not related to article) -->
<h3>Sidebar title</h3><!-- ref:HTML50-style heading element levels -->
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer><!-- page footer -->
</body>
</html>
这里假设侧边栏的内容与文章不相关,故它是<body>
而不是<article>
的后辈元素。