ORGANIZING A PAGE - HTML5 - page 90

Why you really should pay attention to the section
organization
You may be thinking that you can get a page up and running without the hassle of the section tags.
That's true. However, under the hood of your mild-mannered Web page is a rumbling engine that can
reference different parts of your page. Known as the Document Object Model (DOM), the different
groupings you have set up using the section elements can be addressed as different objects and
children of objects in a well-ordered stream of data coursing over the Internet. By paying attention to
the organizational model used in HTML5, your Web page will be happy, the Internet will be happy,
and the galaxy will be happy.
Finally, at the bottom of the article is a footer. Footer elements can go anywhere, including
inside individual section and aside element containers. Footers act as a closing organiza-
tional element for the section elements. Within the footer is an address element with a link
to a URL related to the article.
In looking at the page in Figure 5-5 and the code, you can see the sense of the page described
in the section tags. As noted, they're really not for formatting but for organizing the sense of
the page.
94
GETTING YOUR STUFF ORGANIZED
Once you have a general organizational plan, you want to arrange your content within the
dif erent sections. In Figure 5-4, you saw that several of the section elements contained
grouping elements, such as the <p> tags. Grouping elements are a preferred place for adding
your CSS3 styles; section elements are not. In this section, you'll i nd the major elements to
help you organize your materials.
PARAGRAPHS, DIVISIONS, AND LISTS
h e <p> and <div> tags used to be the workhorses of HTML pages for both grouping and
styling. Both are still important, but you must remember that their job is no longer one of
sectioning material on your page. Instead, think of both of these tags as grouping parts of a
section. For example, the following code snippet shows the old way of using these two tags:
< div >
< h1 > All About Important Stuff </ h1 >
< p >
< h2 > Finding True Love </ h2 >
</ p >
< p >
< h2 > Choosing the Right Career </ h2 >
</ p >
< p >