Page Structure Elements

HTML5 introduces several new page-structure elements that meaningfully identify areas of the page as headers, footers, articles, navigation areas, asides, figures and more. The page structure elements provided by HTML5 are:

header Element

The header element creates a header for this page that contains both text and graphics. The header element can be used multiple times on a page and can include HTML headings, navigation, images and logos and more. For an example, see the top of the front page of your favorite newspaper. time Element

The time element which does not need to be enclosed in a header, enables you to identify a date (as we do here), a time or both.

nav Element

The nav element groups navigation links. In this example, we used the heading Recent Publications and created a ul element with seven li elements that link to the corresponding web pages for each book.

figure Element and figcaption Element

The figure element describes a figure (such as an image, chart or table) in the document so that it could be moved to the side of the page or to another page. The figure element does not include any styling, but you can style the element using CSS. The figcaption element provides a caption for the image in the figure element.

article Element

The article element describes standalone content that could potentially be used or distributed elsewhere, such as a news article, forum post or blog entry. You can nest article elements. For example, you might have reader comments about a magazine nested as an article within the magazine article.

summary Element and details Element

The summary element (line 92) displays a right-pointing arrow next to a summary or caption when the document is rendered in a browser (Fig. 3.19). When clicked, the arrow points downward and reveals the content in the details element (lines 91–125).

section Element

The section element describes a section of a document, usually with a heading for each section—these elements can be nested. For example, you could have a section element for a book, then nested sections for each chapter name in the book. In this example, we broke the document into three sections—the first is Recent Publications (lines 21–43). The section element may also be nested in an article.

aside Element

The aside element describes content that’s related to the surrounding content (such as an article) but is somewhat separate from the flow of the text. For example, an aside in a news story might include some background history. A print advertisement might include an aside with product testimonials from users.

Images for Page structure Elements