Article - Character Formatting In HTML

Host your site on our high performance virtual domain and non-domain accounts.

Let Netpanel design your web site the way you want it.

Submit your web site to 15 major search engines quickly and easily at no charge.

Download some of our free 32-bit software programs for Windows.

Find every news story, article, and special feature ever published on Netpanel.

Take a moment to fill out our quick survey, and earn a free utility in the process.

Character formatting in HTML
Published on 6/14/97

There are many ways to format text in web pages using plain old HTML. Many people are not aware of the variety of styles that can be achieved, and as a result, they resort to hefty graphics instead. If you take a moment to learn how to control text with HTML, you'll be making your web site more bandwidth-friendly, and probably more appealing.

We'll start off with the basics. Most people know how to use the standard formatting tags, such as bold, italics, and underline. The following examples show some of these common tags and the resulting text.

Bold text

Italic text

Underlined text

<S>~~Strikethrough text~~</S>

These tags, of course, can be layered to create styles such as this one:

Combination text

Another commonly used text-controlling tag is the heading tag. Actually, it is a set of six different tags that create six different heading styles. They follow the pattern <H1></H1>, <H2></H2>, and so on. Part of their function is to modify the size of the text; however, the simplest method of controlling text size is to use the BIG and SMALL tags. Here is an example of how to use them:

Small text

<BIG>Big text</BIG>

There are also many tags that can control the font style of the text on your web page. Many of these tags are redundant, but the three most useful are the fixed-width font, the pre-spaced font, and the source code font. The fixed-width style, which resembles text from a typewriter, is achieved by using the <TT></TT> element, while the source code font uses the <CODE></CODE> element. The pre-spaced font, which uses the <PRE></PRE> element, allows you to arrange the layout of the text in the HTML source code. It will then be displayed the same way in your browser.

Another set of tags that many people aren't aware of are the subscript and superscript tags. The superscript style is useful for designating trademarks, such as Netpanel^tm, and when displaying ordinal numbers, like 1^st, 2^nd, and so on. The subscript tag is useful for chemical notation, such as H₂O. Both of these styles are demonstrated below:

^{Superscript text}

_{Subscript text}

Now that we have covered the basics, we can move on to the more powerful ways of formatting text in HTML. By using the FONT tag, along with its attributes, you can create a large variety of styles. You can modify the size of the text, change the color of the text, and change the font. All of the FONT tag's features are shown below:

Sample text

Sample text

Sample text

As you have seen, the FONT tag is very versatile. One final text-formatting tag, the BASEFONT tag, is used at the beginning of a document. It sets the standard style of text for the entire web page, and is controlled by the same attributes as the FONT tag. When you use this tag, all unformatted text on the page will change to match the BASEFONT settings. You can then use the FONT tag in a slightly different manner to control the text size. Here is a demonstration:

<BASEFONT SIZE="3" FACE="Comic Sans MS" COLOR="#990099">

Some unformatted text in the document, now controlled by the basefont settings.

Some more text controlled by the basefont settings, but influenced by a second size setting.

As shown above, the SIZE attribute of the FONT tag will support such things as -1, +2, +4, etc., which change the text size relative to the BASEFONT settings.

Hopefully this article has shown you some things you didn't already know before. If it did, we encourage you to use what you've learned here on your own web site. Doing so can improve its appearance, without needing to rely on graphics. Don't be fooled into thinking that text created with HTML is dull and boring, because it certainly doesn't have to be.