html5 页面结构

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Now that we’ve broken down the basics of our template, let’s start adding some meat to the bones and give our page some structure.

现在，我们已经分解了模板的基础知识，让我们开始向骨骼添加一些肉，并为页面提供一些结构。

Later in the book, we’re going to specifically deal with adding CSS3 features and other HTML5 goodness; for now, we’ll consider what elements we want to use in building our site’s overall layout. We’ll be covering a lot in this section and throughout the coming chapters about semantics. When we use the term “semantics,” we’re referring to the way a given HTML element describes the meaning of its content.

在本书的后面，我们将专门处理添加CSS3功能和其他HTML5优点。 现在，我们将考虑在构建网站的整体布局时要使用哪些元素。 在本节以及接下来的有关语义的各章中，我们将涉及很多内容。 当我们使用“语义”一词时，是指给定HTML元素描述其内容含义的方式。

If you look back at the screenshot of The HTML5 Herald (or view the site online), you’ll see that it’s divided up as follows:

如果回头看HTML5 Herald的屏幕截图(或在线查看网站)，您会发现它的划分如下：

Before we decide which elements are appropriate for these different parts of our page, let’s consider some of our options. First of all, we’ll introduce you to some of the new HTML5 semantic elements that could be used to help divide our page and add more meaning to our document’s structure.

在决定哪些元素适合页面的这些不同部分之前，让我们考虑一些选项。 首先，我们将向您介绍一些新HTML5语义元素，这些元素可用于帮助划分页面并为文档的结构添加更多含义。

header元素 (The header Element)

Naturally, the first element we’ll look at is the header element. The spec describes it succinctly as “a group of introductory or navigational aids.”

自然，我们要看的第一个元素是header元素。 该规范将其简洁地描述为“一组入门或导航辅助工具”。

Contrary to what you might normally assume, you can include a new header element to introduce each section of your content. It’s not just reserved for the page header (which you might normally mark up with <div id="header">). When we use the word “section” here, we’re not limiting ourselves to the actual section element described in the next part; technically, we’re referring to what HTML5 calls “sectioning content.” This means any chunk of content that might need its own header, even if that means there are multiple such chunks on a single page.

与通常的假设相反，您可以包括一个新的header元素以介绍内容的每个部分。 它不只是保留给页面标题(通常可以用<div id="header">标记)。 当我们在此处使用“ section”一词时，我们并不局限于下一部分中描述的实际section元素； 从技术上讲，我们指的是HTML5所谓的“分段内容”。 这意味着可能需要其自己的标头的任何内容块，即使这意味着在单个页面上存在多个此类块。

A header element can be used to include introductory content or navigational aids that are specific to any single section of a page, or apply to the entire page, or both.

header元素可用于包括介绍性内容或特定于页面任何部分的导航帮助，或应用于整个页面，或两者。

While a header element will frequently be placed at the top of a page or section, its definition is independent from its position. Your site’s layout might call for the title of an article or blog post to be off to the left, right, or even below the content; regardless of which, you can still use header to describe this content.

尽管header元素通常会放置在页面或节的顶部，但其定义与位置无关。 您网站的布局可能要求文章或博客文章的标题位于内容的左侧，右侧甚至下方。 无论哪个，您仍然可以使用header来描述此内容。

section元素 (The section Element)

The next element you should become familiar with is HTML5’s section element. The spec defines section as follows:

您应该熟悉的下一个元素是HTML5的section元素。 规范定义了以下section ：

It further explains that a section shouldn’t be used as a generic container that exists for styling or scripting purposes only. If you’re unable to use section as a generic container—for example, in order to achieve your desired CSS layout—then what should you use? Our old friend, the div element, which is semantically meaningless.

它进一步说明，不应将某section用作仅用于样式或脚本编写目的的通用容器。 如果您无法将section用作通用容器(例如，为了实现所需CSS布局)，那么应该使用什么？ 我们的老朋友div元素在语义上是没有意义的。

Going back to the definition from the spec, the section element’s content should be “thematic,” so it would be incorrect to use it in a generic way to wrap unrelated pieces of content.

回到规范的定义， section元素的内容应为“主题”，因此以通用方式包装不相关的内容是不正确的。

Some examples of acceptable uses for section elements include:

section元素可接受用途的一些示例包括：

Keep in mind, also, that you’re permitted to nest section elements inside existing section elements, if it’s appropriate. For example, for an online news website, the World News section might be further subdivided into a section for each major global region.

另外请记住，如果合适的话，也可以将section元素嵌套在现有section元素中。 例如，对于在线新闻网站，“世界新闻”部分可能会进一步细分为每个主要全球区域的部分。

article元素 (The article Element)

The article element is similar to the section element, but there are some notable differences. Here’s the definition according to the spec:

article元素与section元素相似，但有一些显着差异。 这是根据规范的定义：

The key terms in that definition are self-contained composition and independently distributable. Whereas a section can contain any content that can be grouped thematically, an article must be a single piece of content that can stand on its own. This distinction can be hard to wrap your head around, so when in doubt, try the test of syndication: if a piece of content can be republished on another site without being modified, or if it can be pushed out as an update via RSS, or on social media sites such as Twitter or Facebook, it has the makings of an article.

该定义中的关键术语是独立的组成部分 ，可以独立分配 。 section可以包含可以按主题进行分组的任何内容，而article必须是可以独立存在的单个内容。 这种区别可能很难让人your目结舌，因此，在有疑问时，请尝试进行联合测试：如果可以在不做任何修改的情况下将某段内容重新发布到另一个网站上，或者可以通过RSS将其作为更新发布，或在Twitter或Facebook之类的社交媒体网站上，都有article 。

Ultimately, it’s up to you to decide what constitutes an article, but here are some suggestions in line with recommendations in the spec:

最终，由您决定文章的构成，但以下是一些与规范中的建议一致的建议：

Finally, just like section elements, article elements can be nested inside other article elements. You can also nest a section inside an article, and vice versa. It all depends on the content you’re marking up.

最后，就像section元素一样， article元素可以嵌套在其他article元素内。 您也可以在article嵌套一个section ，反之亦然。 这完全取决于您要标记的内容。

nav元素 (The nav Element)

It’s safe to assume that the nav element will appear in virtually every project. nav represents exactly what it implies: a group of navigation links. Although the most common use for nav will be for wrapping an unordered list of links, there are other options. For example, you could wrap the nav element around a paragraph of text that contained the major navigation links for a page or section of a page.

可以肯定地认为nav元素几乎会出现在每个项目中。 nav精确地表示了它的含义：一组导航链接。 尽管nav最常见的用途是包装无序链接列表，但还有其他选择。 例如，您可以将nav元素包裹在一段文本中，该文本段落包含页面或页面部分的主要导航链接。

In either case, the nav element should be reserved for navigation that is of primary importance. So, it’s recommended that you avoid using nav for a brief list of links in a footer, for example.

无论哪种情况，都应保留nav元素用于最重要的导航。 因此，建议您避免在页脚中使用简短的链接列表来使用nav 。

Although not all assistive devices recognize nav as of this writing, by building to the standards now you ensure that as screen readers improve, your page will become more accessible over time.

尽管在撰写本文时，并不是所有的辅助设备都可以识别nav ，但通过现在建立标准，您可以确保随着屏幕阅读器的改进，随着时间的推移，您的页面将变得更加可访问。

You can use nav more than once on a given page. If you have a primary navigation bar for the site, this would call for a nav element. Additionally, if you had a secondary set of links pointing to different parts of the current page (using in-page anchors or “local” links), this too could be wrapped in a nav element.

您可以在给定页面上多次使用nav 。 如果您有该站点的主导航栏，则需要一个nav元素。 另外，如果您有一组指向当前页面不同部分的辅助链接(使用页面内定位符或“本地”链接)，则也可以将其包装在nav元素中。

As with section, there’s been some debate over what constitutes acceptable use of nav and why it isn’t recommended in some circumstances (such as in a footer). Some developers believe this element is appropriate for pagination or breadcrumb links, or for a search form that constitutes a primary means of navigating a site (as is the case on Google).

与本section ，对于什么才是可接受的nav用途以及为什么在某些情况下(例如在页脚中)不推荐使用nav ，存在一些争论。 一些开发人员认为，此元素适用于分页或面包屑链接，或构成构成网站导航的主要方式的搜索表单(例如Google)。

This decision will ultimately be up to you, the developer. Ian Hickson, the primary editor of WHATWG’s HTML5 specification, responded to the question directly: “use [it] whenever you would have used class=nav”.^[7]

这个决定最终将取决于您，开发人员。 WHATWG HTML5规范的主要编辑者伊恩·希克森(Ian Hickson)直接回答了这个问题：“只要您使用class = nav，就使用[it]”。 ^[7]

aside元素 (The aside Element)

This element represents a part of the page that’s “tangentially related to the content around the aside element, and which could be considered separate from that content.”

此元素表示页面的一部分，该部分“与aside元素周围的内容切向相关，并且可以认为与该内容分开”。

The aside element could be used to wrap a portion of content that is tangential to:

aside元素可用于包装与以下内容相切的一部分内容：

The aside element should never be used to wrap sections of the page that are part of the primary content; in other words, aside is not meant to be parenthetical. The aside content could stand on its own, but it should still be part of a larger whole.

不应使用aside元素来包装页面的主要内容部分。 换句话说， aside并不意味着括号。 aside内容可以独立存在，但仍应是较大整体的一部分。

Some possible uses for aside include a sidebar, a secondary list of links, or a block of advertising. It should also be noted that the aside element (as in the case of header) is not defined by its position on the page. It could be on the side, or it could be elsewhere. It’s the content itself, and its relation to other elements, that defines it.

aside一些可能用途包括侧边栏，链接的辅助列表或广告块。 还应注意， aside元素(如header的情况)不是由其在页面上的位置定义的。 它可以在侧面，也可以在其他地方。 定义内容的是内容本身及其与其他元素的关系。

footer元素 (The footer Element)

The final element we’ll discuss in this chapter is the footer element. As with header, you can have multiple footer elements on a single page, and you should use footer instead of something generic such as <div id="footer">.

我们将在本章中讨论的最后一个元素是footer元素。 与header ，您可以在一个页面上有多个footer元素，并且应该使用footer而不是诸如<div id="footer">通用名称。

A footer element, according to the spec, represents a footer for the section of content that is its nearest ancestor. The section of content could be the entire document, or it could be a section, article, or aside element.

根据规范，页脚元素表示内容部分的页脚，即它的最接近的祖先。 内容部分可以是整个文档，也可以是section ， article或aside元素。

Often a footer will contain copyright information, lists of related links, author information, and similar information that you normally think of as coming at the end of a block of content; however, much like aside and header, a footer element is not defined in terms of its position on the page, so it does not have to appear at the end of a section, or at the bottom of a page. Most likely it will, but this is not required. For example, information about the author of a blog post might be displayed above the post instead of below it, and will still be considered footer information.

footer通常会包含版权信息，相关链接列表，作者信息以及您通常认为位于内容块末尾的类似信息； 但是，就像aside和header ，footer元素并不是根据其在页面上的位置来定义的，因此它不必出现在节的末尾或页面的底部。 很有可能会这样做，但这不是必需的。 例如，有关博客文章作者的信息可能显示在该文章的上方而不是下方，并且仍被视为页脚信息。

翻译自: https://www.sitepoint.com/defining-the-sample-sites-page-structure/

html5 页面结构