Grouping Elements and Lists

Grouping Elements

The <div> element

If you have a large number of consecutive paragraphs that you want centered, right-aligned, or justified, you could put the align 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 align="center">
<h2>It's Our Grand Opening</h2>
<h3>And You're Invited!</h3>
<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 it’s 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 famous literary critic, once said:</p>

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

    <p>Robert Frost said that a poem should not mean, but be.
    Rather than beat us over the head with deep philosophy,
    Nash'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:

• numbered (ordered) lists,
• bulleted (unordered) lists like this one, and
• definition lists

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'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 type="A">
2. <ol type="a">
3. <ol type="I">
4. <ol type="i">
5. <ol start="2">
6. <ol start="2" type="A">

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

<p>List of pets in order of
author's preference:</p>
<ol>
   <li>
      Cats
      <ol type="a">
         <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's preference:</p>
<ol>
   <li>
      Cats
      <ol type="a">
         <li>Domestic Shorthair</li>
         <li>Domestic Longhair</li>
         <li>Purebred
            <ol type="i">
               <li>Siamese</li>
               <li>Russian Blue</li>
               <li>Scottish Fold</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 type attribute takes different values. Let’s do the same examples as we did before, but using </ul>.

<p>List of pets in order of
author's preference:</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 type="square">
• <ul type="circle">
• <ul 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 pets in order of
author's preference:</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 (Siamese/Russian Blue/Scottish Fold) having circle bullets.

Definition Lists

Definition lists are completely different from ordered and unordered lists. These lists are used when you have terms and their definitions (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 definition) elements. Here is an example, Unlike the book, we are closing all the opening tags.

<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’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 definition is. You can create more than one <dt> line or more than one <dd> line to accommodate multiple words or multiple definitions.

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