3.7　创建页眉

3.7　创建页眉

如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。

一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header可能代表整个页面的页眉（有时称做页头），如图3.7.1所示。通常，页眉包括网站标志、主导航（如图3.7.2所示）和其他全站链接，甚至搜索框。这无疑是header元素最常见的使用形式，不过不要误认为是唯一的形式。

...
<body>
<header>
    <nav>
       <ul>
          <li><a href="#gaudi">Barcelona's Architect</a></li>
          <li lang="es"><a href="#sagrada-familia">La Sagrada Família</a> </li>
          <li><a href="#park-guell">Park Guell</a></li>
       </ul>
    </nav>
</header>
</body>
</html>

图3.7.1　这个header代表整个页面的页眉。它包含一组代表整个页面主导航的链接（在nav元素中）。出于提高可访问性的目的，可以将可选的role="banner"应用到整页页眉。图3.7.3中显示了这样做的例子

3.7　创建页眉 - 图1

图3.7.2　包含导航的页眉

header也很适合对页面深处的一组介绍性或导航性内容进行标记。例如，一个区块的目录，如图3.7.3所示。

<body>
<header role="banner">
    ... [网站标识、导航等] ...
</header>
 
<article>
     <header>
        <h1>Frequently Asked Questions</h1>
        <nav>
           <ul>
              <li><a href="#answer1">What is your return policy?</a><li>
              <li><a href="#answer2">How do I find a location?</a><li>
              ...
           </ul>
        </nav>
     </header>
 
     <!-- header的链接指向这里 -->
     <article id="answer1">
        <h2>What is your return policy?</h2>
        <p> ... [答案] ... </p>
     </article>
 
     <article id="answer2">
        <h2>How do I find a location?</h2>
        <p> ... [答案] ... </p>
     </article>
     ...
</article> <!--结束父元素article -->
 
</body>
</html>

图3.7.3　这个页面有两个header，一个是整个页面的，另一个是Frequently Asked Questions父元素article的。注意第一个并不包含任何h1～h6标题，而第二个则有。关于第一个header中出现的可选的role属性，参见本节最后一条提示

header元素是3.4节中提到的四个分块内容元素中的一个。这意味着在考虑文档大纲时，位于header内的任何h1～h6标题都会被认为处于header的范围中，而不是整个页面。因此，header通常包含其自身的标题（h1～h6或hgroup），但这并不是强制性的。例如，图3.7.3中有标题，但图3.7.1中就没有。

创建页眉的步骤

将光标放置在需要创建页眉的元素里。
输入
。
输入页眉内容，包括各种类型的内容，它们分别由各自的HTML元素（大多数将在本书余下部分讲到）进行标记。例如，header可以包含h1～h6标题、标志、导航、搜索框，等等。
输入。

提示　只在必要时使用header。大多数情况下，如果只有h1～h6或hgroup，没有其他需要与之组合在一起的伴生内容，就没有必要用header将它包起来。

提示　header与h1～h6元素中的标题（参见3.3节）是不能互换的。它们都有各自的语义目的。

提示　不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。

提示　header不一定要像示例那样包含一个nav元素（如图3.7.1和图3.7.3所示），不过在大多数情况下，如果header包含导航性链接，就可以用nav。在图3.7.3中，nav包住Frequently Asked Questions链接列表是恰当的，因为它是页面内的主要导航组（将在3.8节中讨论）。

提示　要了解header如何取代HTML5之前版本中div元素的一个功能，参见3.13节。

提示　要了解如何在header中使用role="banner"，参见3.14节。

3.7 创建页眉

3.7 创建页眉

3.7　创建页眉

3.7　创建页眉