208 CHAPTER 5 More HTML5
FIGURE 5-2 A blog site layout container using <div> elementsA layout container lays out its children in a way that is flexible and reusable. For the devel-
oper, the purpose of the <div> elements is easy to understand based on the id and CSS class
names. How can the browser understand the elements? If you want the browser to give the
user the ability to focus automatically on the first element in the main content when the page
opens, how would you do this? If you want the browser to give the user special quick-launch
buttons for the menu items, how could you accomplish this?
By using HTML5 semantic elements, you can create a layout container that uses elements
that are meaningful to both the developer and the browser. The following are common ele-
ments by which to create an HTML5 layout container.
■■<header> efines a section that provides a header. You can use the <D header>
element at the top of your HTML document as a page header. You can also use the
<header> element in the <article> element.
■■<footer> efines a section that provides a footer. You can use the <D footer> element
at the bottom of your HTML document as a page footer. You can also use the <footer>
element in the <article> element.
■■<nav> efines a section that houses a block of major navigational links.D
■■<aside> efines a section of content that is separate from the content the <D aside>
element is in. This is typically used for sidebars.
■■<section> Part of the whole that is typically named with an <h1> to <h6> element
internal element.Key
Te rms