We sometimes find ourselves wanting to make lists, or an outline of certain items or, if we have a blog, a list of our friends names, which would look like this:

• John
• Mary
• Annie
• James
• Anthony

And usually, write the HTML code for that as:

John<br>
Mary<br>
Annie<br>
James<br>
Anthony<br>

The Solution: HTML

HTML actually has a function of creating lists; two kinds in fact: ordered lists and unordered lists. Ordered lists create the list using either numerals or letters, like shown below:

1. John
2. Mary
3. Annie
4. James
5. Anthony

The best thing about ordered list is that it doesn’t matter in what order you write the list, the first item will always have the first number/letter in the list. So even if you rearrange the list, the top item will still be ordered first.

Unordered lists create our list in any order, that is, the items do not follow any sequence, like shown below. They also make use of bullets instead of numbers/letters.

• John
• Mary
• Annie
• James
• Anthony

The Codes: HTML

So how do we achieve this in HTML? Simple follow the HTML codes below.

Ordered List

<ol>
<li>John
<li>Mary
<li>Annie
<li>James
<li>Anthony
</ol>

Unordered List

<ul>
<li>John
<li>Mary
<li>Annie
<li>James
<li>Anthony
</ul>

Ordered lists are indicated by the <ol> and </ol> as the start and the end of the list; while unordered lists are indicated by <ul> and </ul>. Individual items on the lists are indicated by the HTML tag <li>. To add another item on the list, just type the <li> tag followed by the item.

The Code: XHTML

Since XHTML requires that all tags be closed, we would have to change the <li> to <li /> or to add an ending list tag </li> like below:

Example List Type 1

<ol>
<li />John
<li />Mary
<li />Annie
<li />James
<li />Anthony
</ol>

Example List Type 2

<ol>
<li>John</li>
<li>Mary</li>
<li>Annie</li>
<li>James</li>
<li>Anthony</li>
</ol>

Creating List with Cascading Style Sheets Formatting

Lists can be further formattted using Cascading Style Sheets. Adjustments can be made in the margins, borders, backgrounds and even in the use of image bullets.

Headers are used to bring attention to certain topics in our web pages and they can have up to several subheaders in one main header. They are mostly used to format titles for articles or sections in heirarchy. Below are examples of headers and varying subheaders up to six levels.

The Code: (X)HTML

<h1>This is a h1 header</h1>
<h2>This is a h2 header</h2>
<h3>This is a h3 header</h3>
<h4>This is a h4 header</h4>
<h5>This is a h5 header</h5>
<h6>This is a h6 header</h6>

Example:

The Output

The Code

<h1>This is your main header</h1>
This is where you put general stuff regarding your main topic.
<h2>This is your subheader</h2>
Place for information that is more specific to your subtopic.

Advantages of Using Headers

Proper use of headers can be advantageous to you, especially in giving your site free traffic from search engines. Search engine spiders (robots who log your site) visit your site and determine your site theme by your content, particularly the headers. If a visitor visits a search engine and types a topic that closely matches your headers, your site will be one of the search engine’s result! This guarantees free traffic to your site!

Creating Headers with Cascading Style Sheets Formatting

Headers can be further formattted using Cascading Style Sheets. Adjustments can be made in the margins, borders, background colors and even in the use of background images.