WWW Authoring: Day 1 Text Attribute Elements


For the most part, HTML elements are intended to indicate the function that a particular piece of text serves within the document, rather than actually specifying how the text should be displayed. That decision is normally left up to the browser and the user's browser preferences. So, for example, you would use heading elements to indicate that a particular bit of text was a Chapter Title, but this wouldn't specify exactly what a Chapter Title should look like.

This is something you need to get used to as an HTML author--many of the decisions about exactly how your document looks aren't really up to you. Instead, they're in the hands of the person who is reading your document (or determined by the limitations or features of the browser that that person is using).
Note: Many browsers now implement an HTML 4.0 feature called Cascading Style Sheets (CSS) designed to let users specify the behavior of HTML elements to a certain extent. This is covered in the Advanced HTML seminar.

Nevertheless, there are a number of elements that reflect a difference in the purpose of a piece of text by changing how that text is displayed. These are the text attribute elements.

Emphasis (EM) and Strong (STRONG)

In keeping with the philosophy of specifying function, rather than form, there are two tags that are used to indicate emphasis. These are the <EM> </EM> tag, for normal emphasis, and the <STRONG> </STRONG> tag, for even more emphasis. Both are paired tags. The effect they have is as follows:

The HTML source:
This is <EM>emphatic</EM> and this is <STRONG>even more emphatic.</STRONG>
The result:
This is emphatic and this is even more emphatic.
Netscape displays these using italics and boldfacing, but a different browser might choose to display them differently (for example, by using underlining or a different color).

Bold (B) and Italic (I)

There are times when you might want to exert more explicit control over how an item gets displayed. For these times, there are elements that you can use. The <B> </B> tag specifies boldface, the <I> </I> tag specifies italics. Of course, some browsers (such as Lynx) may not be able to display these, and so might still interpret them in another way. The B and I tags are both paired tags.

Size: BIG and SMALL vs. FONT SIZE

As you can imagine, there are two ways to indicate size of text, one descriptive and one proscriptive

You can use the BIG <BIG> </BIG> and SMALL <SMALL></SMALL> elements to indicate that text should be larger or smaller than usual:

The HTML source:
This is <BIG>big</BIG> and this is <SMALL>small.</SMALL>
The result:
This is big and this is small.
You can 'nest' BIG and SMALL elements inside one another, so that <SMALL><SMALL> </SMALL></SMALL> produces teeny tiny text.

The FONT element changes the physical description of the text inside the element. FONT has an attribute SIZE which changes the size of the text. (Another FONT attribute, COLOR, will be discussed in Day 3.) Font sizes are indicated as +1, +2, +3, +4 (bigger than normal) and -1, -2 (smaller than normal).

The HTML source:
This is <FONT SIZE="+1">big</FONT> and this is <FONT SIZE="-1">small.</FONT>
The result:
This is big and this is small.
Font sizes can also be indicated as absolute numbers, with 3 as the normal font size (so 2 is small and 4 is big):
The HTML source:
This is <FONT SIZE="4">big</FONT> and this is <FONT SIZE="2">small.</FONT>
The result:
This is big and this is small.

Other Elements

Other elements that are used to indicate text attributes include: CITE (the title of a cited work), BLOCKQUOTE (indented and set off block quote from text), CODE (computer code) and ADDRESS (computer email address).

For more information, see the Style section of the HTML Chart.


 Top  Next
last updated JAH, September 8, 1997.