Lesson 1: Thinking HTML5 semantics CHAPTER 5 209
■■<article> A unit of content that can stand on its own and can be copied to other
locations. A blog post is a good example of an article.
Figure 5-3 shows how these elements might be applied to create a layout container.FIGURE 5-3 ayout container example, using the new HTML5 elementsLIn Figure 5-3, all <div> elements have been replaced with the new HTML5 elements.Using the <header> element
The <header> elements in Figure 5-3 replace the <div id=”header”> elements in Figure 5-2,
which cleans up the page a bit and provides a section meaning to browsers and other
devices. Don’t confuse the HTML5 <header> element that is within a <body> element, which
is visible, with the HTML <head> element for the HTML document, which is invisible.
The <header> element should contain <h1> to <h6>, referred to as an <hn> moving
forward element, containing your visible heading. You can also have other content with
your <header> element, such as company logos and navigational links, as in the following
example.
<header>
<h1>Contoso Ltd.</h1>
<img src="logo.jpg" alt="Company Logo" />
<p>Other supplementary information</p>
</header>You can have multiple <header> elements in an HTML document. There are multiple
<header> elements within this layout container because each <article> element has a
<header>.