HTML - Structuring content

When you’re ready to work on the content of a page, the first step is to set up the structure. To draw an analogy, suppose you were renovating your kitchen. First, you plan, measure, and purchase or build the appropriate cabinets, just as you plan and build the structure of your page content. Then, you paint or stain those cabinets, just as you style the page content.

Finally, you install the cabinets in the kitchen, just as you position page content on the page.

Structuring the content happens with HTML, whereas styling and positioning are best accomplished with CSS. One of the first steps is to identify any natural content divisions. So if we return to the kitchen renovation analogy, natural content divisions exist between upper and lower cabinets. If we were coding that
division, it might look something like this:

<div id=”upper”>
Upper cabinets go here.
</div>
 

<div id=”lower”>
Lower cabinets go here.
</div>

Since we’re working with web page content instead of cabinets, a more realistic example is this:
<div id=”navigation”>
Page navigation goes here.
</div>

<div id=”primaryText”>
The primary text box goes here.
</div>

<div id=”secondaryText”>
The secondary text box goes here.
</div>

<div id=”footer”>
Footer goes here.
</div>

After you have a page designed and ready to be coded, identify the natural content divisions and use the div element and id attribute to structure your page in this manner. Here are a few additional notes regarding the div element:
• By default, when displaying a web page, some browsers insert a single line break (i.e., as if you had pressed the enter key on your keyboard) before and after each div element. However, this is easy to adjust with a style sheet.
• Aside from that line break, the div element carries no other display properties. This makes it well suited for simply containing content that is then styled and positioned with CSS.
• Finally, each id attribute must carry a unique value. So, you cannot create two content divisions on your page with the same name.

The rest of the page content is then placed inside the div elements.