Basic Text Format

There are a variety of fonts and special effects available to make your HTML documents more attractive and easier to read. On this page we will examine fonts, headers, spacing, and horizontal lines.

Fonts

Fonts or type faces will depend on the web browser being used. The most generic fonts are emphasis and strong. Most web browsers will interpret the strong font as boldface but the emphasis font may be shown as italics or, especially if the browser cannot handle images, underlined text. To give a word or phrase emphasis, simply surround it with the tags <EM> and </EM>. To make a word or phrase strong, use the tags <STRONG> and </STRONG>. Alternatively, you may use the specific or physical fonts bold, italic, and teletype. The tags for bold are <B> and </B>; the tags for italic are <I> and </I>; and the tags for teletype are <TT> and </TT>.

There are a number of special effects on offer. You can get big text by surrounding it by the tags <BIG> and </BIG>. In the same manner, the tags <SMALL> and </SMALL> will give you small text. Underlining is also possible but should be avoided as it may be difficult to distinguish between underlined text and links. Superscripts and subscripts are used in a variety of ways. Surround the text with the tags <SUP> and </SUP> to get a superscript like this: October 19^th. The tags <SUB> and </SUB> are used in subscripting: H₂O.

The <FONT> and </FONT> tags can be used to alter the size and/or colour of the text it surrounds. However, this tag may be phased out of future versions of HTML.

Headers

Headers are the titles of pages or subsections of pages. For instance, this page has headers called Basic Text Format, Fonts, Headers, Spacing, and Horizontal Lines. Notice that the first header is bigger than the rest. It is possible to have up to six different sizes of headers. Here are examples of each.

Compare Sizes

Use the tags <H1> and </H1> to get this size of header.

Compare Sizes

Use the tags <H2> and </H2> to get this size of header.

Compare Sizes

Use the tags <H3> and </H3> to get this size of header.

Compare Sizes

Use the tags <H4> and </H4> to get this size of header.

Compare Sizes

Use the tags <H5> and </H5> to get this size of header.

Compare Sizes

Use the tags <H6> and </H6> to get this size of header.

The largest header is usually used at the top of the page with smaller headers below as needed. The default alignment is flush left but to get a centered header, use ALIGN="CENTER" in the opening header tag. Right-justification is obtained by using ALIGN="RIGHT".

Spacing

For the most part, you are at the mercy of the browser when it comes to the arrangement of lines on a document. However, you can control the spacing to some extent. For instance,
if
you
require
line
breaks
in
certain
places,
you can use the <BR> (break) tag at the end of the line. The source code for

Mary had a little lamb,
Its fleece as white as snow.

<P>
<EM>Mary had a little lamb,</EM><BR>
<EM>Its fleece as white as snow.</EM>
<P>

To force a new paragraph (which has the effect of putting in a blank line in some browsers), use the <P> tag in the appropriate place. It is possible to control the alignment of the text within a paragraph. Flush left is the default but if centered text is required, then the tag <P ALIGN="CENTER"> should be used before the text block. The source code for

Mary had a little lamb,
Its fleece as white as snow.

<P ALIGN="CENTER">
<EM>Mary had a little lamb,</EM><BR>
<EM>Its fleece as white as snow.</EM>
<P>

Right justification is achieved by changing ALIGN="CENTER" to ALIGN="RIGHT" in the paragraph tag. The source code for

Mary had a little lamb,
Its fleece as white as snow.

<P ALIGN="RIGHT">
<EM>Mary had a little lamb,</EM><BR>
<EM>Its fleece as white as snow.</EM>
<P>

Horizontal Lines

To get a horizontal line, simple use the tag <HR> (horizontal rule). There are assorted attributes for this tag that allow you to change a horizontal rule's alignment, size, and shading. By default, a horizontal rule is centered and extends all the way across the page.

[HTML Tutorial Home Page] [Previous Page] [Next Page]