No matter how fancy we format our text, if our layout still looks like it came out of a word processor folks won't take us seriously as designers. We need to fancify things up a bit, and to do that the first thing we need to do is divide our page up into its component--semantic--sections. We already have what might be a header and body, and to that we'll add space for a footer and menu, as follows:
After you've made these changes, you'll notice that they don't alter the look of the page a great deal. Which is fine, for now. All they're doing is defining the seperate divisions of the page, and giving them names. We'll tell the browser what to do with those divisions in a minute, but first we need to add some content to our 'menu' and 'footer' divs:
(I didn't include the other two divs in the example, but that doesn't mean you have to delete them! But you knew that.)
The <ul> tags, as you see when you make these changes and refresh your page, indicate an unordered list, and the <li>s the list items that make up the list. The reason to use lists for the menu is simple: we want our page to be full of semantic data, and what, semantically, is a menu but a list of links? Our page thus makes more sense than it would if we just seperated all the menu items with <br />s. And, we can do some neat things with lists! As you'll see a bit later.
Now to do something with our new div structure, to make it earn its keep! But to accomplish that, we'll need to delve into the wonderful world of CSS.
[ back to 'Adding and Tagging Content' - on to 'Introducing CSS']