You may read the following sections in their entirety
or use these choices to go directly to a section.

| Review of Logical and Physical text formatting | | The BASEFONT tag | | Changing the font size of one or more characters of text | | BIG and SMALL tags | | Changing the font face | | Block quotes | | Superscript and subscript | | CITE, CODE, SAMP, TT, KBD, VAR and ADDRESS tags | | Underlining text | | Formatting text with <PRE> | | Blinking text | | Adding a comment |

In Lesson Four, you were introduced to two types of tags - that is, two types of formatting techniques. They were:

1. logical tags and
2. physical tags

With physical tags or physical formatting, the browser is forced to print the text in exactly the way that the designer intends. If the browser does not support those choices, then the tags are ignored because the browser has no alternative way to display the text. Examples of physical tags are <I> and <B>.

In this lesson, I am presenting some additional text formatting alternatives to complete what was begun in earlier lessons. Some of these alternatives are logical elements and some are physical elements.

<BASEFONT SIZE="5">

Note the following discussion points:

1. BASEFONT is one word (no spaces). Most browsers now recognize the BASEFONT tag.
2. The SIZE attribute is an integer value ranging from 1 to 7. The default value is "3" which is the font size the browser normally displays. Thus SIZE="5" is considered to be 2 sizes (also called 2 levels or 2 steps) larger than the default size of 3. Since the actual size of text varies from browser to browser, it is impossible to define exactly how big one size is. We only know that SIZE="5", for example, is 2 sizes larger than the normal default size of 3.
3. Relative font sizes also work with the BASEFONT tag. To indicate a relative base font size, use the "+" or "-" with the number value. You can denote a relative base font size from +1 to +7 and from -1 to -7.

   For example, while <BASEFONT SIZE="5"> would set the default base font size to "5",

   <BASEFONT SIZE="+5">

   would set the new default base font size 5 levels larger than the current base font size. A "relative" size is always given "relative" to the current default size. Thus while <BASEFONT SIZE="2"> gives a default base font of size "2",

   <BASEFONT SIZE="-2">

   would give a base font size 2 levels smaller than the default size and

   <BASEFONT SIZE="+2">

   would give a base font size 2 levels larger than the default size.

4. The BASEFONT tag is not a container element. That is, there is no closing BASEFONT tag.
5. BASEFONT applies to all normal and preformatted tags but not to headers. Be aware then, that using a BASEFONT tag could make the body text larger than the headers which could confuse your readers.
6. You cannot use BASEFONT to change the size of individual characters or of a block of text. There are other tags such as FONT, BIG and SMALL (also described in this lesson) that can be used for this purpose.
7. Use only one BASEFONT tag in each HTML document as the BASEFONT tag affects all the succeeding text. Normally the BASEFONT tag is used to change the base font of the entire page and if this is the case, the BASEFONT tag should then be placed right after the opening BODY tag. Thus you would have the HEAD, TITLE and BODY tags followed by the BASEFONT tag.
8. Choosing a large base font size may not look good in some browsers. However, you can use the BASEFONT tag to increase the size of your text in short web pages to give a little more importance to the whole page. Conversely, you can use a smaller base font in lengthy text intensive pages to fit more text on a page.
9. In general you should have a good reason to change the base font size of your text. Users may already have specified in their browser settings how they prefer to view text.

U N B E L I E V A B L E !

<FONT SIZE="4">text text text</FONT>

Discussion:

1. FONT is a container element in that it has an opening FONT tag (<FONT>) and a closing FONT tag (</FONT>).
2. The SIZE attribute indicates the size that the font is to be changed to. Sizes range in value from 1 to 7. The "T" in "The" in the above paragraph "The Font tag can be used to ..." was printed in a font size of "7". A value of 3 is the default size (the same as the default size with BASEFONT). Thus if you do not use a FONT tag, the text size that the browser uses is equivalent to a font size of 3.
3. The word "unbelievable!" above was written in a "fisheye" pattern (changing the font size of each letter in an ascending and then descending pattern). The word begins with a font size of 1 for the letter "U", a font size of "2" for the "N", a font size of "3" for the "B" and so on, to a font size of 7 for the letter "E" and then going down one level at a time ending with a font size of "1" for the "!". If the word "unbelievable" was printed in all the same size characters, then your browser does not support the FONT tag for changing the size of characters.
4. Here is a summary of the various font sizes:

   This is a font size of 1
   This is a font size of 2
   This is a font size of 3
   This is a font size of 4
   This is a font size of 5
   This is a font size of 6
   This is a font size of 7
   

5. The SIZE attribute can also take on a relative value. A relative size will change the font size relative to the current font size. You can, of course, define the current font size with the BASEFONT tag. In other words, if the BASEFONT tag is used, all relative font changes in the document after the BASEFONT tag will be relative to that value. As discussed in the last section, use the + or - with the values to indicate a relative size. Relative sizes range from +1 to +7 and from -1 to -7. Thus:

   <FONT SIZE="+2">text text text</FONT>

   will print the text 2 levels or 2 steps larger than the default font.

   and

   <FONT SIZE="-3">text text text</FONT>

   will print the text 3 levels smaller than the default font.

6. Use the FONT tag to change only a few characters or a few words. Use the BASEFONT tag to change the font size of the entire page.
7. You should avoid making extreme font changes if possible. They can make a document hard to read.
8. Do not use the FONT tag to take the place of header tags (H1, H2, H3, H4, H5 and H6). One of the reasons for this is that some search engine indexers rely on the six header elements to generate an overview of the document, and they will not be able to adequately index your document if you use FONT instead of the HEADER elements. FONT should only be used as an enhancement of your presentation. Try to limit your use of the FONT tag to small amounts of special effects.
9. Although most popular browsers now support the FONT tag for changing the size of text, you should also continue to use the <STRONG> and <EM> tags to emphasize text. This is because FONT is a physical tag which means that if a browser does not recognize the FONT tag, the text will still be emphasized through the <STRONG> and <EM> tags.
10. Finally, any browser which supports the FONT tag will not allow the user to disable it.

The format for making the text a little bigger is:

<BIG>text text text</BIG>

and the format for making the text a little smaller is:

<SMALL>text text text</SMALL>

However, not all browsers display the effect of the BIG and SMALL elements in the same way. In fact, when combined with the BASEFONT or FONT tags, the results can be unexpected. For example, in Firefox and Netscape, text formatted with BIG is always one size larger than the surrounding text. In Explorer, text formatted with BIG is also always one size larger than the surrounding text, unless the surrounding text is size 7 in which case BIG has no effect. Text formatted with SMALL is one size smaller than the surrounding text, unless the surrounding text is size 1, in which case SMALL has no effect. Now, as long as the text is normal size (3), Firefox, Netscape and Explorer all display BIG and SMALL in the same way.

So, if you want to ensure that the text is one level larger, it may be safer to use the FONT tag with a SIZE of +1 (<FONT SIZE="+1">) instead of the BIG tag, and use <FONT SIZE="-1"> instead of the SMALL tag to reduce the size by one level.

Nesting BIG tags as in:

<BIG><BIG>text text text</BIG></BIG>

will produce text in a larger font than with just one BIG tag. Similarly, nesting SMALL tags may produce text in a smaller font than with just one SMALL tag. Keep in mind that while you are allowed to nest BIG and SMALL tags, the results are undefined. That is, the results can't be predicted for all browsers.

Here is a list of some font faces. If some or all are still written in the normal default browser font, then your browser does not support changing the font face in those situations.

<FONT FACE="arial">This is arial font</FONT>
<FONT FACE="algerian">This is algerian font</FONT>
<FONT FACE="braggadocio">This is braggadocio font</FONT>
<FONT FACE="courier">This is courier font</FONT>
<FONT FACE="desdemona">This is desdemona font</FONT>
<FONT FACE="garamond">This is garamond font</FONT>
<FONT FACE="modern">This is modern font</FONT>

Note the following points:

1. The above list is not meant to be an exhaustive list. Try other fonts to see what you can come up with. For a list of possible names, just go to your word processor or another program that allows you to choose from various fonts.
2. You may list as many fonts as you wish in the FONT tag. Just remember to separate each choice with a comma and a space as in:

   <FONT FACE="arial, courier, modern">

   Using this method, if the browsers recognizes the first font listed, it will use that one. If it doesn't recognize the first font listed, it will go to the second font and use it. If it doesn't recognize the second font, it will move to the third one and so on until it finds one it knows or until the list is exhausted. In other words, the browser will use the first one available that it recognizes. If it doesn't recognize any of the listed fonts, the text will simply be displayed in the default mode. If you use this method, you should then write the font faces in order of preference.

<FONT SIZE="4" FACE="arial" COLOR="#FF00FF">text text text</FONT>

Here is an example using BLOCKQUOTE to quote from a book. The HTML coding follows the example.

CAMPING ETIQUETTE - FIRE SAFETY

Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir the wet ashes until all sparks are extinguished, then cover the ashes with earth.

Don't carry wooden matches loose in a pocket - if you fall or slide on them they could ignite. Better still, use safety matches. Store fuel containers in the shade and keep them away from flames. Always extinguish a stove or lantern before disconnecting or refilling its fuel tank.

Now here is the complete HTML coding for this example:

<H2 ALIGN="CENTER">CAMPING ETIQUETTE - FIRE SAFETY</H2>
According to the Canadian Automobile Association in their book "Outdoors Canada" - A Unique and Practical Guide to Wilderness and Wildlife, this is how you should practice fire safety when camping in the great outdoors:
<BLOCKQUOTE>
<P>Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir the wet ashes until all sparks are extinguished, then cover the ashes with earth.
<P>Don't carry wooden matches loose in a pocket - if you fall or slide on them they could ignite. Better still, use safety matches. Store fuel containers in the shade and keep them away from flames. Always extinguish a stove or lantern before disconnecting or refilling its fuel tank.
</BLOCKQUOTE>

Note the following points:

1. BLOCKQUOTE is one word (no spaces). This tag was also part of HTML 2.0 so all browsers support this tag.
2. Do not use BLOCKQUOTE simply to create indented text. It is not considered good HTML coding practice and you may not achieve the effect you want in all browsers. It could also confuse search engine page indexers and summarizers.
3. It is also recommended that text not be placed directly between the opening and closing BLOCKQUOTE tags. You should begin a block quote with an HTML tag such as I did above with the <P> tag. However, all three main browsers (Explorer, Firefox and Netscape) will still display a block quote correctly even if you ignore this rule.
4. I used the <P> tag two times in the above example. BLOCKQUOTE can also contain other text formatting techniques such as <EM> and <STRONG>.
5. If you quote from someone else's work, don't forget to include a credit and/or copyright notice.

Superscripts are letters or numbers that are raised slightly relative to the normal text as in:

The temperature outside is 78^oF.

SUP stands for SUPerscript and if your browser supports superscripts you should see the degree symbol raised slightly. I used the lower case letter "o" for the degree symbol. Here is the HTML coding for the above line:

The temperature outside is 78<SUP>o</SUP>F.

SUP specifies that the enclosed text should be printed in superscript. That is, SUP is a container element and so anything contained between the opening and closing tags will be raised or superscripted.

SUBSCRIPT

Subscripts are letters or numbers that are lowered slightly relative to the normal text as in:

The chemical expression for water is H₂0.

The HTML coding for this statement is:

The chemical expression for water is H<SUB>2</SUB>0.

SUB specifies that the enclosed text should be printed in SUBscript.

SUP and SUB are often used in mathematical formulas. At one time these tags were Netscape extension tags only. However, they became standard in HTML 3.2 for defining both kinds of offset text. So all browsers support these tags.

Of all the tags given in the title of this section, TT is the most common and it is also the only physical tag. The others are all logical tags. If your browser supports some or all of these elements, you will see them here as follows:

<CITE>This is CITE font</CITE>
<CODE>This is CODE font</CODE>
<SAMP>This is SAMP font</SAMP>
<TT>This is TT font</TT>
<KBD>This is KBD font</KBD>
<VAR>This is VAR font</VAR>
<ADDRESS>

Some of these fonts give identical results - yet each has its own purpose in HTML coding. You should therefore use each element only in the context they were designed for.

Now for a discussion of each element:

CITE

CITE is the logical tag for enclosing a citation - such as the title of a book or magazine. CITE normally prints the citation in italics, the same as <I> does - however, CITE is less widely recognized and less widely used than the "I" element.

Do not use CITE for anything but titles of cited works. For example, in a web page, the person could be discussing HTML and wants to cite a reference. He/she could cite for example:

In the book, HTML CODING, 1997 the writer states that blah, blah, blah ...

The HTML coding for this statement is:

In the book, <CITE>HTML CODING, 1997</CITE> the writer states that blah, blah, blah ...

If you do use CITE for other things, it can confuse others studying your coding and it will also confuse search engine indexers that automatically extract information from your documents. Use <EM> to emphasize in italics and use <I> for text which must appear in italics. In HTML 3.2, there is no tag to mark up short cited phrases. For longer cited phrases, you can use the BLOCKQUOTE element.

CODE

CODE is used to enclose a sample of computer code and also to emphasize pieces of code inside a block of text such as:

In the computer program, the line FOR I=1 to 10 sets up the counter.

The HTML coding for this statement is:

In the computer program, the line <CODE>FOR I=1 to 10</CODE> sets up the counter.

CODE usually gives a monospaced font. If you need to deal with larger blocks of code (several lines of code), it is recommended that you use the PRE element (discussed later in this lesson).

SAMP

SAMP is used to indicate a sample of text which should be used literally. For example,:

The error message General Protection Fault is well known to Windows users.

Here is the HTML coding for this statement:

The error message <SAMP>General Protection Fault</SAMP> is well known to Windows users.

SAMP will usually be rendered in a monospaced font. Now if you must have a monospaced font, do not use SAMP. Instead use TT.

TT

TT stands for TeleType font (also known as Typewriter Text). It is the only font in this group that is considered physical formatting. It is also the monospaced marker that is used most often. It is used to simulate typewriter output. Since TT is a physical element, if a browser does not recognize the tag, it will be ignored. For this reason, it may be better to use CODE or SAMP as these are logical tags that allow the browser to pick the best possible rendering in each case.

KBD

The KBD element is used to indicate text which should be entered by the user. In other words, use KBD in your discussions when you want to indicate that input from the viewer is required. It is usually printed in a monospaced font although some browsers may choose to print it in some other manner such as in bold face. If you want to ensure a monospaced font, use the TT tag instead. Here is an example:

Remember that when asked for a standard installation, type yes at the input prompt.

Here is the HTML coding for this line:

Remember that when asked for a standard installation, type <KBD>yes</KBD> at the input prompt.

VAR

VAR is used to mark up variables. The variables could be marked up in a monospaced font or it could be marked up in some other way such as italics. If you were discussing a computer program for example, you would use VAR to refer to the variables used in the program such as the statement:

In the BASIC program, the variable c is used for the loop counter.

Here is the HTML coding for this line:

In the BASIC program, the variable <VAR>c</VAR> is used for the loop counter.

ADDRESS

The ADDRESS element should be used if you want to enclose contact information - such as addresses and phone numbers. It is also used to enclose the signature file of the author of the web page. In most browsers the text will be rendered in italics, possibly with a slightly indented margin. If the text is not printed in italics, it will be rendered in a monospaced font. Here is an example:

The HTML coding for the above is:

<ADDRESS>John Gilson<BR>
6 Pioneer Place<BR>
Brantford</ADDRESS>

You may have noticed at the beginning of this section when all seven elements were compared, that only the opening and closing ADDRESS tags force line breaks. In other words, the HTML coding:

My street address is <ADDRESS>1327 Orrington</ADDRESS> and my city is <ADDRESS>Chicago.</ADDRESS>

produces:

My street address is

Closing remarks for this section

1. Monospaced tags will not have any effect in browsers that display all their text in monospaced fonts.
2. To format several lines of monospaced text - especially if you require extra spaces - use the PRE element.
3. All three main browsers (Explorer, Firefox and Netscape) display monospaced fonts in the same way.

<U>text to be underlined</U>

Unless it is very important to emphasize text by underlining, you are encouraged to avoid this tag. Browsers use underlining to indicate hyperlinks and many viewers could be confused if they see "links" that do not work - especially viewers with black and white or grayscale monitor screens. In fact, many graphical browsers do not support underlined text since underlined text makes it harder to distinguish the text from links. Also, Lynx displays text within the EM and STRONG tags with an underline and so viewers can be confused by further underlining.

The PRE element allows you to keep the original line breaks and spacing that you have inserted into the text in your HTML document. In other words, spaces are not collapsed. This is called preformatted text. Preformatted text is ideal for homemade tables and art. Text inside the PRE tag will be displayed in a monospaced font with some browsers (such as Explorer browsers) displaying the text one level smaller. When building an HTML document in a text editor other than NOTEPAD, be sure to use a monospaced font (such as Courier) so that you can see exactly what the table or art will look like in the browser. NOTEPAD automatically prints text in a monospaced font.

Here is an example of a table done entirely with the <PRE> tag. This table compares two sets of units to measure capacity and their conversion factors in the English system of measurement:

                         CAPACITY                                        
         Liquid Measure                 Dry Measure
    16 fluid ounces = 1 pint         2 pints = 1 quart
            2 pints = 1 quart       8 quarts = 1 peck
           4 quarts = 1 gallon       4 pecks = 1 bushel

Here is the HTML coding for this table:

<PRE>
                         <STRONG>CAPACITY                                        
         Liquid Measure                 Dry Measure</STRONG>
    16 fluid ounces = 1 pint         2 pints = 1 quart
            2 pints = 1 quart       8 quarts = 1 peck
           4 quarts = 1 gallon       4 pecks = 1 bushel
</PRE>

Here is a WORD SEARCH puzzle that was also done using the <PRE> tag. To see the HTML coding for this one, just choose SOURCE or DOCUMENT SOURCE from the VIEW menu. This puzzle comes from a magazine called "BIRDS & BLOOMS - a subscription magazine all about birds, flowers and for those who love the great outdoors. The author of this puzzle is Janet Flower of Oregon.

Directions: All 30 of the flower words listed below are found in the puzzle. They appear across, up, down, backward and even diagonally. Find the words and circle them. All the remaining letters will spell the mystery word. The mystery word is given at the end of this lesson.

       AMARYLLIS         GLOXINIA                MARIGOLD
       AZALEA            GRAPE HYACINTH          MUM
       BLUE GENTIAN      HYACINTH                PEONY
       CROCUS            JOHNNY JUMP UP          PETUNIA
       DAFFODIL          JONQUIL                 ROSE
       DAHLIA            LARKSPUR                SEGO
       DAISY             LAVENDER                SNAPDRAGON
       DAPHNE            LILY                    TULIP
       DELPHINIUM        LILY OF THE VALLEY      VIOLET
       GENTIAN           LUPINE                  ZINNIA

            L  I  L  Y  O  F  T  H  E  V  A  L  L  E  Y 
            Y  N  O  E  P  N  O  G  A  R  D  P  A  N  S 
            B  L  U  E  G  E  N  T  I  A  N  E  S  A  V
            P  A  M  A  R  Y  L  L  I  S  D  A  I  S  Y
            U  R  U  P  S  K  R  A  L  R  S  E  G  O  M
            P  L  I  D  O  F  F  A  D  E  M  U  M  D  U
            M  J  A  N  D  C  A  L  D  D  A  P  T  L  I
            U  O  I  A  A  R  Z  U  A  N  I  I  E  O  N
            J  N  N  I  H  O  A  P  P  E  N  L  L  G  I
            Y  Q  U  T  L  C  L  I  H  V  N  U  O  I  H
            N  U  T  N  I  U  E  N  N  A  I  T  I  R  P
            N  I  E  E  A  S  A  E  E  L  Z  Y  V  A  L
            H  L  P  G  A  I  N  I  X  O  L  G  L  M  E
            O  R  O  S  E  H  T  N  I  C  A  Y  H  I  D
            J  H  T  N  I  C  A  Y  H  E  P  A  R  G  L

Discussion:

1. PRE is a container element and so everything between the opening (<PRE>) and closing (</PRE>) tags will be part of the formatting. PRE is used to include sections of text in which formatting is critical. Text contained within the PRE element will only be wrapped at the line breaks in the HTML document and spaces will not be collapsed. A line break in the HTML document occurs when you hit the ENTER key.
2. As you can see from the above two examples, if you must use the table format but don't want to use TABLE tags, you can use preformatted text to line up the information in table like columns. Because PRE uses a monospaced font, the table may not look quite as nice as it would with TABLE tags.
3. Tables made with preformatted text will be readable by all browsers - not just the ones that currently support official tables.
4. You can use tabs to indent text. However, it is better to create multiple spaces using the SPACE BAR since those spaces will always be the right number.
5. You may have noticed in the CAPACITY conversion table that the headings were strongly emphasized. Text-level markup is allowed inside the PRE element. However, not all tags are supported. If you need to mark up your text, you should do it after you set up all your text in the HTML document since mark up tags take up space in your HTML document but not on the page in the browser.
6. Because preformatted text is displayed in a monospaced font to retain the formatting, you cannot include tags that change the font of the text inside the PRE element. Images are also excluded because they can cause problems with alignment. An image can't be translated to a certain number of characters.
7. The <P> tag is not allowed inside the PRE element. If a browser encounters this tag, it will either ignore it or insert two blank lines. Using the <BR> tag will force one blank line. Keep in mind that with the PRE element, you don't need these tags as the ENTER key forces the lines breaks for you.
8. There is an optional WIDTH attribute that can be used to indicate how wide the text area is to be (for example: PRE WIDTH="50"). This would allow the browser to pick a font which fits the entire text in the window. However, you should keep in mind that the WIDTH attribute is not widely supported yet.

BLINKING TEXT

<BLINK>text text text</BLINK>

Discussion:

1. The BLINK element is a Netscape extension tag and is not part of HTML 3.2. While BLINK works great in Firefox and Netscape, it does not work in Explorer. Explorer just ignores the tag.
2. The BLINK element causes the text between the opening and closing tags to have a blinking affect. Depending on your browser, if it supports the BLINK tag, it will either make the text disappear and appear at regular intervals or a large white block continually appears and disappears behind the text.
3. You cannot blink text in the TITLE of your HTML document.
4. Images can be included in the BLINKING container element but they will not blink. Only text can blink.
5. Blinking text blinks in a slightly lighter shade of its normal set color.
6. Be aware that blinking text can be annoying to a visitor. With animated images, when the web page is loaded, the visitor can always click on the STOP button to stop the animation. Clicking on the STOP button will not stop text from blinking. Also, blinking words will continually draw attention to that one spot and, in some cases, can make it difficult to absorb the contents of the page. You will, however, find a good number of pages on the WWW that includes this blinking feature. Since blinking words will be irritating to some visitors, if you still want to use it, use it sparingly (no more than a few words on a page).

Here is the HTML coding to specify a comment.

<!-- your comment goes here -->

Note the following points:

1. A comment begins with "<!--" and ends with "-->".
2. Comments are used for describing things such as why a particular tag is being used and what effect was hoped to achieve. Comments are also a great way to add reminders to your text - reminders such as when to include, remove or update certain sections. Comments are also used to indicate the beginning and ending of a piece of code such as:

   <!-- BEGIN LINKEXCHANGE CODE -->
                             .
                             .
                             .
   

   <!-- END LINKEXCHANGE CODE -->

   Remember that while comments are invisible in the browser, they do appear when viewed in a text editor or when a viewer chooses SOURCE or DOCUMENT SOURCE from the VIEW menu in the browser.

3. If you want to state that your HTML document complies with HTML 3.2 standards then the following simplified comment line must be the very first line in your HTML document - before the HEAD tag:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

   The WWW Consortium has released a draft version of HTML 4.0 and if your HTML document complies with this draft, the DOCTYPE line must be:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eighteen |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca