Using HTML to Define the Parts of a Webpage
March 6, 2011
A webpage usually consists of several different parts – of course that can vary depending on content and design, but almost every page has a header, a navigation, content, and a footer. We’ve already discussed the beauty of an external stylesheet to define the look and layout of an entire website. For this reason, it’s very useful to proclaim the specific parts clearly in the html, so we can address them in the stylesheet.
So the HTML to a simple page layout might look like this:
<body> <div id="wrapper"> <div id="header"> <h1>The Company Name</h1> </div> <div id="navigation"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> </ul> </div> <div id="content"> <h2>The Content</h2> <p>This is where all the important info goes. Pictures, too - pictures are good.</p> </div> <div id="header"> <p>The copyright stuff and some basic contact info - or whatever </p> </div> </div> </body> |
Most of the above parts are pretty self-explanatory. And again, the actual name is irrelevant, but in the long run, it’ll make your life easier if you use descriptive names. After all, ‘header’ pretty much says it all, whereas you might not remember exactly which part <div id=”style1″> refers to, when you get back to your webpage at a later point. Or after lunch.
The only division I used that might require a bit more explanation is ‘wrapper’. Technically, the ‘body’ tag already is the main container of all your HTML, but the body tag encompasses every bit of real estate you see on your monitor. By throwing another wrapper into the body, it allows us to better define the actual content area. It’s not mandatory, it’s not a ‘you must’ – but it’s just a very useful tool in creating almost any website – I haven’t designed a site without it and probably never will.
And now that the major parts of the page have been defined in the HTML, we can used those definition – or divisions – to create the connection between the HTML and the CSS.
body { background-color: #ffffff; color: #000000; } #wrapper { background-color: #FFDD33; width: 1050px; } #header {whatever;} #navigation {whatever;} #content {whatever;} #footer {whatever;} |
Make sense?
