<div> elementIf 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>
<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 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>
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 type="A"><ol type="a"><ol type="I"><ol type="i"><ol start="2"><ol start="2" type="A">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>
|
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 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 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> |
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 <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”.
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>
|
List of pets in order of author's preference:
|
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 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.