These organizational block level elements provide for presentation of content in a highly structured and succinct manner.

On this page:

• List elements
  • Unordered lists
  • Ordered lists
  • Definition lists
  • "Contents" variants
• Table element

List elements

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

<ul>
 <li>Item 1
  <ul>
   <li>Sub-Item 1</li>
   <li>Sub-Item 2</li>
   <li>Sub-Item 3</li>
  </ul>
 </li>
 <li>Item 2
  <ul>
   <li>Sub-Item 4
    <ul>
     <li>Sub-Item 7</li>
     <li>Sub-Item 8</li>
    </ul>
   </li>
   <li>Sub-Item 5</li>
   <li>Sub-Item 6</li>
  </ul>
 </li>
</ul>

Unordered lists

Unordered lists are bulleted items:

• Item 1
• Item 2
• Item 3

Lists can be nested, one inside another:

• Item 1
  • Sub-Item 1
  • Sub-Item 2
  • Sub-Item 3
• Item 2
  • Sub-Item 4
    • Sub-Item 7
    • Sub-Item 8
  • Sub-Item 5
  • Sub-Item 6

Note that sub-lists are enclosed in a line item tagset (<li></li>) after a line item text section, not directly in the unordered list tagset (<ul></ul>). The unordered list can contain only line item elements, whereas line item elements can contain both inline and general block level elements.

<ol>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ol>

<ol>
 <li>Item 1
  <ol>
   <li>Sub-Item 1</li>
   <li>Sub-Item 2</li>
   <li>Sub-Item 3</li>
  </ol>
 </li>
 <li>Item 2
  <ol>
   <li>Sub-Item 4
    <ol>
     <li>Sub-Item 7</li>
     <li>Sub-Item 8</li>
    </ol>
   </li>
   <li>Sub-Item 5</li>
   <li>Sub-Item 6</li>
  </ol>
 </li>
</ol>

Ordered lists

Ordered lists are numbered items:

1. Item 1
2. Item 2
3. Item 3

Lists can be nested, one inside another:

1. Item 1
   1. Sub-Item 1
   2. Sub-Item 2
   3. Sub-Item 3
2. Item 2
   1. Sub-Item 4
      1. Sub-Item 7
      2. Sub-Item 8
   2. Sub-Item 5
   3. Sub-Item 6

As with unordered lists, ordered sub-lists are enclosed in a line item tagset (<li></li>) after a line item text section.

<dl>
 <dt>Term one</dt>
  <dd>Definition of term one</dd>
 <dt>Term two</dt>
  <dd>Definition of term two</dd>
 <dt>Term three</dt>
  <dd>Definition of term three</dd>
</dl>

Definition lists

The definition list is like a lookup or glossary:

Term one

Definition of term one

Term two

Definition of term two

Term three

Definition of term three

<ul class="contents">
 <li>Item 1</li>
 <li>Item 2</li>
</ul>

<ol class="contents">
 <li>Item 1</li>
 <li>Item 2</li>
</ol>

<dl class="contents">
 <dt>Term one</dt>
  <dd>Definition of term one</dd>
 <dt>Term two</dt>
  <dd>Definition of term two</dd>
</dl>

"Contents" variants

We define "contents" variants of these lists, especially for use in table-of-contents type sections, such as "On this page" and "Related pages" sections of our webpages. Here are the three list types with the "contents" class modifier. Note that their font sizes have been maintained at standard size as a result of the "contents" class modifier:

• Item 1
• Item 2

1. Item 1
2. Item 2

Term one

Definition of term one

Term two

Definition of term two

  <table class="standard">
  <caption>Caption goes here</caption>
  <colgroup class="names">
   <col class="names">
  </colgroup>
  <colgroup class="data">
   <col class="data">
   <col class="data">
  </colgroup>
  <thead>
   <tr>
    <th class="head-name">Top left</th>
    <th class="column-head">Data col</th>
    <th class="column-head">Data col</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <th class="foot-name">Totals</th>
    <th class="column-foot">3-2</th>
    <th class="column-foot">3-4</th>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td class="name">First Row</td>
    <td class="data">1-1</td>
    <td class="data">1-2</td>
   </tr>
   <tr>
    <td class="name">Second Row</td>
    <td class="data">2-1</td>
    <td class="data">2-2</td>
   </tr>
  </tbody>
 </table>

Table element

We've used tables for simple tabular presentations. If you need one, we've provided a couple of templates with a standard look, which can be invoked by attaching one of the class modifiers "standard" or "numeric".

Here is a quick review of the elements related to the table object:

The table caption

The caption tagset must appear right after the opening <table> tag.

Horizontal Table Grouping: Column Groups, Columns, Header Cells, and Data Cells

The <colgroup></colgroup> and <col></col> tagsets must appear before any other horizontal or vertical grouping tags. They help the browser anticipate styles and structure of header cells and data cells to come. In our template <col></col> tagsets must be enclosed in <colgroup></colgroup> tagsets. You can use the <col> elements to specify column widths by adding the width attribute like this: <col class="data" style="width:50px">. The header cells (<th></th>) and data cells (<td></td>) hold the data. Header and data cells must be enclosed in row tagsets (<tr></tr>) for each row.

Vertical Table Grouping: Head, Body, Foot, and Rows

The head, body, and foot tagsets provide wrappers for row groupings to allow the browser to anticipate style for the respective contents. Head and foot tagsets must appear before body tagsets. Header and data cells must be enclosed in row tagsets (<tr></tr>) for each row.

All of which produces this:

Change the table class to "numeric" (<table class="numeric">), and the data columns are right-aligned:

If you scale it up, just keep everything symmetrical.