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:
Upper cabinets go here.
Lower cabinets go here.
Since we’re working with web page content instead of cabinets, a more realistic example is this: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:
Page navigation goes here.
The primary text box goes here.
The secondary text box goes here.
Footer goes here.
• 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.