HTML and CSS Reference
Figure 3-4: A page with a basic structure.
© David Sanders
Now the Web page shown in Figure 3-4 has more structure than any of the previous examples.
h e navigation bars at the top and bottom are helpful to the user, but perhaps they'd look
better centered on the page. Maybe the top navigation bar should be at the very top of the
page in the center, right next to the logo. Also, the text is jammed right next to the image and
could use some space. Of course, the heading should be in a dif erent style, weight, size, and
font. Also, it's pretty boring — especially since it's for kids. However, because the structure is
coming along, you can address those other details when you learn to use more styling tools.
ADDING MORE HTML5 STRUCTURE
In the previous section you learned about the wbr element that is new to HTML5, and this
section takes a closer look at using the familiar <h..> tag and some related tags for structur-
ing text. Also, you saw how to start with a hand-drawn sketch of what you want and imple-
ment it in a HTML5 script. Moving from a fairly concrete sketch to a more general block
outline helps understand how HTML5 is organized into blocks. h e i rst kind of block
examined is the text block — in fact we've already begun, in Chapters 1 and 2, discussing
<h1> , <h2> , and other h elements. Figure 3-5 illustrates the block organization.