Grouping Elements and Lists

Grouping Elements

The <div> element

At the moment, you don’t know how to center text or make it colored, or change its size. At a later point in the course, you will, and you will want to know about the <div> element. This block element sets up a logical division of your document; it creates a “group” of all the HTML between the opening and closing tags. Here’s an example that groups together several block-level elements. Again, if you do this, you won’t see any difference than if you left off the <div>, but once you learn about stylesheets, you will see how handy this grouping element is.

<div>
  <h1>It&rsquo;s Our Grand Opening</h1>
  <h2>And You&rsquo;re Invited!</h2>
  <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>

Lists

HTML provides elements for creating three types of lists:

Unordered Lists

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

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

List of common household pets:

  • Cats
  • Fish
  • Dogs

Nested Unordered 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.) Also notice that the browser automagically changes the bullet for you every time you open a new list.

<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>

List of common household pets:

  • Cats
    • Domestic Shorthair
    • Domestic Longhair
    • Purebred
  • Fish
  • Dogs

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

<p>List of common household pets:</p>
<ul>
   <li>
      Cats
      <ul>
         <li>Domestic Shorthair</li>
         <li>Domestic Longhair</li>
         <li>Purebred
            <ul>
               <li>Russian Blue</li>
               <li>Scottish Fold</li>
               <li>Siamese</li>
            </ul>
         </li>
      </ul>
   </li>
   <li>Fish</li>
   <li>Dogs</li>
</ul>

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. In this case, the list is ordered because “order of author—s preference“ implies numbering.

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

List of pets in order of author’s preference:

  1. Cats
  2. Fish
  3. Dogs

It is possible to change the numbering to use letters or Roman numerals instead, and this is covered when we look at stylesheets.

Nested Ordered Lists

Just as with unordered lists, you can nest ordered lists. At the moment, you do not know how to change the numbering, so the nested list will look sort of weird.

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

List of pets in order of author’s preference:

  1. Cats
    1. Domestic Shorthair
    2. Domestic Longhair
    3. Purebred
  2. Fish
  3. Dogs

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>
Cat
Mysterious creatures with a hypnotic purr. Worst feature: the eck-eck-eck hairball noise.
Dog
Man’s best friend; loyal and trusting. Worst feature: dog breath.
Fish
Beautiful and graceful denizens of the vasty deep. Worst feature: limited lifespan.

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.