Tutorial Menu
  1. Home ›
  2. HTML
‹‹ PreviousNext ››

HTML Lists

Bookmark
Learn about ordered, unordered and definition lists and how to use them with examples.

There are three types of list items in HTML, ordered list, unordered list and definition list. These can be used to display list of items in a HTML document.

  • Ordered list - to display numbered list items in a sequence.
  • Unordered list - to display a bullet-ed list of items.
  • definition list - to display a list of items as listed in a dictionary.

HTML Ordered List

Ordered list can be used to display a group of related items in a numbered sequential order. List of items displayed in an orderly fashion using a continuous integer prefix.<ol> tag is used to display the ordered list.

Ordered List Attributes

  • type - Type of prefix for the list items to use like 1, I, i, A, a.
  • start - start of the ordered sequence and it should be a number.

Ordered List Example

 <ol start="3" type="A">
      <li>Apple</li>
      <li>Ball</li>
      <li>Cat</li>
      <li>Doll</li>
      <li>Elephant</li>
    </ol>

Output

  1. Cat
  2. Doll
  3. Elephant
  4. Flower
  5. Giraffe

If type attribute is not specified then it will default to numbers. Since start is specified as '3' the ordered list starts from 'C'.

HTML Unordered List

Unordered list can be used to display a group of bulled-ed point. This can be used when the order between the listed item is of no significance. <ul> is the tag used to display the unordered list of items.

Unordered List Attributes

  • type - Type of bullet to prefix before each list item like a disc, square or circle.

Unordered List Example

  <ul type="square">
      <li>Lion</li>
      <li>Crocodile</li>
      <li>Tiger</li>
      <li>Deer</li>
    </ul>

Output

  • Lion
  • Crocodile
  • Tiger
  • Deer

In the above unordered list example, I have used square as attribute value for type and so the prefix bullet type is shown as a square. If the type attribute is not specified, the bullet will default to a disc.

HTML Definition List

Definition list can be used to display dictionary kind of listing. This is better used in places where a glossary or index of list items needs to be displayed. <dl> is the tag used to display the definition list of items.

  • <dl> is to display the definition list.
  • <dt> is to for a a term in list.
  • <dd> is definition for the term.

Definition List Example

 <dl>
      <dt>b</dt>
      <dd>Used to display text in bold.</dd>
      <dt>i</dt>
      <dd>Used to italicize text.</dd>
      <dt>i</dt>
      <dd>Used to underline text.</dd>
    </dl>

Output

b
Used to display text in bold.
i
Used to italicize text.
i
Used to underline text.
Tutorial Menu
  1. Home ›
  2. HTML
‹‹ PreviousNext ››

Exception Occured:

TypeErrorException
Messageerror_log(app.log): Failed to open stream: Permission denied
File/home/dh_czz6eb/tutorialwalk.com/common/error.php
Line36
Trace#0 (): log_error(2, 'error_log(app.log): Failed to open stream: Permission denied', '/home/dh_czz6eb/tutorialwalk.com/common/error.php', 36)
#1 /home/dh_czz6eb/tutorialwalk.com/common/error.php(36): error_log('24-04-2024 14:38:09 pm (IST),/home/dh_czz6eb/tutorialwalk.com/common/common.php,193,0,ErrorException,Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter,/html/lists.html,#0 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parame...', '/home/dh_czz6eb...', 193)
#1 [internal function]: check_for_fatal()
#2 {main}
', 3, 'app.log')
#2 /home/dh_czz6eb/tutorialwalk.com/common/error.php(8): log_exception(ErrorException)
#3 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter', '/home/dh_czz6eb/tutorialwalk.com/common/common.php', 193)
#4 (): check_for_fatal()
REQUEST_URI/html/lists.html