Web Programming Lessons - HTML - Lists

In HTML, there are three kinds of lists, each appropriate for a different kind of information. An unordered list made with <ul> and </ul> tags is meant for elements that have no order or the order is unimportant (typically shown with bullets). An ordered list created using the <ol> and </ol> tags is typically shown with numbers and is used for elements whose order matters such as a sequence of steps to perform. Finally, there are definitions lists, created with <dl> and </dl> tags.

Ordered Lists

Ordered lists provide a list of items, each of which are preceded by an incremental number starting from 1.
Sample HTML:

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

Example rendering:

1. First item
2. Second item
3. Third item

Unordered Lists

Unordered lists display a list of items, each of which is prefixed by a bullet.
Sample HTML:

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

Example rendering:

• First item
• Second item
• Third item

Definition Lists

Definition lists display a list of bolded terms, followed by the definition on a new line and prefixed by a tab (by default).
Sample HTML:

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Term 1

Definition of Term 1

Term 2

Definition of Term 2

If two terms share the same definition they can be grouped together like so:

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Cascading Style Sheets

CSS

Definition of Cascading Style Sheets (aka CSS)

Term 2

Definition of Term 2

If a term has two alternative definitions use a separate dd element for each definition, e.g.

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

Example rendering:

Mouse

Small mammal

Input device for a computer

Longer definitions can be broken up into paragraphs by nesting p elements within the dd element.

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

Example rendering:

Term 2

First paragraph of the definition.
Second paragraph of the definition.

Nested Lists

Lists can be nested. An example:

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

Example rendering:

• Lists
  • Numbered Lists
  • Unnumbered Lists

When nesting, nested list elements should be within a parent list item element.
An example of incorrect nesting:

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

A further example of incorrect nesting, with two consecutive UL elements:

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

Web Programming Lessons - HTML - Tables

Tags

Tables in HTML are relatively simple to create and modify. This is done using the tags:

• <table> to declare a table.
• </table> to end the table.
• <tr> to declare the start of a new row.
• <th> to declare the start of a new table header
• </th> to declare the end of a table header
• </tr> to declare the end of a row.
• <td> to declare a cell.
• </td> to close a cell.

Use

The code:
<table>
<tr>
<td>TITLE 1</td>
<td>TITLE 2</td>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>

Will output:

TITLE 1	TITLE 2
Contents 1	Contents 2
Contents 3	Contents 4

Example :