Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square The Basics
square What are tags?
Square Making a first page
Square Basic formatting
Square Fonts-color and size
Square Styling your text
Square Writing 'good' HTML
Square Adding comments
  In the last section we learned how to change the appearance of text using the <font> tag. We saw how to change the color, size and font-face of the text.
In this section we'll see how to use other tags to alter the appearance of text.

To make a section of text be displayed as bold text, we need to use the <b> tag. b is short for bold. As usual, the text between the opening and closing tags are affected, e.g. -
<b>The text to be made bold</b>

To make a section of text appear underlined, we would use the <u> tag, which is short for underlined. Example code -
<u>The text to be made underlined.</u>
Underlined text should be avoided where possible, as it can confuse users, who expect the text to be a link.

To make text appear italicized, we use the <i> tag. You can probably guess that i is short for italics, or italicize. Example code -
<i>The text to be made italicized goes here.</i>

Another tag in this family is the <s> tag, which is short for strike, or strikethrough. This is rarely used, for obvious reasons. It makes text appear with a line through it, like this. Example code -
<s>The text to be affected goes here.</s>

Two other similar tags, although rarely used, are <sup> and <sub> which stand for superscript and subscript respectively. Superscript text appears like this, and subscript text looks like this. Example code -
<sup>The text to be superscript here.</sup>
<sub>The text to be subscript here.</sub>

Mixing style tags

With all these tags, including the <font> tag which we looked at in an earlier section, you can mix, or nest tags to create different results. If you do this, it's important to nest your tags correctly. For example, let' say we want to have some text appear as both bold and underlined. The correct HTML to achieve this would be either-

<b><u>The text to be bold and underlined goes here.</u></b>
or alternatively -
<u><b>The text to be bold and underlined goes here.</b></u>
Giving this effect .
So the first tag to be opened is the last one to be closed. An incorrect way to do this would be -

<u><b>The text to be bold and underlined goes here.</u></b>
So as long as you are careful to nest your tags correctly, you can mix as many different style tags as you want. For (an extreme!) example -

<font color="red" size="6" face="fantasy"><b><u><i>Gives this effect.</i></u></b></font>

Gives this effect.

OK, now we're getting somewhere. We've taken a look at the many ways we can change the appearance of text in the page, and how we can structure the page with paragraphs, line breaks and horizontal rules. Now, we'll take a brief look at how to write 'good' HTML, and then learn how to use comments in our code.

TopTop of page - BackBack to font colors, faces and sizes - Next - Writing 'good' HTMLNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference