HTML/Lists

From Wikiversity
(Redirected from Lists in HTML)
Jump to navigation Jump to search

There are three kinds of lists in HTML:

  • ordered lists
  • unordered lists
  • definition lists

Ordered and unordered lists[edit | edit source]

Overview[edit | edit source]

Ordered and unordered lists are both lists of items. The only difference is that items are marked with numbers in ordered lists and bullets in unordered lists.

  • To create an ordered list, use the <ol>...</ol> tags.
  • To create an unordered list, use the <ul>...</ul> tags.
  • To create an item in a list, use the <li>...</li> tags between a set of list tags.

Lists can be placed inside one another. This is called "nesting". Ordered lists can be nested inside unordered lists and vice versa. The only limit to nesting is the physical space available on a page; each nested list is indented more and leaves less space for its items than its parent.

To nest, do this:

	<ol>
		<li>Item1
			<ol>
				<li>List2 Item1</li>
			</ol>
		</li>
	</ol>

Examples[edit | edit source]

Ordered list[edit | edit source]

The code for an ordered list:

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

The output of the above code:

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

Unordered list[edit | edit source]

The code for an unordered list:

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

The output of the above code:

  • Item 1
  • Item 2
  • Item 3

Nested list[edit | edit source]

The code for a mixed nested list:

 <ol>
  <li>Item 1
   <ul>
    <li>Item 1.1</li>
    <li>Item 1.2
     <ul>
      <li>Item 1.2.1</li>
      <li>Item 1.2.2</li>
      <li>Item 1.2.3</li>
     </ul>
    </li>
   </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3
   <ul>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
   </ul>
  </li>
 </ol>

The output of the above code:

  1. Item 1
    • Item 1.1
    • Item 1.2
      • Item 1.2.1
      • Item 1.2.2
      • Item 1.2.3
  2. Item 2
  3. Item 3
    • Item 3.1
    • Item 3.2

Definition lists[edit | edit source]

Overview[edit | edit source]

  • To create a definition list, use the <dl>...</dl> tags.
  • To create a term on the list, use the <dt>...</dt> tags.
  • To create a definition in a list, use the <dd>...</dd> tags between a set of list tags.

Examples[edit | edit source]

  <dl>
    <dt>Term 1</dt><dd>Definition of the first term</dd>
    <dt>Term 2</dt><dd>Definition of the second term</dd>
    <dt>Term 3</dt><dd>Definition of the third term</dd>
  </dl>
Term 1
Definition of the first term
Term 2
Definition of the second term
Term 3
Definition of the third term


Learning HTML
Previous: Fonts and colours in HTMLNext: Tables in HTML