Formatting Text in HTML

The Basics

There are several standard formats you can apply to a bit of text. These include bold, italic, underlining, super and sub script etc. These are fairly easy to do and require a different tag for each. We are going to use the tag for making text bold as an example. To make some text bold you just surround it with the <B> tags:

This will just turn the word "bold" into bold text on the page. The other tags are as follows:

• <B> Bold
• <I> Italic
• <EM> Emphasized
• <STRONG> Strongly emphasized
• <TT> Monospaced font (like a typewriter)
• <U> Underlined
• <S> Strikethrough
• <SUB> Subscript
• <SUP> Superscript

Those are the main basic formatting tags. Remember you can nest different formatting tags within each other. This lets you make a word out of some bold text italic:

Fonts, Color and Size

You can change the font, color and size of a piece of text just by using the <FONT> tag. This is done by changing the 'attributes' of the tag to suit your needs. There are three attributes which you can change the 'FACE' attribute to change the font face, the 'COLOR' attribute to control the color of the text, and the 'SIZE' attribute to change the size of text:

Below I'll discuss some of the possible values for these attributes...

Font Face

You should be careful when using fonts in your pages. For a user to view a font that you have specified they must have it installed on their computer. You can get around this by specifying a list of fonts to go through before the default font is used. This means if the user doesn't have your first choice font installed then it will check to see if it has your second choice font then third etc. You just list the font names separated by commas in the 'FACE' attribute:

It is always a good idea to specify more than one font just to make sure your page looks how you want it. Design Tip: Don't use too many fonts throughout your web site. It looks ugly and confusing.

Color

There are two ways to set the color value. You can either use the color name or you can use the hex value. It is recommended to use the hex value so that all browsers use the colors. A hex code is a numerical value for the color in a red, green and blue combination. An example of the code to make the text red would be:

The hex code should always be preceded by a hash mark. Remember: The spelling of color should always be the American way for it to work.

Size

You can control the size of the font you are outputting in two ways. You can either specify a specific value which will display (nearly) the same in most browsers or you can specify a relative value which will increase or decrease the size of the text based on the user settings. This means that if the person has the default text larger than normal to make it easy to read then the text will still be relatively sized. If you use a specific value they might not be able to read it, and the sizes of the text would look strange if some were at default size.

To make a specific text size appear on your page you just use the text size number in the 'SIZE' attribute:

A relative text size value is preceded with a plus or minus symbol such as:

It is better to use relative values than specific values as it improves web accessibility (a later article will be published on this subject).

Now you know how to format text in many ways. Remember though to make your pages all have just one or two fonts and colors. Any more and it gets hard to read, confusing and distracting

HTML TUTORIAL: Next Article - Linking in HTML; Previous Article - A Basic HTML Page