<div> elementIf 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’s Our Grand Opening</h1> <h2>And You’re Invited!</h2> </hgroup> <p> at<br /> La Maison du Schloque<br /> 1001 Washington Street<br /> Anytown, CA </p> </div>
<blockquote> elementThe <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’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’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>
HTML provides elements for creating three types of 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> |
List of pets in order of author’s preference:
|
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.
<ol style="list-style-type: upper-alpha"><ol style="list-style-type: lower-alpha"><ol style="list-style-type: upper-roman"><ol style="list-style-type: lower-roman"><ol start="2"><ol start="2" style="list-style-type: upper-alpha">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 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>
|
List of pets in order of author’s preference:
|
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 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 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> |
List of common household pets:
|
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”.
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>
|
List of common household pets:
|
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 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’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.