In this lesson, we'll look at some more of the structural elements of HTML, that allow you to organise and separate the various topics on your web page.

HTML gives us a quick and easy way of defining headings; six different levels of headings, in fact (and that should be enough for anyone!). Headings are defined with the opening tags <H1>, <H2>, etc. through to <H6>, and they all have closing tags </H1>, </H2> etc. The level of the heading is intended to convey its importance, with H1 being the highest level and H6 the lowest. Graphical browsers usually render headings in different font sizes according to the level, and in bold face, with a little extra "white space" above or below when compared with normal text.

Examine the code example below:

Now take a look at it in your browser.

Typically, H1 headings are displayed at text size 6 (we talked about these sizes in the last lesson), working down to H6 at size 1. This means that the smaller headings are actually smaller than normal text. Frankly, I think this makes them pretty useless as a "heading". However, you might want to reserve them for purposes like headings for diagrams. You know, the Fig. 1 kind of thing. I can't remember ever using H5 or H6 myself.

Headings are intended to be used in order of precedence, so that the highest level of heading on your page should be assigned H1, the next highest level H2 -- strictly speaking, you shouldn't use an H2 unless you've used an H1 somewhere above it, or an H3 unless there is an H2 somewhere above it, and so on. Your choice of heading should reflect the structure of your document.

Lists are a useful way of organising facts, and HTML provides some flexible and versatile ways to present lists.

Unordered lists

The first we'll look at is the unordered list, which we enclose within the tags <UL> and </UL>. Each item in the list is enclosed within "list item" tags, <LI> and </LI>, which are nested inside the UL tags. It's a while since you did any work, so open a new file in your editor and type the following code example:

Save your file as "file4.html". When you open it in your browser, it should look like this.

Typically, a browser will render an unordered list as a "bulleted" list, indented from the normal text.

Ordered lists

Our next type of list is the ordered list. To create an example, open your "file4.html" file in your editor again. All you have to do is replace the <UL> and </UL> tags with the ordered list tags, <OL> and </OL> as indicated below:

Save your file. When you open it in your browser, it should look like this.

You'll see that the bullets have been replaced by numbers, making some sense of why it is called an "ordered" list. In due course, we'll look at some additional tricks with ordered and unordered lists, but for the moment let's just examine one: nesting.

Nesting lists

You can create lists within lists, mixing ordered and unordered elements to suit your needs. Examine the code sample below, noting carefully the position of the closing </LI> tags. I hope you'll see that each new nested list opens and closes before the closing </LI> tag of the list item that immediately precedes it:

Now take a look at this in your browser.

In this example, we have an ordered list nested inside an unordered list nested inside an ordered list. Note the way the numbers run on the ordered lists. The "inner" ordered list starts again at number 1, because it is a completely new list. When that list closes, and when the unordered list around it closes, the numbering of the initial ordered list reverts to where it left off before the nested unordered list began. (You might have to read that paragraph a few times! But I think it's easier to see from the example, than to explain.)

(This is a good point at which to reiterate that when you are nesting HTML elements, you must be careful to open and close tags in the right order! You'll find it easier to do this if you adopt a sensible way to lay out your source code, using blank lines and indents, to make the structure more evident.)

You like lists? We've got more...

Definition lists

Definition lists are used in glossary or index kinds of applications, where terms are being defined. The whole list is enclosed in the <DL> and </DL> tags. Inside those, two other tags are used. These are:

1. <DT>, the "definition term", placed before the term to be defined. The closing tag is </DT>.

2. <DD>, the "definition description", placed before the definition. The closing tag is </DD>.

As always, the best way to demonstrate use is by example. Have a look at the following code snippet:

Now take a look at this in your browser.

Typically, the definition is rendered on the next line and indented from the definition term; though this may be different depending on your browser.

The definition list can be used in all sorts of applications, for example, the list might be a range of related products in a manufacturer's catalogue. Each product would be assigned to a <DT> tag, and the description of the product to a <DD> tag. Here's an example.

I think that's probably enough lists. A couple of other types are mentioned in the HTML specifications, but

• they were never very useful anyway, and
• they are deprecated, and the specifications recommend the use of UL lists in their place.

Hey, that was a list!

A simple way to draw a line on screen using HTML is with the horizontal rule element. This is defined by the <HR> tag, which has no closing tag. In most browsers, a horizontal three-dimensional or shaded line is drawn across the screen at the point where you place the tag in the source code. The "rule" starts on a new line, and extends across all available screen width. Here's some code:

Now see how it looks in your browser.

Web authors often use horizontal rules to separate sections of text, but it's easy to overuse it. There are a few variations we can make on the basic rule, which we'll come to very shortly.

HTML supplies us with six levels of headings, H1 through H6, where H1 is typically displayed in the largest font size, designed for the highest level heading.

A number of types of list can be created in HTML. The most useful are:

• the unordered list, a list of bulleted items surrounded by the <UL> and </UL> tags, with each item enclosed by the <LI> and </LI> tags

• the ordered list, a list of numbered items surrounded by the <OL> and </OL> tags, with each item enclosed by the <LI> and </LI> tags

• the definition list, surrounded by the <DL> and </DL> tags; each definition term is preceded by the <DT> tag, and each definition by the <DD> tag.

A simple horizontal rule can be drawn across the screen using the <HR> tag.