SiteDesignTutorial.com

Adding formatting Underline to html text.


So you know how to make a text bold and italic. If it's not clear, you can always return to Bold html and Italic html chapters and get a refresher.

Let's carry on with the Underline tutorial.

Just like Bold, underline also uses a similar format, but here instead of <b> we use <u> . You already had a hint, didn't you?

Using our previous example of Hello World, we will do some underline text now.
Open your document in notepad. Don't tell me you don't remember it...

Place your cursor at the start of the text you want to underline, and type:


<u>



Now go where you want the underline to end and type:


</u>



If you wanted to italic the whole line, (hello world!), then your html looks like this:


<u>Hello World!</u>



Save and refresh.

Just like Bold, you can also underline single words, or even alphabets. See these examples below:

Hello World! (Code: <u>Hello</u> World!)
Hello World! (Code: <u>H</u>ello World!)

Note:
All the tags you have learnt till now use the closing tag. If you forget to close a tag, the entire page will get the formatting which is left open.

Mixing formatting tags: Bold Italic and Underline



See this text below:


Bolded, Italicized, and Underlined



It's bold, italic and underlined. How do you do that?

Simple, use all the tags you want, however there's an order to be followed.
The html code used in the previous example is:


<b>
<i>
<u>
Text goes here
</u>
</i>
</b>



You can put that all in 1 single line, but notice the order of html tags.


<b> Bold opened.
<i> Italic opened.
<u> Underline opened.

Text here

</u> Underline closed. (This was the last opened, first closed.)
</i> Italic closed. (Tag opened just before underline. Closed just after underline)
</b> Bold closed. (Opened first, closed last.)



You got to follow the same order for all html you will use. This is important otherwise you might end up confusing some browser softwares. Your html web page will not look good if that happens.

Take a look at the Basic layout of html page and you will notice that it follows the same pattern.

In the later chapters you will also learn about validating your html and if you make a mistake in this format, you will have a very hard time validating your html.

Let's continue and learn how to use different colors for the text.

SiteDesignTutorial arrowHTML Text color size face