So far we've only dealt with the kind of structural tags that just set up the framework for our page. But those are actually the minority, compared with the tags that let us change how our page content looks and behaves. But we have to be careful here, and make sure to remember that NO tags should exist just to change the look of some bit of text or other--at least, that's the theory. To hear why, listen to this tale...
In the bad old days of HTML 3.2 everyone (everyone!) was using tags in a presentational manner; that is, right in their HTML they told their text and images how they should look. If you wanted something to be bold, you could write <b>bolded text</b>, and so it would be. <font size="2"> did something (sometimes what you'd expect, sometimes not), as did <table bgcolor="#a45c92" cellpadding="1" cellspacing="0" width="100%" border="2">. The problem was, while all that made some text bold, some little, and some tables wide and a pleasant purple color, it didn't do anything to address why they were so. Even worse, there were tags like <h2>, designed to indicate second level headings, that people used to make slightly larger bold text--anywhere on the page that they wanted it! Now, this might not sound so horrible to you, but trust the professionals: this was a bad scene.
In XHTML, we can still commit some of these offences if we want to, but some of them are now beyond our capabilities. But never fear, because the alternatives are a million times more wonderful. What are those alternatives? Why, they're semantic markup, combined with CSS for presentation. Semantic markup means that each tag in our page is there for a reason, beyond just making things look good; we can leave the looking good chores to CSS, which I'll get to in a moment. Of course, things can never be completely semantic; there are always some things we do just for looks. What we absolutely need to do all the time, though, is to make sure that our tags don't get in the way of meanigful semantics, for folks who are looking for them.
Enough theory! What does this all mean in practice? Well, we can start by adding a little more text to the body of our page (since we're focusing on the body here, I'll leave out the head and the html tags):
Now, when you stick all that into your index.html and reload your browser (which you need to do to see the changes), you'll see that it might not look like you expect it to. To wit, all the lines are run together. That's because the browser doesn't care about how you space things--it looks for tags to tell it what's what. So we add some:
The <h1> and <h2> tags are first- and second-level headings, and, as headings, they come with line-breaks before and after (HTML provides six levels of heading, labled as you would expect). <p> is the code for a regular paragraph. You'll see that the line beginning 'Look ma' isn't tagged as anything, and is nevertheless on its own line; that's because it's set off by the headings. Technically, the 'This is...' paragraph doesn't need <p> tags either, but I included them here for clarity.
More? More!
<em> is emphasized text, usually displayed as italicized. <strong is extra-emphasized, generally bolded by browsers. And <a href=""> makes a link; the 'a' stands for 'anchor' and the href for something else. 'Hypertext reference,' probably. One more basic tag that I didn't manage to get into that example is <br />, which creates a line break. Note that, since a line break naturally occurs at one specific point and thus doesn't have a closing tag, you need to include the trailing slash to keep things XHTML. Note also that you should almost never have to use <br />, because there are usually better ways to do things. Line breaks aren't semantic, after all. And that's it for this sort of tag. Now on to our layout!
[ back to 'Standardizing the Page' - on to 'Establishing Structure']