4    The Visible Part of an HTML DocumentHTML文档的可见部分

This chapter describes the displayable elements of HTML that you can use between <body> and </body>. 本章描述了可以在<body>和</body>之间使用的HTML可显示元素。For designing or laying out websites, you should use CSS instead. Before you learn how to make a website more beautiful, you need to have the basic knowledge of how to create a single web page using HTML and mark it up with the appropriate elements.对于设计或布局网站，您应该使用CSS。在学习如何使网站更美观之前，您需要掌握如何使用HTML创建单个网页并用适当的元素标记它的基本知识。

Even if you’ve already created web pages in HTML 4.01 (or even earlier) and are already familiar with the handling of HTML elements, it’s worth working through this chapter because semantic elements have been added with the current HTML and many existing elements have been given a different semantic meaning.即使你已经在HTML 4.01（甚至更早）中创建了网页，并且已经熟悉了HTML元素的处理，也值得学习本章，因为语义元素已经与当前的HTML一起添加，许多现有元素都被赋予了不同的语义含义。

Here’s what you’ll learn in this chapter:以下是您将在本章中学到的内容：

4.1    HTML Elements for Structuring Pages用于构建页面的HTML元素

In this chapter, you’ll learn about the various HTML elements that you can use to divide a web page into useful sections. 在本章中，您将了解可用于将网页划分为有用部分的各种HTML元素。If you’ve used HTML 4.01 so far, you’ll find many new elements here, as the current HTML also introduces a new content model to combat the rampant use of div elements with class attributes.如果你到目前为止使用过HTML 4.01，你会在这里发现许多新元素，因为当前的HTML还引入了一种新的内容模型，以对抗带有class属性的div元素的猖獗使用。

HTML ElementHTML元素

Meaning意思

<body>

Displayable content section of the HTML documentHTML文档的可显示内容部分

<section>

Subdivision of the HTML document into different sections将HTML文档细分为不同的部分

<article>

Subdivision of content into a self-contained topic-specific block将内容细分为独立的特定主题块

<aside>

Marginal information of a content such as a sidebar or for additional information about an article内容的边缘信息，如侧边栏或关于文章的附加信息

<nav>

Element used to mark up navigation(s) such as a sitemap or the main navigation of the website用于标记导航的元素，如站点地图或网站的主导航

<h1>, <h2>, <h3>,
<h4>, <h5>, <h6>

Headings of the first through sixth order第一至第六顺序的标题

<header>

Header of a content内容的标题

<footer>

Footer of a content内容的页脚

<address>

Contact information for the author of the content内容作者的联系信息

Table 4.1     Quick Overview of the Section Elements Covered Here快速概述此处涵盖的章节要素

4.1.1    Using <body>: The Displayable Content Section of an HTML Document使用<body>：HTML文档的可显示内容部分

Everything you write between the opening <body> tag and the closing </body> tag is referred to as the HTML document body. 在打开<body>标记和关闭</body>标记之间写入的所有内容都称为HTML文档正文。Between <body> and </body>, you can write all HTML elements, such as text, hypertext links, images, tables, and lists, to define the structure of the web page. 在<body>和</body>之间，您可以编写所有HTML元素，如文本、超文本链接、图像、表格和列表，以定义网页的结构。All elements written between <body> and </body> are rendered by the web browser and displayed accordingly.在<body>和</body>之间写入的所有元素都由web浏览器呈现并相应显示。

<!doctype html>
<html lang="en">
  <head>
    <title>Title of the document</title>
    <meta charset="UTF-8">
  </head>
  <body>
    This is the content of the document, which is to be
    rendered and displayed by the web browser.
  </body>
</html>

4.1.2    Introducing the Section Elements of HTMLHTML节元素介绍

The following sections introduce the section elements of HTML, that is, <section>, <article>, <aside>, and <nav>. 以下部分介绍HTML的节元素，即<section>、<article>、<aside>和<nav>。If you’re perhaps just getting into HTML, using section elements is still a bit confusing or disappointing at first because they change almost nothing visually. 如果你刚刚开始学习HTML，使用section元素起初仍然有点令人困惑或失望，因为它们在视觉上几乎没有任何变化。Primarily, these elements only serve to divide the content into semantic (i.e., meaningful) areas.首先，这些元素仅用于将内容划分为语义（即有意义）区域。

Even if these new elements don’t seem to make sense to you yet, just remember that they aren’t of interest to the normal user of the website, but are mainly used to give meaning to the content, which is particularly useful for the developer, the search engines, and the screen readers.即使这些新元素对你来说似乎还没有意义，只要记住，它们对网站的普通用户来说并不感兴趣，但主要用于赋予内容意义，这对开发人员、搜索引擎和屏幕阅读器特别有用。

Dividing Content into Topic-Based Sections Using <section>使用<section>将内容划分为基于主题的部分

The <section> element allows you to divide the content of a document into topic-based sections. <section>元素允许您将文档的内容划分为基于主题的部分。This is helpful, for example, if you want to divide a document into individual chapters or even subchapters—just like this book was divided into individual sections. 例如，如果你想把一个文档分成单独的章节甚至子章节，就像这本书分成单独的部分一样，这很有帮助。Even on an ordinary homepage, you can use this element to create individual content and sense sections, such as a section with the description about the owner of the website, another section with news, and one with contact information. 即使在普通的主页上，您也可以使用此元素创建单独的内容和感测部分，例如一个包含网站所有者描述的部分、另一个包含新闻的部分和一个包含联系信息的部分。Here’s a simple example, the result of which you can see in Figure 4.1:这是一个简单的示例，其结果如图4.1所示：

...
  <body>
    <section>
       <h1>Chapter 1</h1>
       <p>The first chapter</p>
    </section>
    <section>
        <h1>Chapter 2</h1>
        <p>The second chapter</p>
        <section>
            <h2>Chapter 2.1</h2>
            <p>A subchapter of Ch. 2</p>
        </section>
    </section>
  </body>
...

Listing 4.1     /examples/chapter004/4_1_3/index.html

In this example, the <section> element has been used to divide the document into meaningful sections—in this case, Chapter 1 and Chapter 2—with each chapter consisting of a heading <h1> and paragraph text <p>. 在这个例子中，<section>元素被用来将文档划分为有意义的部分——在本例中为第1章和第2章——每一章由标题<h1>和段落文本<p>组成。Furthermore, it’s possible to nest <section> elements, as shown within the <section> element of Chapter 2, Section 2.1. 此外，可以嵌套<section>元素，如第2章第2.1节的<section>中所示。

Between <section> and </section>, You Can Divide the Content of a Document into Meaningful and Logical Units

Figure 4.1     Between <section> and </section>, You Can Divide the Content of a Document into Meaningful and Logical Units在<section>和</section>之间，您可以将文档的内容划分为有意义的和逻辑的单元

Dividing Content into a Self-Contained Block Using <article>使用<article>将内容划分为独立块

You should use the article element to summarize a piece of content in a self-contained topic-specific block. 您应该使用article元素在独立的特定主题块中总结一段内容。The article element is in itself quite similar to the <section> element, which you use to divide the content into meaningful sections. article元素本身与<section>元素非常相似，您可以使用它将内容划分为有意义的部分。However, it’s recommended that you use the article element for a standalone composition, which would be ideal for individual news items, blog or forum entries, or comments on a blog post or news, for example.但是，建议您将article元素用于独立作文，例如，这对于单个新闻条目、博客或论坛条目，或博客文章或新闻的评论来说是理想的。

Here’s an example of an HTML code snippet that shows you what such a blog entry with the article element could look like. The result is shown in Figure 4.2.这是一个HTML代码片段的示例，向您展示了带有article元素的博客条目的外观。结果如图4.2所示。

...
  <body>
  <h1>My Blog</h1>
  <p>Latest reports on HTML</p>
  <article>
     <header>
       <h2>New HTML elements on the horizon</h2>
     </header>
     <p>Published on <time>2023-05-05</time></p>
     <p>As already suspected ...</p>
     <footer>
       <a href="comments.html">View comments ...</a>
     </footer>
  </article>
  </body>
...

Listing 4.2     /examples/chapter004/4_1_4/index.html

The Example Shows a Meaningful and Logical <article> Composition of a Blog Entry

Figure 4.2     The Example Shows a Meaningful and Logical <article> Composition of a Blog Entry该示例展示了博客条目的有意义且合乎逻辑的<article>组成

Everything between <article> and </article> is the composition of a self-contained block consisting of a heading, a timestamp, the actual content section, and a footer. <article>和</article>之间的所有内容都是一个自包含块的组成，该块由标题、时间戳、实际内容部分和页脚组成。It’s up to you to decide which HTML elements you want to use to create such a composition with <article>, but the example shown here already makes sense semantically.由您决定要使用哪些HTML元素来创建带有<article>的组合，但这里显示的示例在语义上已经有意义了。

What to Use: <article> or <section>?使用什么：<article>还是<section>？

You’re probably wondering which of the two elements you should use for a semantic separation of content because the two are somewhat similar in some respects. 您可能想知道应该使用这两个元素中的哪一个来进行内容的语义分离，因为这两个在某些方面有些相似。Nevertheless, the HTML specification also makes a differentiation here and recommends using <article> if certain semantics are to be used multiple times, as is the case with a news or blog entry. 然而，HTML规范在这里也做出了区分，并建议在某些语义要多次使用的情况下使用<article>，就像新闻或博客条目一样。Thus, <article> is a self-contained block—a composition of repeatedly used content following the same pattern—whereas <section> is suitable for a separation into content sections, which should contribute to a better overview of the entire document.因此，<article>是一个自包含的块——遵循相同模式的重复使用内容的组合——而<section>适合分为内容部分，这应有助于更好地概述整个文档。

Adding Content with Additional Information Using <aside>使用<aside>添加包含附加信息的内容

With <aside>, you can usually supplement or expand content with additional information. 使用<aside>，您通常可以用其他信息补充或扩展内容。Strictly speaking, you can use the aside element for two different semantic things: a sidebar or an additional piece of information (e.g., a citation) to a content item, for example, within an article element.严格来说，您可以将aside元素用于两种不同的语义对象：侧边栏或内容项的附加信息（例如引用），例如在article元素中。

Referring to the /examples/chapter004/4_1_4/index.html example from Section 4.1.2.2, for example, you would use <aside> for a separate logical section in the document:例如，参考第4.1.2.2节中的/examples/chapter004/4_1_4/index.html示例，您可以在文档中使用<aside>作为单独的逻辑部分：

...
  <body>
  <h1>My Blog</h1>
  <p>Latest reports on HTML</p>
  <article>
...
  </article>
  <aside>
  <h3>Partner websites</h3>
      <ul>
      <li><a href="#">Blog XY</a></li>
      <li><a href="#">Magazine X</a></li>
      <li><a href="#">Website Z</a></li>
    </ul>
  </aside>
  </body>
...

Listing 4.3     /examples/chapter004/4_1_5/index.html

The <aside> Element Is Used as a Separate Logical Section in the HTML Document

Figure 4.3     The <aside> Element Is Used as a Separate Logical Section in the HTML Document<aside>元素在HTML文档中用作单独的逻辑部分

Note

The # character in HTML is a reference to a jump mark in the same document, but it has no meaning yet in this example and was used instead of a real destination address.HTML中的#字符是对同一文档中跳转标记的引用，但在这个例子中它还没有意义，并且被用来代替真正的目标地址。

In addition to the option just shown, using <aside> as a sidebar would also be suitable as additional information in the form of a quote or within an article element. 除了刚才显示的选项外，使用<aside>作为侧边栏也适合作为引用或article元素中的附加信息。In the example that contains the blog entry, it would be suitable within the article element for an entry with further links to the blog entry.在包含博客条目的示例中，在article元素中，它适合用于具有指向博客条目的进一步链接的条目。

The <aside> Element (Colored Here) Was Noted as Additional Information inside an <article> Element

Figure 4.4     The <aside> Element (Colored Here) Was Noted as Additional Information inside an <article> Element<aside>元素（此处着色）被标记为<article>元素内的附加信息

Let’s take a look at the following code snippet in this regard:让我们来看看这方面的以下代码片段：

...
  <body>
...
  <article>
    <header>
      <h1>New HTML elements on the horizon</h1>
    </header>
    <p>Published on <time>2023-05-05</time></p>
    <p>As already suspected ...</p>
    <aside>
    <h3>Further links</h3>
      <ul>
        <li><a href="#">Website A</a></li>
        <li><a href="#">Website B</a></li>
        <li><a href="#">Website C</a></li>
      </ul>
    </aside>
    <footer>
      <a href="comments.html">View comments...</a>
    </footer>
  </article>
  <aside>
...
  </aside>
  </body>
...

Listing 4.4     /examples/chapter004/4_1_5/index2.html

Declaring Content as a Page Navigation Bar Using <nav>使用<nav>将内容声明为页面导航栏

As you might guess from its name, the nav element enables you to divide navigation elements into blocks. 正如你从它的名字中猜到的那样，nav元素使你能够将导航元素划分为块。We’re not talking about web link collections here, but about a list of links for a sitemap or the main navigation of your own website. 我们在这里讨论的不是网络链接集合，而是网站地图或您自己网站的主导航的链接列表。Like the aside element, you can use the nav element for its own section or within another HTML element to combine a group of links into a block.与aside元素一样，您可以将nav元素用于其自己的部分，也可以在另一个HTML元素中将一组链接组合成一个块。

To use the blog entry again as an example, the nav element would be suitable for summarizing the main navigation or the list of related links from similar articles within the same web page. 再次以博客条目为例，nav元素适用于总结主导航或同一网页内类似文章的相关链接列表。In any case, you should use the nav element for entire blocks of links. The following code snippet demonstrates the nav element in a small theoretical blog:无论如何，您应该对整个链接块使用nav元素。以下代码片段演示了一个小型理论博客中的nav元素：

...
  <body>
  <nav>
    <a href="#">Blog</a> |
    <a href="#">Links</a> |
    <a href="#">About me</a> |
    <a href="#">Legal Notes</a>
  </nav>
  <h1>My Blog</h1>
  <p>Latest reports on HTML</p>
  <article>
...
    <aside>
    <h3>Similar articles</h3>
      <nav>
        <ul>
          <li><a href="#">HTML6 will not exist</a></li>.
          <li><a href="#">W3C and WHATWG agree</a></li>
          <li><a href="#">What comes after the Living Standard?</a></li>
        </ul>
      </nav>
    </aside>
...
  </article>
  <aside>
  <h3>Sitemap</h3>
    <nav>
    <ul>
      <li><a href="#">Blog</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
        </ul>
      </li>
      <li><a href="#">Links</a></li>
      <li><a href="#">About me</a>
        <ul>
          <li><a href="#">Bio</a></li>
          <li><a href="#">Portfolio</a></li>
        </ul>
      </li>
      <li><a href="#">Legal Notes</a></li>
    </ul>
    </nav>
  </aside>
  </body>
...

Listing 4.5     /examples/chapter004/4_1_6/index.html

The <nav> Element (Colored Here) Can Be Used to Divide a Separate (Navigation) Section or to Group Blocks of Links within Other HTML Elements

Figure 4.5     The <nav> Element (Colored Here) Can Be Used to Divide a Separate (Navigation) Section or to Group Blocks of Links within Other HTML Elements<nav>元素（此处着色）可用于划分单独的（导航）部分或对其他HTML元素中的链接块进行分组

In the first example, <nav> was used to define a main navigation as a separate section of the HTML document. 在第一个示例中，<nav>用于将主导航定义为HTML文档的单独部分。In the second example, the nav element was used to link a block of links to similar articles on the same web page. 在第二个例子中，nav元素用于将一组链接链接到同一网页上的类似文章。In the last example, a sitemap of the web page was summarized via the nav element.在最后一个例子中，通过nav元素总结了网页的站点地图。

In addition, the last two examples were grouped within <aside> and </aside>. 此外，最后两个示例被分组在<aside>和</abide>中。In them, bulleted lists (ul and li elements) were used within the nav element.其中，项目符号列表（ul和li元素）在nav元素中使用。

Using <nav> Only for Main Navigation?仅将<nav>用于主导航？

The specification suggests using the nav element specifically for the main navigation. That doesn’t include external additional links or affiliate links to external websites. 规范建议将nav元素专门用于主导航。这不包括外部附加链接或外部网站的联盟链接。Likewise, it’s not recommended to put legal stuff such as copyright, contact information, and legal notes in the nav section; instead, use the footer section for that purpose (see Section 4.1.4).同样，不建议在nav部分放置版权、联系信息和法律注释等法律内容；为此，请使用footer部分（见第4.1.4节）。

In the /examples/chapter004/4_1_6/index.html example, this means you only have two main navigation points with Blog and Links within the nav element and would write About me and Legal Notes outside of it (e.g., in the footer). 在/examples/chapter004/4_1_6/index.html示例中，这意味着您在nav元素中只有两个主要的导航点，即“博客”和“链接”，并且会在其外部（例如在页脚中）写上“关于我”和“法律注释”。I don’t see any point in separating this because there’s no difference between the first two links (Blog and Links) and the other two links (About me and Legal Notes) as both are linked to different websites, and both belong to the internal website in this case. 我认为没有必要将其分开，因为前两个链接（“博客”和“链接”）和另外两个链接（“关于我”和“法律说明”）之间没有区别，因为它们都链接到不同的网站，在这种情况下都属于内部网站。So, it’s up to you to what extent you want to follow these recommendations. 所以，这取决于你想在多大程度上遵循这些建议。In any case, you should refrain from using the nav element for external links to third-party websites and, if possible, use it only selectively and sensibly on your own website.在任何情况下，您都应该避免将nav元素用于第三方网站的外部链接，如果可能的话，只在您自己的网站上有选择地、合理地使用它。

4.1.3    Using Headings with the HTML Elements from <h1> to <h6>使用从<h1>到<h6>的HTML元素的标题

The HTML element for headings of a certain order is <h1> to <h6>. The number (1 to 6) represents the heading level. 特定顺序标题的HTML元素是<h1>到<h6>。数字（1到6）表示标题级别。Thus, everything you write between <h1> and </h1> is used as a top-level heading, everything between <h2> and </h2> belongs to a second-level heading, and so on down to the lowest level with <h6> and </h6> as a sixth-level heading.因此，你在<h1>和</h1>之间写的所有内容都被用作顶级标题，<h2>和</h2>之间的所有内容属于第二级标题，以此类推，直到最低级别，<h6>和</h 6>作为第六级标题。

The HTML elements <h1> through <h6> should not be misused to emphasize a text, but rather to define the content structure of a document. Consider the following HTML structure:HTML元素<h1>到<h6>不应被误用来强调文本，而应用于定义文档的内容结构。考虑以下HTML结构：

...
  <h1>Heading 1</h1>
  <h2>Heading 1.1</h2>
  <h3>Heading 1.1.1</h3>
  <h2>Heading 1.2</h2>
  <h2>Heading 1.3</h2>
  <h3>Heading 1.3.1</h3>
  <h1>Heading 2</h1>
...

Based on this sequence of headings, the following content structure (or document outline) will be mapped:根据标题的顺序，将映射以下内容结构（或文档大纲）：

1. Heading 1
   1.1. Heading 1.1
      1.1.1. Heading 1.1.1
   1.2. Heading 1.2
   1.3. Heading 1.3
      1.3.1. Heading 1.3.1
2. Heading 2
This Is What the Web Browser Will Make of It

Figure 4.6     This Is What the Web Browser Will Make of It这就是Web浏览器将如何处理它

What Happens to the Headings in the Section Elements?章节元素中的标题会发生什么变化？

You’re probably wondering what happens to the content structure of headings when you use the section elements from Section 4.1.2. That question is well justified. 您可能想知道，当您使用第4.1.2节中的selection元素时，标题的内容结构会发生什么变化。这个问题很有道理。If you use the <section>, <article>, <aside>, or <nav> section elements, the content structure of the headings will also be affected. 如果你使用<section>、<article>、<aside>或<nav>部分元素，标题的内容结构也会受到影响。Within each new section element, the heading level count starts from the beginning, but always at a lower hierarchy level. The following HTML code illustrates this:在每个新的节元素中，标题级别计数从头开始，但始终在较低的层次级别。以下HTML代码说明了这一点：

...
  <body>
  <h1>My Blog</h1>
  <p>A simple blog ...</p>
  <section>
    <h1>News on HTML</h1>
    <article>
      <h1>A preview of the new HTML elements</h1>
      <p>It looks like ...</p>
    </article>
  </section>
  <section>
    <h1>News on CSS</h1>
    <article>
      <h1>New Styles at Last</h1>
      <p>After a long time of development ...</p>
    </article>
  </section>
  </body>
...

Listing 4.6     /examples/chapter004/4_1_7/index.html

Here, five <h1> headings of the first order were used. If you look at the HTML code, you can see several sections. 这里使用了五个一阶<h1>标题。如果你查看HTML代码，你可以看到几个部分。Next to the top section with <body>, you can find two additional <section> elements, each of which contains an <article> element in which headings of the first order have also been defined.在带有<body>的顶部旁边，您可以找到另外两个<section>元素，每个元素都包含一个<article>元素，其中还定义了一阶标题。

This is a blog that’s been divided into two content sections with <section> containing the topics HTML and CSS. Within these sections, you can find the news articles included within <article>.这是一个分为两个内容部分的博客，<section>包含HTML和CSS主题。在这些部分中，您可以找到<article>中包含的新闻文章。

All Headings with <h1> Are Adjusted and Output Corresponds to the Section due to the Section Elements of HTML That Are Based on the Outline Algorithm

Figure 4.7     All Headings with <h1> Are Adjusted and Output Corresponds to the Section due to the Section Elements of HTML That Are Based on the Outline Algorithm由于HTML中基于大纲算法的部分元素，所有带有<h1>的标题都会进行调整，输出与该部分相对应

Due to the use of the new HTML elements <article> and <section>, the following content structure (or document outline) results:由于使用了新的HTML元素<article>和<section>，产生了以下内容结构（或文档大纲）：

1. My Blog
   1. News on HTML
      1. A preview of the new HTML elements
   2. News on CSS
      1. New Styles at Last

Document Outline for Advanced Users高级用户文档大纲

The term outline or document outline refers to the structure of the document, which can be generated and represented by the headings, among other things—as in the case of the table of contents of this book, for example. 术语大纲或文档大纲是指文档的结构，它可以由标题等生成和表示，例如本书的目录。The document outline can be quite useful. For example, the web browser might offer you a table of contents, letting you jump from one heading to another. 文档大纲可能非常有用。例如，网络浏览器可能会为您提供一个目录，让您从一个标题跳到另一个标题。Search engines can also use such a table of contents to create better page previews or even improve search results. 搜索引擎还可以使用这样的目录来创建更好的页面预览，甚至改进搜索结果。Screen reader users probably have the biggest advantage here because they can be guided through deeply nested hierarchies and sections.屏幕阅读器用户可能在这里有最大的优势，因为他们可以通过嵌套的层次结构和部分进行引导。

In Figure 4.8, you can see the JavaScript HTML5 outliner (h5o) to test the document outline during execution. Here, the document outline is displayed in the upper-right corner, and you can jump to the individual headings via hypertext links.在图4.8中，您可以看到JavaScript HTML5大纲（h5o），用于在执行过程中测试文档大纲。在这里，文档大纲显示在右上角，您可以通过超文本链接跳转到各个标题。

JavaScript h5o from Google during Execution

Figure 4.8     JavaScript h5o from Google during Execution执行过程中来自谷歌的JavaScript h5o

Section elements such as <section>, <article>, <aside>, and <nav> allow you to refine the document outline even more, as you’ve seen in the example, /examples/chapter004/4_1_7/index.html.<Section>、<article>、<aside>和<nav>等节元素允许您进一步细化文档大纲，正如您在示例/examples/chapter004/4_1_7/index.html中看到的那样。

Even if not all web browsers support document outlines directly, it won’t do any harm to pay attention to a proper outline of the HTML document because basically that’s no extra work. 即使并非所有网络浏览器都直接支持文档大纲，但注意HTML文档的正确大纲也不会有什么坏处，因为基本上这并不是额外的工作。Screen reader users will thank you for it, and search engine robots may reward you for it because a good document outline can improve a page index, which in turn could mean a higher ranking in search results. 屏幕阅读器用户会为此感谢你，搜索引擎机器人可能会为此奖励你，因为一个好的文档大纲可以改善页面索引，这反过来可能意味着在搜索结果中排名更高。Besides, a neatly structured web page is easier to read than an unstructured one.此外，一个结构整齐的网页比一个非结构化的网页更容易阅读。

Keeping Track of the Document Outline跟踪文档大纲

When the website becomes more extensive and the document contains many headings and perhaps different sections, it often isn’t easy to keep track of whether the document outline still makes sense and is neatly structured with regard to its contents. 当网站变得更加广泛，文档包含许多标题，可能还有不同的部分时，通常很难跟踪文档大纲是否仍然有意义，以及其内容是否结构整齐。Outlining tools that output the headline structure of the web page in the existing structure can assist you here. 在现有结构中输出网页标题结构的概述工具可以在这里为您提供帮助。For example, Google offers the JavaScript h5o, mentioned in the previous section, at https://h5o.github.io. Alternatively, you can find an online service at http://gsnedders.html5.org/outliner/. 例如，谷歌提供了上一节中提到的JavaScript h5o，网址为https://h5o.github.io。或者，您可以在以下网址找到在线服务http://gsnedders.html5.org/outliner/。Meanwhile, the validation checker at https://validator.w3.org/nu/#textarea also provides an outline option for HTML documents.与此同时，验证检查器https://validator.w3.org/nu/#textarea还为HTML文档提供了大纲选项。

4.1.4    Creating a Header Using <header> and a Footer Using <footer>使用<Header>创建页眉，使用<Footer>创建页脚

The <header> and <footer> are two additional semantic HTML elements that you can use for implementing a header and footer in an HTML document. <header>和<footer>是两个额外的语义HTML元素，可用于在HTML文档中实现页眉和页脚。Like section elements, these elements initially have no visual effect on the HTML document apart from a line break. 与section元素一样，除了换行符外，这些元素最初对HTML文档没有视觉效果。Again, these are initially just elements that you can use to give a piece of content a better and cleaner structure. 同样，这些最初只是您可以用来为内容提供更好、更清晰结构的元素。The styling here is usually done via CSS. 这里的样式通常是通过CSS完成的。However, unlike section elements such as <section>, <article>, <aside>, or <nav>, these two elements don’t affect the hierarchical structuring (or document outline) of the document.然而，与<section>、<article>、<aside>或<nav>等section元素不同，这两个元素不会影响文档的层次结构（或文档大纲）。

You should use the header element for introductory elements such as a page heading, the name of the web page, or a navigation bar of the HTML document. 您应该将header元素用于介绍性元素，如页面标题、网页名称或HTML文档的导航栏。There may well be other HTML elements between <header> and </header>. However, you mustn’t nest any other header elements in it. <header>和</header>之间可能还有其他HTML元素。但是，您不能在其中嵌套任何其他header元素。Although it seems obvious, <header> doesn’t necessarily have to be in the header, and you can use it more than once in the document.虽然看起来很明显，但<header>不一定必须在页眉中，您可以在文档中多次使用它。

Invalid Positions of <header><header>的位置无效

A <header> tag mustn’t be used inside a footer, address, or another header element.<header>标记不能在footer、address或其他header元素中使用。

The counterpart to the header element for the header section is the footer element for the footer or also the footer section, which also doesn’t necessarily have to be the last element in the document. 与页眉部分的header元素相对应的是页脚的footer元素或页脚部分，它也不一定是文档中的最后一个元素。Useful content for the footer of a website is often legal information, legal notes, or terms and conditions, but you can also use a sitemap or a special navigation bar here. 网站页脚的有用内容通常是法律信息、法律说明或条款和条件，但您也可以在此处使用站点地图或特殊的导航栏。You can’t use any other <footer> tag within a footer 您不能在footer中使用任何其他<footer>标记

Here’s an example that demonstrates the header and footer elements in a meaningful structure:下面是一个示例，演示了有意义结构中的header和footer元素：

...
  <body>
  <header>
    <hr /><small>Blog Version 1.0</small>
    <h1>My Blog</h1>
    <p>A simple blog...</p><hr />
  </header>
  <h2>News on HTML</h2>
  <article>
    <h3>A preview of the new HTML elements</h3>
    <p>It looks like ...</p>
  </article>
  <footer>
    <hr /><a href="#">Legal</a> |
    <a href="#">Legal Notes</a> |
    <a href="#">T&Cs</a> |
    <a href="#">About me</a><hr />
  </footer>
  </body>
...

Listing 4.7     /examples/chapter004/4_1_8/index.html

The Header and Footer with the <header> and <footer> Elements (Shown in Gray for Clarity)

Figure 4.9     The Header and Footer with the <header> and <footer> Elements (Shown in Gray for Clarity)带有<Header>和<Footer>元素的页眉和页脚（为清晰起见，以灰色显示）

Between <header> and </header>, you can find a summary of the entire information for the header section of a web page. 在<header>和</header>之间，您可以找到网页标题部分的全部信息摘要。In the example, this is the version of the blog, the headline, and a short description of the website. 在这个例子中，这是博客的版本、标题和网站的简短描述。This is followed by the articles of the blog. Finally, the footer between <footer> and </footer> contains forwarding hyperlinks with legal information and so on.接下来是博客文章。最后，<footer>和</footer>之间的页脚包含带有法律信息等的转发超链接。

4.1.5    Marking Contact Information Using <address>使用<address>标记联系信息

You should use the address element only for contact information about the author of the HTML document or article. 您应该只将address元素用于HTML文档或文章作者的联系信息。If the address element is used within the body element, it should only contain the contact information for the owner or author of the entire document or article. 如果address元素在body元素中使用，则它应该只包含整个文档或文章的所有者或作者的联系信息。If the address element is positioned inside an article element, the contact information for the author of the document should be written there. 如果address元素位于article元素内，则文档作者的联系信息应写在那里。Usually, the web browser displays this text in italics with a new line before and after the address element.通常，web浏览器会在address元素前后以斜体显示此文本，并添加新行。

The best location for this contact information for the author, an organization, or the person responsible for the document or article is usually likely to be at the end of the article or at the end of the document (e.g., between <footer> and </footer>).对于作者、组织或文档或文章负责人来说，此联系信息的最佳位置通常可能在文章末尾或文档末尾（例如，在<footer>和</footer>之间）。

Here’s an example in which the address element was used for contact information about the author of an article at the end inside the footer element. You can see the example at execution in Figure 4.10.下面是一个示例，其中address元素用于页脚元素末尾的文章作者的联系信息。您可以在图4.10中看到执行时的示例。

Contact Information for the Author of the Article Has Been Placed at the End of the Article between <footer> and </footer> Using the <address> Element

Figure 4.10     Contact Information for the Author of the Article Has Been Placed at the End of the Article between <footer> and </footer> Using the <address> Element使用<address>元素将文章作者的联系信息放在文章末尾<footer>和</footer>之间

...
  <article>
    <h3>A preview of the new HTML elements</h3>
    <p>It looks like ...</p>
    <footer>
      <address>The article was created by:<br>
        J. Doe<br>
        1234 Sample Street<br>
        Sample Town, 12345<br>
        www.webaddress.com
      </address>
    </footer>
  </article>
...

Listing 4.8     /examples/chapter004/4_1_9/index.html