List of Topics

SfC Home > Web Design >

 

HTML Lists

by Ron Kurtus (16 April 2014)

There are three types of lists in HTML: unordered, ordered, and definition lists. An unordered list is essentially a bullet list. An ordered list is a numeric list. The coding for them is relatively simple.

You can define bullet type for the whole unordered list or an individual item. You can define the type of numbering and staring point in ordered lists, as well as having nested lists. Definition lists have no bullets or numbers.

Questions you may have include:

This lesson will answer those questions.



Unordered list

An unordered list is a series of items or "bullet points" that are in no apparent order. An example is:

The coding for an unordered list is:

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ul>

Define bullet type

You can define the bullet type as a disc, circle, or square:

<ul type="disc">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ul>

Define individual item

You can also define an individual item as a disc, circle, or square:

<ul>
<li>Apples</li>
<li type="square">Oranges</li>
<li>Peaches</li>
</ul>

Ordered list

An ordered list is a series of numbered items. An example is:

  1. Apples
  2. Oranges
  3. Peaches

The coding for an unordered list is:

<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>

Define the numeric type

You can define the numeric type as 1, A, a, etc:

  1. Apples
  2. Oranges
  3. Peaches

The HTML is:

<ol type="a">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>

Define starting value

You can define the starting value:

  1. Apples
  2. Oranges
  3. Peaches

The HTML is:

<ol start="3">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>

Nested lists

You can also create nested lists:

  1. Apples
  2. Oranges
    1. Big
    2. Small
  3. Peaches

The HTML is:

<ol>
<li>Apples</li>
<li>Oranges</li>
<ol type="a">
<li>Big</li>
<li>Small</li>
</ol>
<li>Peaches</li>
</ol>

Definition or descriptive list

You can define or describe items within a list:

Term or phrase being defined
Detailed Definition of term

For example:

Apple
Red fruit
Orange
Orange fruit

Note: The spacing between definition and paragraphs is large by default.

The HTML code is:

<dl>
<dt>Apple</dt>
<dd>Red fruit</dd>
<dt>Orange</dt>
<dd>Orange fruit</dd>
</dl>

The areas within <dt>...</dt> can contain full definitions, several sentences long.

Note: I have never used definition lists..

Summary

There are three types of lists in HTML: unordered, ordered, and definition lists. The coding for them is relatively simple.


Make things clear for the user


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

The Web address of this page is:
www.school-for-champions.com/web/
html_lists.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

HTML Lists




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.