HTML Formatting

You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from <h1> for the most important, to <h6> for the least important.

Here they are:

Code	Result
<h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6>	Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

The <strong> Element

To place a strong importance on a piece of text, use the <strong> element.

Code	Result
<p> <b>Attention:</b> Please leave the door open.</p>	Attention: Please leave the door open.

The <em> Element

You can place an emphasis on text by using the <em> element.

Code	Result
<p> Strawberries are <i>delicious</i>!</p>	Strawberries are delicious!

Line Breaks

You can force a line break by using the <br> element.

Code	Result
<p> Here is a <br />line break.</p>	Here is a line break.

Horizontal Rule

You can create a horizontal rule by using the <hr> element.

Code	Result
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)	Here's a horizontal rule... ...that was a horizontal rule :)

Unordered (un-numbered) List

To create an unordered list, use the <ul> element to define the list, and the <li> element for each list item.

Code	Result
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>	List item 1 List item 2 List item 3

Ordered (numbered) List

To create an ordered list, use the <ol> element to define the list, and the <li> element for each list item.

Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).

Code	Result
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>	List item 1 List item 2 List item 3

We will be covering more HTML elements throughout this tutorial, but before we do that, you should know about attributes.