页面结构图示例图_定义示例站点的页面结构

页面结构图示例图

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 covered the basics of page structure and the elements in HTML5 that will assist in this area, it’s time to start building the parts of our page that will hold the content.

既然我们已经介绍了页面结构的基础知识以及HTML5中将在此方面提供帮助的元素，是时候开始构建页面的内容部分了。

Let’s start from the top, with a header element. It makes sense to include the logo and title of The Herald in here, as well as the tagline. We can also add a nav element for the site navigation.

让我们从顶部开始，用header元素。 在此处包括《先驱报》的徽标和标题以及标语是很有意义的。 我们还可以为网站导航添加一个nav元素。

After the header, the main content of our site is divided into three columns. While you might be tempted to use section elements for these, stop and think about the content. If each column contained a separate “section” of information (such as a sports section and an entertainment section), that would make sense. As it is, though, the separation into columns is really only a visual arrangement, so we’ll use a plain old div for each column.

在header之后，我们网站的主要内容分为三列。 尽管您可能会想将section元素用于这些内容，但请停下来思考一下内容。 如果每一列都包含一个单独的信息“部分”(例如运动部分和娱乐部分)，那将是有意义的。 虽然如此，但实际上分成几列只是一种视觉上的安排，因此我们将为每列使用简单的旧div 。

Inside those divs, we have newspaper articles; these, of course, are perfect candidates for the article element.

在这些div内，我们有报纸文章； 当然，这些是article元素的完美候选人。

The column on the far right, though, contains three ads in addition to an article. We’ll use an aside element to wrap the ads, with each ad placed inside an article element. This may seem odd, but look back at the description of article: “a self-contained composition […] that is, in principle, independently distributable or reusable.” An ad fits the bill almost perfectly, as it’s usually intended to be reproduced across a number of websites without modification.

不过，最右边的一列除包含文章外，还包含三个广告。 我们将使用aside