Grouping Elements and Lists

The <div> element

If you have a large number of consecutive paragraphs that you want centered, right-aligned, or justified, you could put the style="text-align: whatever attribute on each one of them. However, it is easier to set up a logical division of your document with the <div> element. This block element forms a “group” of all the HTML between the opening and closing tags. Here’s an example that groups together several block-level elements and centers them all. Try it and find out.

<div style="text-align: center">
<hgroup>
<h1>It&rsquo;s Our Grand Opening</h1>
<h2>And You&rsquo;re Invited!</h2>
</hgroup>
<p>
   at<br />
   La Maison du Schloque<br />
   1001 Washington Street<br />
   Anytown, CA
</p>
</div>

The <blockquote> element

The <blockquote> element is another grouping element. In addition to forming a group, it also indents the group from the left and right side of the of the browser window. It’s usually used for setting off a quotation from another source. In the following example, we have indented the blockquote in the HTML to reflect what it will look like “when it grows up.” The browser doesn’t care about how your markup is indented (remember the first rule of HTML?), but it makes things easier for anyone who reads your document. Try it and find out.

<p>Ogden Nash was a famous American humorist. Prof. Dr. Moishe
Pipik, a fictional literary critic, once said:</p>

<blockquote>
    <p>Most people think of Ogden Nash&rsquo;s poetry as trivial
    and meaningless.  This, however, may be its greatest charm.</p>

    <p>Archibald MacLeish said that
    <q>[a] poem should not mean/But be.</q>
    Rather than beat us over the head with deep philosophy,
    Nash&rsquo;s poetry simply exists to entertain and make our
    days brighter.</p>
</blockquote>

<p>You may find out more about Ogden Nash on the World Wide Web.</p>

Ordered Lists

You use the <ol> element to start an ordered list. Within the list are list items, which are marked with the <li> element. Here is an example, with its result. Notice that the contents of an ordered list are automagically indented for you.

<p>List of pets in order of
author&rsquo;s preference:</p>
<ol>
   <li>Cats</li>
   <li>Fish</li>
   <li>Dogs</li>
</ol>

Try it and find out. Take the HTML and put it into a test file, to see that it does what you saw in the preceding table. Then change the starting <ol> tag as follows, to see what happens to the list.

1. <ol style="list-style-type: upper-alpha">
2. <ol style="list-style-type: lower-alpha">
3. <ol style="list-style-type: upper-roman">
4. <ol style="list-style-type: lower-roman">
5. <ol start="2">
6. <ol start="2" style="list-style-type: upper-alpha">

Nested Ordered Lists

It’s possible to create lists within lists, which are called nested lists. Here’s a list within a list. Note especially(!) where the closing list item is for the “Cats”. (See a common problem with nested lists.)

<p>List of pets in order of
author&rsquo;s preference:</p>
<ol>
   <li>
      Cats
      <ol style="list-style-type: lower-alpha">
         <li>Domestic Shorthair</li>
         <li>Domestic Longhair</li>
         <li>Purebred</li>
      </ol>
   </li>
   <li>Fish</li>
   <li>Dogs</li>
</ol>

And yes, it’s possible to nest lists as deeply as you wish. Try it and find out..

<p>List of pets in order of
author&rsquo;s preference:</p>
<ol>
   <li>
      Cats
      <ol style="list-style-type: lower-alpha">
         <li>Domestic Shorthair</li>
         <li>Domestic Longhair</li>
         <li>Purebred
            <ol style="list-style-type: lower-roman">
               <li>Russian Blue</li>
               <li>Scottish Fold</li>
               <li>Siamese</li>
            </ol>
         </li>
      </ol>
   </li>
   <li>Fish</li>
   <li>Dogs</li>
</ol>

Unordered Lists

Unordered lists work very much like ordered lists. The only difference is that you open with <ul> and close with </ul>. And, of course, you the style attribute takes different values. Let’s do the same examples as we did before, but using </ul> Notice that the text preceding the list does not imply any ordering, so it is OK to use an unordered list.

<p>List of common household pets:</p>
<ul>
   <li>Cats</li>
   <li>Fish</li>
   <li>Dogs</li>
</ul>

Try it and find out. Take the HTML and put it into a test file, to see that it does what you saw in the preceding table. Then change the starting <ul> tag as follows, to see what happens to the list.

• <ul style="list-style-type: square">
• <ul style="list-style-type: circle">
• <ul style="list-style-type: disc">

Note that disc, the default, is spelled with the letter “c”, not “k”.

Nested Unordered Lists

Just as with ordered lists, you can nest unordered lists. Notice that the browser automagically changes the bullet for you every time you open a new list; you don’t have to do anything special as you did with ordered lists.

<p>List of common household pets:</p>
<ul>
   <li>
      Cats
      <ul>
         <li>Domestic Shorthair</li>
         <li>Domestic Longhair</li>
         <li>Purebred</li>
      </ul>
   </li>
   <li>Fish</li>
   <li>Dogs</li>
</ul>

Try it and find out. Take the doubly-nested ordered list and change it to an unordered list with the outer list (Cats/Fish/Dogs) having square bullets, the middle list (Domestic Shorthair/Domestic Longhair/Purebred) having disc bullets, and the innermost list (Russian Blue/Scottish Fold/Siamese) having circle bullets.

Description Lists

Description lists are completely different from ordered and unordered lists. These lists are used when you have terms and their descriptions (hence the name). The list starts with the <dl> opening tag, and then contains <dt> (t stands for term) elements and <dd> (d stands for description) elements. Here is an example.

<dl>
   <dt>Cat</dt>

   <dd>Mysterious creatures with a
   hypnotic purr. Worst feature: the
   eck-eck-eck hairball noise.</dd>

   <dt>Dog</dt>
   <dd>Man&rsquo;s best friend; loyal and
   trusting. Worst feature: dog breath.</dd>

   <dt>Fish</dt>
   <dd>Beautiful and graceful denizens of
   the vasty deep. Worst feature: limited
   lifespan.</dd>
</dl>

Notice that the term is not indented, but the description is. A description list can have multiple <dt> elements with a single desciption, or it can have multiple <dd> elements for a single term, as in the following:

<dl>
    <dt>bag</dt>
    <dt>sack</dt>
    <dd>a container, usually paper or plastic</dd>

    <dt>desert</dt>
    <dd>a dry sandy place (noun). First syllable is accented.</dd>
    <dd>to leave or abandon (verb). Second syllable is accented.</dd>
</dl>

While it is possible to nest description lists, it’s rather unusual to do so.