Keep It Simple

Low Profile Type

It is not always easy to convey information in simple and consice terms. Keeping your message simple, readable, and not distracting the reader with heavily formatted type increases your chances of allowing your message to reach the reader.

Short paragraphs with a lot of white space can help, as well.

What follows are rules of the road for formatting type in HTML pages. It is rather lengthy and does have a tendancy to be heavily formatted. It may help to jump to a particular topic of interest using the unabridged index.

Headings

HTML allows for six (6) levels of headings. Remember that each user can configure their browser to display some aspects of HTML in different ways. Also window sizes are different so text may not flow exactly as you may expect.

The code for headings is enclosed with <H1>...</H1> tags.

Code:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of Headings
               </TITLE>
          </HEAD>
          <BODY>
               <!-- This text is commented out -->
               <H1>This is Heading Level 1</H1>
               <H2>This is Heading Level 2</H2>
               <H3>This is Heading Level 3</H3>
               <H4>This is Heading Level 4</H4>
               <H5>This is Heading Level 5</H5>
               <H6>This is Heading Level 6</H6>
               <P>This is normal paragraph type</P>
          </BODY>
     </HTML>

Result:
This is Heading Level 1

This is Heading Level 2

This is Heading Level 3

This is Heading Level 4

This is Heading Level 5

This is Heading Level 6

This is normal paragraph type

Styles

HTML allows text to be stylized using physical style tags, logical style tags, and with some other, special HTML tags.

Physical style tags indicate how the text is to be formatted (bold, italic).

Logical style tags indicate how the text is to be applied (citation, code). This is not very clear until you see the examples.

Physical Style Tags

Physical style tags indicate how text is to be displayed as follows:

Bold: Ex: This is bold type.
Tags: ...
Italic: Ex: This is italic type.
Tags: ...
Monospace: Ex: This is monospaced type.
Tags: <TT>...</TT>

There are also new physical style tags in HTML 3.2.
Since some browsers may not support new style tags, substitutions may occur, giving unpredictable results. New in HTML 3.2:

Underline: Ex: This is underlined type.
Tags: ...
Strike Through: Ex: ~~This is strke through type.~~
Tags: <S>...</S>
BIG: Ex: This is BIG type.
Tags: <BIG>...</BIG>
Small: Ex: This is SMALL type.
Tags: ...
Subscript: Ex: _{This is SUBSCRIPT type.}
Tags: ...
Superscript: Ex: ^{This is SUPERSCRIPT type.}
Tags: ...

Physical style tags may be nested, but the result is browser-dependent (only one of the tags may be displayed):

Example: Bold Italic Type
Tags: Bold, Italic Type
Results: Bold, Italic Type

Example: BIG Monospaced Type
Tags: <BIG><TT>BIG, Monospaced Type<TT><BIG>
Results: BIG, Monospaced Type
Note that the last tag that was opened is the first to be closed.

Logical Style Tags

Logical style tags indicate how text is to be used as follows:

Emphasize: Ex: This is emphasized type.
Tags: ...
Strong: Ex: This is STRONGer than Emphasized type.
Tags: ...
Code: Ex: This is CODEd type.
Tags: <CODE>...</CODE>
Sample: Ex: This is SAMPLE type.
Tags: <SAMP>...</SAMP>
Citation: Ex: This is CITATION type.
Tags: <CITE>...</CITE>
Definition: Ex: This is a DEFINITION.
Tags: <DFN>...</DFN>
Keyboard: Ex: This is intended to be KEYBOARDed.
Tags: <KBD>...</KBD>
Variable: Ex: This is to be used for VARIABLEs.
Tags: <VAR>...</VAR>

Preformatted Text

Your browser will generally strip any extra white space in a file.

This     line     would     appear     the     same     as
this line except for the <PRE>...</PRE> tags

Text formatted within the <PRE>...</PRE> tags will be displayed in a monospaced font like Courier. It is like doing tables of type on a typewriter or ASCII graphics on a dot-matrix printer:

THINK DOT MATRIX:
12345678901234567890123456789012345678901234567890
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
X                                                X
X    TTTTT H  H  I  NN   N  K  KK                X
X      T   H  H  I  NNN  N  K KK                 X
X      T   HHHH  I  N NN N  KKK                  X
X      T   H  H  I  N  NNN  K KK                 X
X      T   H  H  I  N   NN  K  KK                X
X                                                X
X     DDD    OO  TTTTT                           X
X     D  D  O  O   T                             X
X     D  D  O  O   T                             X
X     DDD    OO    T                             X
X                                                X 
X     MMM MMM   AA   TTTTT  RRRR    I  X   X     X
X     M MMM M  A  A    T    R   R   I   X X      X
X     M  M  M  AAAA    T    RRRR    I    X       X
X     M     M  A  A    T    R  RR   I   X X      X
X     M     M  A  A    T    R   R   I  X   X     X
X                                                X
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The code samples in other parts of this page were done using the <PRE>...</PRE> tags.
Notes:

It is best to keep lines as short as possible to keep your readers from scrolling to the right.
Break lines with the return character
Tabs may not be the same from one browser to the next
Text inside the <PRE>...</PRE> tags can use link tags and style tags (so if you are doing special things like HTML tags, you need to use special characters like this:
<PRE>...</PRE> for <PRE>...</PRE>

Special Characters

A special character is any character that requires a key combination anything more complex than holding down the shift key to be produced. Getting special characters to display properly involves the use of character entities. There are two forms of character entities: numbered entities and named entities.

Numbered entities have a hash (or pound sign) followed by a number to identify the character. Like named entities, they also start with an amperstand and end with a semicolon. Examples:

     &#38; produces & (Amperstand)
     &#34; produces " (Quotation mark)
     &#169; produces © (Copyright)
     &#174; produces ® (Registered trademark)

Named entities have a special name for the character they represent. They start with an amperstand and end with a semicolon. Examples:

     &amp; produces & (Amperstand)
     &quot; produces " (Quotation mark)
     &copy; produces © (Copyright)
     &reg; produces ® (Registered trademark)

The characters used to define HTML tags have special codes. The characters: <, >, &, and " are used in the HTML tags and, if typed as ASCII characters in a line of type, will confuse Web browsers that are trying to interpret HTML tags. For these codes to be reproduced correctly, even with the <PRE>...</PRE> tags, codes must be used. Numbered entities will work, but the named entities have a shorthand for these characters. They also start with an amperstand and end with a semicolon. Examples:

     &lt; produces < (Less than)
     &gt; produces > (Greater than)
     &amp; produces & (Amperstand)
     &quot; produces " (Quotation mark)

Line Breaks

Web browsers ignore white space in HTML code. If you include extra spaces or returns in your file, they will be condensed into a single space. In order to force a line break, the tag can be used. Simply add this tag where you want the break to occur. Example:

This line will break as follows: Forcing line breaks is really simple stuff!

This line will break as follows:
Forcing line breaks
is really
simple stuff!

By contrast, if you do not want a line to break, you can force the type to remain on a single line using ... tags. The extension (word break) may be used inside the ... tags to indicate where a break may occur. The tag does not force a line break, but will break the type if it is appropriate. If the line of type fits on the screen, the tag is ignored.

ADDRESS Tag

The <ADDRESS> tag is used to sign-off on Web pages. They usually go at the bottom of the page and contain the name of the Webmaster (or company that created the page), a contact person, the date the last time the page was updated, copyright notices, and anything else that seemed important at the time the page was done. They are usually offset by a horizontal rule. Example:

     <ADDRESS>
     <HR>
     <BR>
     Last updated 1 December 1996<BR>
     Created by Ken Kaleta: kenk@servtech.com<BR>
     Copyright Ken Kaleta 1996 all rights reserved
     </ADDRESS>

Result:

Last updated 1 December 1996
Created by Ken Kaleta: kenk@servtech.com
Copyright Ken Kaleta 1996 all rights reserved

Quotations

Although <CITE>...</CITE> and <CODE>...</CODE> will bring emphasis to short quotes, bits of code, math equations, book and magazine titles and the like, HTML employs the <BLOCKQUOTE>...</BLOCKQUOTE> tags for longer quotes. Generally, the format is to give the quote some space above and below, and to indent the text. Line breaks can be used to force breaks. The following poem is within <BLOCKQUOTE>...</BLOCKQUOTE> tags:

There are little eyes upon you
and they're watching night and day;
There are little ears that quickly
take in every word you say;
There are little hands all eager
to do everything you do;
And a little child who's dreaming
to be as nice as you.
You're the little child's idol,
You're the wisest of the wise;
From these little eyes,
No suspicions ever rise.
There's a little wide-eyed child
who believes you're always right;
Who's ears are always open
and who watches day and night;
You are setting an example
Everday in all you do;
for the little child is waiting
to grow up to be like you.
S.H.Podlas

BLINK Tag

The <BLINK>...</BLINK> tags will set type to blink. This is often very annoying and should be avoided. The following type is set to blink:
This type is set between the <BLINK>...</BLINK> tags

Lists

HTML supports several kinds of lists including:

Ordered lists (numbered or lettered)
Unordered lists (bulleted)
Menu lists
Directory lists
Glossary lists (term/definitions lists)

Ordered Lists

Usage: Lists that are numbered or lettered. Also for outlines.
Tags: <OL>...</OL>
List elements defined by: <LI>
Attributes:

TYPE defines numbering scheme for list
- TYPE=A for capital letters (A, B, C)
- TYPE=a for lowercase letters (a, b, c)
- TYPE=I for capital roman numerals (I, II, III)
- TYPE=i for lower case roman numerals (i, ii, iii)
- TYPE=1 for numbers,the default (1, 2, 3)
START is always specified as a number. The browser will convert the starting value to its proper TYPE.
COMPACT attribute may be used to reduce displayed size

Examples of ordered lists:

Simple ordered list
Nested ordered list using TYPE and START with COMPACT
Outline

Code example of simple ordered list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of simple ordered list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of ordered list:
               <OL>
                    <LI>First element in the list
                    <LI>Second element in the list
                    <LI>Third element in the list
                    <LI>Fourth element in the list
               </OL>
               </P>
          </BODY>
     </HTML>

Result:

Example of ordered list:

First element in the list
Second element in the list
Third element in the list
Fourth element in the list

Code example of nested ordered list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of nested ordered list
                    using TYPE and START with COMPACT
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of ordered list:
               <OL COMPACT TYPE=A START=8>
                    <LI>Eighth element
                    <LI>Ninth element
                    <OL TYPE=a>
                         <LI>First nested
                         <LI>Second nested
                         <LI>Third nested
                         <LI>Fourth nested
                    </OL>
                   <LI>Tenth element
                   <LI>Eleventh element
               </OL>
               </P>
          </BODY>
     </HTML>

Result:

Example of ordered list:

Eighth element
Ninth element
1. First nested
2. Second nested
3. Third nested
4. Fourth nested
Tenth element
Eleventh element

Code example of outline:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of outline
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of ordered list:
               <OL TYPE=I START=11>
                    <LI>Point Eleven
                    <LI>Point Twelve
                    <OL TYPE=a>
                         <LI>Sub point 1
                         <LI>Sub point 2
                         <LI>Sub point 3
                         <LI>Sub point 4
                    </OL>
                   <LI>Point Thirteen
                   <LI>Point Fourteen
               </OL>
               </P>
          </BODY>
     </HTML>

Result:

Example of ordered list:

Point Eleven
Point Twelve
1. Sub point 1
2. Sub point 2
3. Sub point 3
4. Sub point 4
Point Thirteen
Point Fourteen

Unordered Lists

Usage: Lists that are bulleted.
Tags: <UL>...</UL>
List elements defined by: <LI>
Attributes:

TYPE defines bulleting scheme for list
- TYPE=DISC is a solid bullet
- TYPE=CIRCLE fis a hollow bullet
- TYPE=SQUARE is a solid square
COMPACT attribute may be used to reduce displayed size

Examples;

Code example of simple unordered list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of simple unordered list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of unordered list:
               <UL>
                    <LI>First element in the list
                    <LI>Second element in the list
               </UL>
               </P>
          </BODY>
     </HTML>

Result:

Example of unordered list:

First element in the list
Second element in the list

Code example of nested unordered list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of nested unordered list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of unordered list:
               <UL TYPE=DISC>
                    <LI>First element in the list
                    <LI>Second element in the list
                    <UL TYPE=CIRCLE>
                         <LI>Sub list 1
                         <LI>Sub list 2
                         <UL TYPE=SQUARE>
                              <LI>Sub sub list 1
                              <LI>Sub sub list 2
                         <LI>Sub list 3
                         </UL>
                    <LI>Third element in the list
                    </UL>
               </UL>
               </P>
          </BODY>
     </HTML>

Result:

Example of unordered list:

First element in the list
Second element in the list
- Sub list 1
- Sub list 2
  - Sub sub list 1
  - Sub sub list 2
- Sub list 3
Third element in the list

Menu Lists

Usage: Short lists of items usually with no bullets or other markings.
Note: MENU lists are not commonly used and no longer exist in HTML 3.2. It is probably best to avoit them.
Tags: <MENU>...</MENU>
List elements defined by: <LI>
Attributes: None
Examples:

Code example of menu list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of menu list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of menu list:
               <MENU>
                    <LI>First element in the list
                    <LI>Second element in the list
                    <LI>Third element in the list
                    <LI>Fourth element in the list
               </MENU>
               </P>
          </BODY>
     </HTML>

Result:

Example of menu list:

First element in the list

Second element in the list

Third element in the list

Fourth element in the list

Directory Lists

Usage: Short lists of items usually with no bullets or other markings.
Note: DIRectory lists are not commonly used and no longer exist in HTML 3.2. It is probably best to avoid them.
Tags: <DIR>...</DIR>
List elements defined by: <LI>
Attributes: None
Examples:

Code example of directory list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of directory list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of directory list:
               <DIR>
                    <LI>First element in the list
                    <LI>Second element in the list
                    <LI>Third element in the list
                    <LI>Fourth element in the list
               </DIR>
               </P>
          </BODY>
     </HTML>

Result:

Example of directory list:

First element in the list

Second element in the list

Third element in the list

Fourth element in the list

Glossary Lists

Usage: Kind of like a dictionary. Each item in the list has two parts, the term and the definition. They are also called definition lists.
Tags: <DL>...</DL>
List elements defined by: <DT> for the TERM, <DD> for the DEFINITION
Attributes:

COMPACT

Examples;

Code example of glossary list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of glossary list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of glossary list:
               <DL>
                    <DT>Red<DD>Primary
                    <DT>Blue<DD>Primary
                    <DT>Yellow<DD>Primary
                    <DT>Orange<DD>Red and Yellow
                    <DT>Green<DD>Blue and Yellow
                    <DT>Purple<DD>Red and Blue
               </DL>
               </P>
          </BODY>
     </HTML>

Result:

Example of glossary list:

Red: Primary
Blue: Primary
Yellow: Primary
Orange: Red and Yellow
Green: Blue and Yellow
Purple: Red and Blue

Code example of glossary list:

     <HTML>
          <HEAD>
               <TITLE>
                    Example of glossary list
               </TITLE>
          </HEAD>
          <BODY>
               <P>Example of glossary list:
               <DL COMPACT>
                    <DT>RGB
                    <DD>Red, Green, Blue
                    <DT>HSV
                    <DD>Hue, Saturation, Value
                    <DT>CMYK
                    <DD>Cyan, Magenta, Yellow, Black
                    <DT>LAB
                    <DD>Color space that 
                    includes all of the above
               </DL>
               </P>
          </BODY>
     </HTML>

Result:

Example of glossary list:

RGB: Red, Green, Blue
HSV: Hue, Saturation, Value
CMYK: Cyan, Magenta, Yellow, Black
LAB: Color space that includes all of the above

Size

You can specify a relative or absolute SIZE to a font. The valid SIZEs are 1 to 7. The default is 3. Using the + or - characters will increase or decrease the SIZE by that amount. The sizes are shown below:

THIS IS SIZE 1
THIS IS SIZE 2
THIS IS SIZE 3
THIS IS SIZE 4
THIS IS SIZE 5
THIS IS SIZE 6
THIS IS SIZE 7

The font SIZE is specified between the ... tags. Here are some examples; I separated them with short horizontal rules to make it less confusing and note that the actual code is in the default font:

Code: This will be 2 SIZEs larger than the default
Result: This will be 2 SIZEs larger than the default

Code: Start with default, add 4, subtract 2, and remember to use the closing tags to get back to normal.
Result: Start with default, add 4, subtract 2, and remember to use the closing tags to get back to normal.

Code: The SIZE tag is great for Large Initial Capital Letters.
Result: The SIZE tag is great for Large Initial Capital Letters.

And THAT IS THE LAST of the text size examples.

Alignment

Text can be aligned using the LEFT, CENTER, and RIGHT attributes. The default is LEFT. Examples are as shown:

Code: CENTER THIS TYPE
Results:

CENTER THIS TYPE

Code: <H2 ALIGN=RIGHT>PUSH IT TO THE RIGHT</H2>
Results:

PUSH IT TO THE RIGHT

Color

Yes, you can change the color of type in your Web page. Remember, each Web browser will be configured a little differently and what you see on your machine is not what someone else will see. Links that have been explored and links that have not been explored often have different colors and changing the text color may annoy or confuse your readers. That is all I have to say about it here. For more information, you will have to check out the section on color.