Full Page for Printing

Blockquotes

Return to the issue of left margin layout and the idea that readability and emphasis are important style and tone considerations to graphics designers. A paragraph contains an idea, a thought, a concept. That kernel needs to be illustrated with an example, a definition, a quotation. One method is to indent the illustration to set it off from the main text.

The blockquote container tag is useful, not only for long pieces of text which are quoted material and therefore need to be set apart and indented, but also as a general tool to indent or set off for emphasis even single words or phrases. For example:

This section of text is surrounded by the <BLOCKQUOTE>...</BLOCKQUOTE> tags. A <BLOCKQUOTE> can be used inside a paragraph container, but always has an implied line break before and after the <BLOCKQUOTE>...</BLOCKQUOTE> pair, just as with headings or paragraphs themselves. In a sense, a <BLOCKQUOTE> is a "mini-paragraph" within a paragraph.
The <BLOCKQUOTE> pair is set up as follows:
<BLOCKQUOTE> ...text of any length...</BLOCKQUOTE>
Back to...TOP Back to...Designing Web Pages

Useful List Structures

Continue to think about the role of varying the left margin as a key to emphasis and readability considerations when developing the style and tone of the document. HTML contains three list structures which, in addition to their specific functions, provide some text design flexibility.
This is the Dictionary List <DL>...</DL> container tag:
It uses the empty tag <DT> for the "term" to be defined (the above line)
and the empty tag <DD> for the indented "definition" of the term.
This is the Ordered List <OL>...</OL> container tag:
  1. It uses the empty tag <LI> for each item in the list
  2. and numbers or letters each line
  3. according to the attribute contained in the <LI> tag
This is the Unordered List <UL>...</UL> container tag: Not only does each list provide interesting formatting possibilities in its own right, it is also possible to nest and combine the ordered and unordered lists to create other possibilities.

<DL>...</DL>

The Dictionary List is sometimes called a "Glossary List." It opens with the <DL> tag. Then each line is started with either the empty <DT> tag or the <DD> tag, depending upon the purpose. It closes with a slash tag </DL> The following is the HTML code for a Dictionary List:
<DL><DT>This is the first term to be defined: <DD>This is the definition of the first term. <DT>This is the second term to be defined: <DD>This is the definition of the second term. If the definition is longer than the display is wide, the text will wrap around to the indent margin, creating an effect similar to </BLOCKQUOTE> but without the right margin indent.</DL>
The above code displays as follows:
This is the first term to be defined:
This is the definition of the first term.
This is the second term to be defined:
This is the definition of the second term. If the definition is longer than the display is wide, the text will wrap around to the indent margin, creating an effect similar to </BLOCKQUOTE>< but without the right margin indent.
Notice that there is no empty line between the "term" <DT> and the "definitions" <DD>, but there are empty lines before and after the <DL>...</DL> container, so no line break <BR> or paragraph <P> tags are necessary.

This creates an interesting use of the <DL>...</DL> container, a parallel to the <OL>...</OL> and <UL>...</UL> structures, but without the leading empty line and without bullets or numbers.

<DL>
<DT>This is a list of whatchamacallits:
<DD>Red whatchamacallits
<DD>Blue whatchamacallits
<DD>Green whatchamacallits</DL>

produces the following display:

This is a list of whatchamacallits:
Red whatchamacallits
Blue whatchamacallits
Green whatchamacallits
Back to...TOP Back to...Designing Web Pages Up to ...Useful Lists Down to...Combining Lists

<OL>...</OL>

The Ordered List is sometimes called the Organized List. It opens with the <OL> tag. Each line is started with the empty <LI> tag. It closes with a slash tag </OL> The following is the HTML code for an Ordered List:
<OL> <LI>This is the first item in the list< LI>This is the second item in the list <LI>This is the third item in the list </OL>
The above HTML code displays as follows:
  1. This is the first item in the list
  2. This is the second item in the list
  3. This is the third item in the list
Notice that the <OL>...</OL> container pair also creates an empty line before and after the list, so no line break <BR> or paragraph <P> tags are necessary.

However, if you wish to use an introductory line to "set-up" the list (as with the "Whatchamacallits" in the <DL> example), that line would precede the opening tag and would be followed by the list's first empty line (as the words The above HTML code displays as follows: display above). Substituting <LH> for <LI> in either the <OL>...</OL> or <UL>...</UL> structures removes the bullets and numbers from the indented lines.

Back to...TOP Back to...Designing Web Pages

<UL>...</UL>

The Unordered List is sometimes called the Bulleted List. It opens with the <UL> tag. Each line is started with the empty <LI> tag. It closes with a slash tag </UL> The following is the HTML code for an Unordered List:
<OL> <LI>This is the first item in the list< LI>This is the second item in the list <LI>This is the third item in the list </UL>
The above HTML code displays as follows: Notice that the <UL>...</UL> container pair also creates an empty line before and after the list, so no <BR> or <P> tags are necessary.

However, if you wish to use an introductory line to "set-up" the list (as with the "Whatchamacallits" in the <DL> example), that line would precede the opening tag and would be followed by the list's first empty line (as the words The above HTML code displays as follows: display above), just as with the <OL> list.

Back to...TOP Back to...Designing Web Pages Up to ...Useful Lists Down to...Combining Lists

Nesting <OL> and <UL> Lists

List_Nests It is possible to nest either the <OL> or the <UL> lists. The designer must keep track of the container pairs, however, to avoid cross-nesting as described in the section Tags in General.

Conceptually, build the list out, or up and down, from the innermost (green) container, through the middle level (red) containers, to the outside (blue) container. The following demonstrates a three-level, three-category list in both <OL> and <UL> lists:
<OL> List Nest:
  1. Item 1
    1. Item 1-a
    2. Item 1-b
  2. Item 2
    1. Item 2-a
      1. Item 2-a-1
      2. Item 2-a-2
    2. Item 2-b
  3. Item 3
    1. Item 3-a
    2. Item 3-b
 <UL> List Nest:
  • Item 1
    • Item 1-a
    • Item 1-b
  • Item 2
    • Item 2-a
      • Item 2-a-1
      • Item 2-a-2
    • Item 2-b
  • Item 3
    • Item 3-a
    • Item 3-b

Back to...TOP Back to...Designing Web Pages Up to ...Useful Lists Down to...Combining Lists

Combining Lists

It is possible to combine parts of all three lists structures into a single list. The <OL> and the <UL> lists illustrate this most clearly. Again, the designer must keep track of the container pairs, however, to avoid cross-nesting as described in the section Tags in General.

As before, conceptually, build the list out, or up and down, from the innermost (green) container, through the middle level (red) containers, to the outside (blue) container. The following demonstrates a three-level, three-category list combining <OL> and <UL> structures:
HTML Code for
<OL>
<LI>Item 1
<UL>
<LI>Item 1-a
<LI>Item 1-b
</UL>
<LI>Item 2
<UL>
<LI>Item 2-a
<UL>
<LI>Item 2-a-1
<LI>Item 2-a-2
</UL>
<LI>Item 2-b
</UL>
<LI>Item 3
<OL>
<LI>Item 3-a
<LI>Item 3-b
</OL>
</OL> 		<OL> and <UL> Combined Lists:
  1. Item 1
    • Item 1-a
    • Item 1-b
  2. Item 2
    • Item 2-a
      1. Item 2-a-1
      2. Item 2-a-2
    • Item 2-b
  3. Item 3
    • Item 3-a
    • Item 3-b
 List_Nests

| Up to Useful Lists | | Up to Nests |
Back to...TOP Back to...Designing Web Pages
Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@mccsc.edu