HTML has six levels of headings. H1 is the most important, H2 is slightly less important, and so on. The final heading is H6, and it's rarely used because it produces very small text. For most cases, first‐ and second‐level headers do the job, giving you text larger than the main body text, and they are also usually bold. You can implement header tags like this:

<h1>The most important heading ever</h1>

Like a light switch, the tag is turned on before the first letter of your header and turned off after the last character.

All headers are implemented the same way — just substitute the number 1 with a 2, 3, 4, 5 or 6:

<h2>The second most important heading ever</h2>

Figure 5-1 shows each of the header tags as the browser interprets and displays them.

Figure 5.1.  Figure 5-1: Headers from the largest to the smallest.

Headers are interesting because they have more than just an effect on how your text looks: Search engines understand that text defined by a header tag is important, so words and phrases you enclose in a header will be marked as especially relevant to your site.

To create paragraph breaks, you need to start the new paragraph with a <p> tag. The closing </p> is placed at the end of the paragraph after the text, like this (see Figure 5-2 for how the browser displays this code):

<p>Paragraph one has amazing text in it.</p>
<p>Paragraph two has amazing text in it too.</p>
<p>Paragraph three is being neglected by the first and second paragraphs.</p>

Most blogging software makes provision for paragraph breaks automatically, but if you ever end up looking at the code, you'll be able to recognize these fundamentally important tags. On most Web sites, paragraph breaks actually produce the effect of two line breaks, so that paragraphs are spaced out from each other in the same way they are in this book.

You can end a line of text and start the next word on a new line by using a <br> tag. These are standalone tags that you need to insert only once — which makes sense! To create a line break, here's what you do:

Break your line of text<br>
and start again on the next line.

An unordered list is a series of bulleted items and is used for lists that do not require numbering. For example, if you want to create a list of cat breeds, you don't need to list them in any particular order. But if you were ranking the breeds from 1 through 5, you would want to make sure the number one breed is at the top. Unordered lists use the <ul> and <li> tags. Set up the code as I do in this list of kinds of chocolate:

<ul>
<li>Milk.</li>
<li>Dark.</li>
<li>White.</li>
</ul>

The <ul> tag stands for unordered list, and is turned on at the beginning of the list, and turned off following the last item in the list. The <li> tag stands for list item; it gets turned on at the beginning of each new item and turned off at the end of that item. Figure 5-4 shows an unordered list.

Figure 5.4.  Figure 5-4: Use unordered lists to bullet items.

An ordered list contains items that are ranked, or must be listed in a particular order, like a list of ranks or preferences. It may also indicate a list of steps for the reader to follow. Format an ordered list just the way you format an unordered list, substituting the <ol> tag for the <ul> tag (see Figure 5-5 ):

<ol>
<li>Get a graham cracker.</li>
<li>Lay on a piece of chocolate.</li>
<li>Add a toasted marshmallow.</li>
<li>Add a second graham cracker on top, squish marshmallow, and eat.</li>
</ol>

Always make sure you're closing the lists with the appropriate closing tag.

The third type of HTML list is the definition list. This type of list gives a term and then its definition and has built‐in spacing to lay those elements out properly. Each list starts with a <dl> tag and closes with the </dl> tag. Each term starts with a <dt> tag and each definition starts with a <dd>. Sound confusing? Well, it is, a little. This is definitely one of the most complicated HTML tags:

<dl>
<dt>Milk chocolate.</dt>
<dd>Makes a standard smore; a workmanlike choice.</dd>
<dt>Dark chocolate.</dt>
<dd>Makes a designer smore; clearly the superior choice.</dd>
<dt>White chocolate.</dt>
<dd>Pretends to be chocolate, but isn't; a poor choice.</dd>
</dl>

Figure 5-6 shows how a definition list looks in a Web browser. Pretty neat, huh?

Make sure to close each of the tags with their matching tags. The end tags </dt> and </dd> shouldn't be left off.

Figure 5.6.  Figure 5-6: Definition lists are used for glossaries.

You can embed a list inside another list. In fact, you can even embed a different kind of list into a list. Each time you embed a new list, additional indenting is creating, giving you a nice stair‐stepped look in your final page.

Here's how you should format the code for placing an unordered sublist inside an ordered list in a s'more recipe:

<ol>
<li>Get a graham cracker.</li>
<li>Lay on a piece of chocolate. It can be:
   <ul>
   <li> Milk</li>
   <li> Dark</li>
   <li> White</li>
   </ul>
</li>
<li>Add a toasted marshmallow.</li>
<li>Add a second graham cracker on top, squish marshmallow, and eat.</li>
</ol>

Figure 5-7 shows how this list looks in a Web browser.

Figure 5.7.  Figure 5-7: Styled lists embedded within another list.