Lesson 3 of Keith's HTML Tutorial

Pardon us while we pause for our first philosophical and theoretical discussion in this tutorial...

The tags that we looked at in Lesson 2 are structural in nature. That is, they are used to convey the structure and organisation of a document (for example, by breaking it up into paragraphs and other logical units). In this lesson, we're going to look at physical formatting elements, so called because they affect only the physical appearance or style of the text: they lend nothing to the organisation or structure or the document, or the sense that the reader might make of it.

We'll return to this subject in Lesson 6, but for the moment let me just say this: I'm telling you about these elements because they are still part of the HTML specifications, but I'm advising you against using them because those same specifications discourage their use. Why? Because they are more properly and more effectively achieved using Cascading Style Sheets -- of which, more in Lesson 6.

All right, now we've got that out of the way, let's begin with a couple of things that you might think we've already covered...

To render a portion of text in bold face, we enclose the text between the and tags. And to make text italic, we enclose it between and tags. You'll find a code example below:

(By the way, I'm sure you've now got used to the idea that we need the <HTML> and </HTML> tags around the whole document, so in some of our examples from now on, we might omit showing them.)

<BODY> This paragraph is in normal text. This paragraph is in bold face. This paragraph is in italic face. This paragraph is in italic face, but these words are in bold italic. This paragraph is in bold face, but these words are in bold italic. This paragraph is in normal text, but these words are in bold, these words are in italic, and these words are in bold italic. </BODY>

I hope the example makes it clear how you can combine bold and italic for the same string of text by nesting the tags inside the tags, or the tags inside the tags.

Let's just take time out here to talk about spaces inside tags. If you look at the example of code above, and consider specifically the last paragraph of text:

This paragraph is in normal text, but these words are in bold, these words are in italic, and these words are in bold italic.

Look at where I've put the space between the last word outside the first tag, and the first word inside the tag. The space is outside the tag. Similarly, the space between the last word before the tag and the first after the tag is outside the tag. There are other examples of the same principle in this paragraph. This method guarantees that you will have spaces where you want them when the browser renders the text. If you were to put those spaces inside the tags, like this:

...text, but these words are in bold...

the result would be unpredictable. Some browsers will ignore initial or final spaces within tags, and might render the snippet above like this:

which certainly isn't what you want. So to be safe, the only spaces inside tags should be the spaces between the words inside the tags.

Now, you might be looking at these bold and italic faces, and thinking: didn't we cover this in the last session, with the EM and STRONG elements? Well, not exactly. Both EM and STRONG are structural or logical elements, which indicate the use of text within a document, rather than its actual appearance. You might recall I said the EM elements are usually rendered in italics, and STRONG elements are usually rendered in bold face. But exactly how they appear depends on the browser on which the document is being viewed.

By contrast, the B and I elements are physical style tags. They are intended to be more prescriptive about how the text is to be rendered -- in either bold or italic face. This is more like the kind of control people are used to in word processing and DTP, where we think in physical styles -- bold, italic, underline, font size, and so on. However it still isn't guaranteed. There are some browsers that simply can't display italic or bold text, so will use an alternative presentation when faced with these tags. And a screen reader can't "speak" in boldface (though the electronic voice may change emphasis, as would be the case with EM and STRONG).

The same is true for the other physical style tags set out in this lesson. Some browsers that don't support all of the physical style tags may replace the style you want with something else -- or ignore the tag altogether. However, the market leading browsers do support the tags described here.

The "teletype" element renders text in a monospaced font, rather like preformatted text. However it differs from preformatted text in that it doesn't disable automatic word wrapping. Nor does it preserve additional white space between words. Open a new file in your editor, and type in the following code:

<HTML> <BODY> Here's some normal text for comparison... <TT> And here's some TT text. You can see the difference. But notice that this text will wrap when it gets to the right hand edge of your browser window. And it won't preserve additional spaces in between words. On the next line, five spaces were inserted between each number in the source code, but you'll see these are not preserved when the file is displayed in a browser... they are only rendered as single spaces. 1 2 3 4 5 </TT> </BODY> </HTML>

Save the file as "file3.html". When you open the file in your browser, it should look like this.

Text can be underlined using the tags and . And of course, you can combine the underline element with other physical style elements like bold and italic, as in the code example below:

<BODY> This sentence is in normal text, but these words are underlined. In this sentence, these words are bold and underlined; these words are italic and underlined; and these words are bold, italic and underlined. </BODY>

This particular element is a little different from the others in this lesson, in that it is actually deprecated -- which kind of means that it's "scheduled for demolition". It is likely to disappear from future versions of the HTML specifications. So while I advised you earlier not to use any of the tags on this page, I really really advise you not to use this one. (Who needs underline anyway, when you have other methods of emphasis? It's an old-fashioned typewriter thing. But it can be done with Cascading Style Sheets.)

If you'd like to adjust the size of the text, there are two pairs of tags that will do this for you. <BIG> and </BIG> will step up the size of the text they enclose compared to the text around it. Conversely, and will reduce text size. You can nest tags to increase or decrease the text size by more than one "step" at a time. Look at this piece of HMTL code:

<BODY> We start the sentence in normal text, but <BIG>these words</BIG> are made bigger by one "step". In this sentence, <BIG><BIG>these words</BIG></BIG> are made bigger by two steps; these words here are made smaller than normal text by one step; and these words here are made smaller by two steps. </BODY>

Let's pause to talk about the size of text. Most browsers recognise seven "sizes" of text, from 1 to 7 (7 being the biggest). "Normal" text is size 3, so enclosing some text in one pair of BIG tags bumps it up to size 4. Two pairs of BIG tags raises it to size 5. Text can't be displayed bigger than size 7, or smaller than size 1; this means that if you placed some normal text between three nested pairs of SMALL tags, one pair would effectively be ignored (two pairs would take normal text from size 3 down to size 1, so the third SMALL instruction simply can't be acted upon). Similarly at the other extreme, starting with normal text, any more than four BIG instructions will be ignored.

<BODY> LOOK LOOK <BIG>LOOK</BIG> <BIG><BIG>LOOK</BIG></BIG> <BIG><BIG><BIG>LOOK</BIG></BIG></BIG> <BIG><BIG><BIG><BIG>LOOK</BIG></BIG></BIG></BIG> <BIG><BIG><BIG>LOOK</BIG></BIG></BIG> <BIG><BIG>LOOK</BIG></BIG> <BIG>LOOK</BIG> LOOK LOOK </BODY>

Take care when making text smaller, though. In many browser fonts, size 1 is pretty unreadable.

Text can be made bold face by enclosing it in the and tags, or italic by placing it between and tags.

We can render text in a "fixed-width", monospaced font by enclosing it in the <TT> and </TT> tags. White space in the source file is not preserved when the text is rendered by the browser.

Text underlining can be achieved by enclosing the text in the and tags.

The size of text can be increased in stages using the <BIG> and </BIG> tags, and can be decreased using the and tags.

"Physical" styles like those described in this lesson explicitly define the desired appearance of text; "logical" styles don't.

Physical styles can be mixed and combined on the same text by nesting the relevant tags.