Home » Technology » Website Creation » Part 3 - Formatting your Text

Part 3 - Formatting your Text

© Tracy Ryan

Now you’ve got some content on your web page, you’ll want to jazz it up a bit and personalise it a bit. This is where we come to the text formatting HTML tags. There’s a few different things we can do to make our text “stand out from the crowd” so to speak. The basic effects are pretty much the same as you’d find in any word processing package – bold, italic, and underlined text. The tags you use to create these text effects are as follows:

<B>Bold Text</B> gives Bold Text
<I>Italic Text</I> gives Italic Text
<U>Underlined Text</U> gives Underlined text.

Not really all that tricky, is it? You can also mix and match the above tags in various combinations to create different looks, such as text that is bold and underlined. One thing you’ll need to keep in mind if you wish to do this is a very important rule of HTML – don’t overlap your tags. What does that mean? Well, I’ll show you the right and wrong way…

<B><U>Bold Underlined Text</U></B> is the right way
<B><U>Bold Underlined Text</B></U> is the wrong way.

See how in the first example, the tags are “nested” inside each other, but in the second example they overlap each other? While the text would probably still be shown the way you meant it if you overlap in this example, things could get messy when you’re using more advanced HTML tags, so it’s best to do things “the right way” from the start, so you get into good habits.

Another interesting, but much less often used tag, is the one that produces monospace text. The default monospace font on most browsers is Courier. The tag you use to produce this effect is the <TT> tag with corresponding closing </TT> tag.

So if you were to use the following code…
<TT>This is monospace text.</TT>
You would see…
This is monospace text.

Another thing you can do to spruce up your web page is to use headings to divide your page up into sections. As seems to be the trend with HTML, the tags are very easy to remember, because they make sense! There are six different heading tags you can use, ranging from <H1> which gives the largest font size, down to <H6> which will give you the smallest font size. Of course, each of these tags comes with it’s closing </H1>, or </H6> tag.

<H1>Text</H1>
Looks like this.
<H2>Text</H2>
Looks like this.
<H3>Text</H3>

Looks like this.

<H4>Text</H4>

Looks like this.

<H5>Text</H5>

Looks like this.

The copyright of the article Part 3 - Formatting your Text in Website Creation is owned by Tracy Ryan. Permission to republish Part 3 - Formatting your Text in print or online must be granted by the author in writing.