ptg16476052376 LESSON 13: Structuring a Page with HTML5
Header
The <header> element, seen in the example HTML5 page that I showed earlier, is a con-
tainer for elements that generally appear at the top of the page and are carried across an
entire site. HTML5 distinguishes between sectioning elements, like <section>, that are
considered part of the document outline, and elements that are removed from the outline,
usually because they are boilerplate that appears on many pages. The <header> element
is excluded from the outline.
The header should contain general content like logos and navigational elements. For
example, Figure 13.1 contains the part of the New York Times home page that should be
enclo sed within a <header> element.You can also add <header> elements to other sectioning elements or even nest one
<header> within another. So, the <body> element can have a header, and each <section>
can have its own <header>.
All of the HTML5 structural tags, including <header>, have no visible effect on the page.Footer
The <footer> element is just like the <header> element, except that it’s a footer. It
speaks well of the design of HTML5 that it’s challenging to define the structural tags
without using the name of the tag in the definition. The <footer> contains the footer
material for the nearest sectioning ancestor. What does that mean? If a <footer> element
is nested inside a <section> element, it is considered to be the footer of that section, not
the footer for the page itself.
Like the <header> element, the <footer> element is not considered part of the page out-
line. You can probably imagine the sorts of things you might put in a <footer> element,
and if you can’t, most web pages have footers. They usually contain copyright informa-
tion, contact information for the creator of the page, and often some navigational ele-
ments. The footer for a section of a page may contain information about the author of the
content in that section. Figure 13 .2 contains a typical page footer.FIGURE 13.1
The header of the
New York Times
website.