devxlogo

HTML Basics: Lists

HTML Basics: Lists

Why Trust Us

se lists to display numbered steps, bulleted items, or items and their definitions. You can also use lists as a sort of short-cut “cheat” to create a quick indent.

Adding lists is straight-forward. You start a list and then identify each element in the list, like this:


  • red
  • yellow
  • orange


List Types
Using HTML tags, you can display items as three types of lists:

  • Unordered
  • Ordered
  • Definition.

In an unordered list each item is preceded by a bullet. You can define the type of bullet you want to use. This is an unordered list with the default style bullet.

  • Red Hats
  • Yellow Shoes
  • Green Socks

In an ordered list each item is preceded by either a number or letter. This is an ordered list with the default arabic numbers:

  1. Pick up the sandwich
  2. Put the sandwich in your mouth
  3. Take a bite of the sandwich and enjoy the taste

In a definition list you specify a term and its definition. The term appears bold and the the whole list is indented (some browsers). This is a definition list:

My list of shirts:
Orange T-Shirts
Represent Group Leaders. They can answer your questions.
White T-Shirts
Represent new team members. Lend these folks a helping hand.

Each type of list works the same way. You enter a tag that describes the type of list. Then you tag each list item. Finally, you end the list. You can have paragraphs within lists. Paragraphs within a list are indented, but do not have a bullet or number as list items do.

Unordered List




The unordered list displays items in an indented, vertical column. Each item is preceded by a bullet.

Unordered List Tags
A unordered list uses three tags:

  1. The list begins with the

      tag.
    • Each item in the list is marked with the list item tag,

    • .
    • The list ends with an end unordered list tag,

    .

There are nine planets:


  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  • Pluto

There are nine planets:

  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  • Pluto

If you have lists within lists the browser will automatically display a different type of bullet at each level. The top level is a solid circle; the second level is the hollow circle, the third level is a hollow “ballot” box.

The Type Attribute
You can also specify the type of bullet you want to use by adding the type attribute to the list item tag. The type attribute has three possible values: disc, circle, and square.

  • Disc is the default, a solid circle.

  • Circle a hollow circle.
  • Square is a square box.
Ordered List




The ordered list displays items in an indented, vertical column. Each item is preceded by a number or letter.

Ordered List Tags
An ordered list uses three tags.
  1. The list begins with the

      tag.
    1. Each item in the list is marked with the list item tag,

    2. .
    3. The list ends with an off ordered list tag,

    .

There are nine planets:


  1. Mercury
  2. Venus
  3. Earth
  4. Mars
  5. Jupiter
  6. Saturn
  7. Uranus
  8. Neptune
  9. Pluto


There are nine planets:

  1. Mercury
  2. Venus
  3. Earth
  4. Mars
  5. Jupiter
  6. Saturn
  7. Uranus
  8. Neptune
  9. Pluto

The Type Attribute
The type attribute lets you specify whether to use numbers or letters in your ordered list. The default value is arabic numerals.

  2. produces a numerical list with roman numerals.
  2. produces a alphabetical list with capital letters.
  2. produces a numerical list with arabic numerals. This is also the default value.
  2. produces a alphabetical list with lowercase letters.
  2. produces a numerical list with small roman numerals.
The Start Attribute
The start attribute lets you start the ordered list at a specific number (works only in some browsers). For example:


  1. Rose
  2. Chrome
  3. Tangerine

    Starts the list with the number 15:

    1. Rose
    2. Chrome
    3. Tangerine
    Definition List





    The definition list displays items in two parts. The first is a definition term. The second is a definition description. The default display places the definition term in bold and the whole list indented (some browsers).

    A definition list uses four tags.

    1. The list begins with the

      tag.
    2. Each definition term in the list is marked with the definition term tag,

      .
    3. Each indented definition in the list is marked with a definition tag,

      .
    4. The list ends with an end definition list tag,

      5. .

    There are nine planets:


    Mercury

    The closest planet to the sun.

    Venus

    The mysterious planet, shrouded in clouds.

    Earth

    Our little blue orb.

    Mars

    The red planet. Was there ever life there?

    Jupiter

    The biggest planet with many moons.

    Saturn

    The planet best-known for its beautiful rings.

    Uranus

    Uranus has rings too?nine of them, but you can’t see them from Earth.

    Neptune

    This planet is 17 times bigger than Earth and has a 17 hour day.

    Pluto

    At the end of our solar system, this planet is distant and cold.


    There are nine planets:

    Mercury
    The closest planet to the sun.
    Venus
    The mysterious planet, shrouded in clouds.
    Earth
    Our little blue orb.
    Mars
    The red planet. Was there ever life there?
    Jupiter
    The biggest planet with many moons.
    Saturn
    The planet best-known for its beautiful rings.
    Uranus
    Uranus has rings too?nine of them, but you can’t see them from Earth.
    Neptune
    This planet is 17 times bigger than Earth and has a 17 hour day.
    Pluto
    At the end of our solar system, this one is distant and cold.

    Indenting with Lists
    The basic set of HTML tags does not include one for indenting text. You’ll either need to use Cascading Style Sheet (CSS) or a “cheat.” For a quick and easy way to create an indent on the left margin, you can simply use an unordered list tag. Don’t use the list item tags?these will create the bullets. Instead, simply start each line or paragraph with a paragraph or break tag, like this:

    Below you will find my address. Please send me the items I’ve ordered.


      Happy Smith

      1234 Main Street

      Melrose, MA


    Thanks very much!

      Happy Smith
      1234 Main Street
      Melrose, MA

    Thanks very much!

    Common Problems
    One mistake that is easy to make when you are building a list is to leave off the end list tag. This leaves the list indent turned on?and the remainder of your page appears indented.

    Another thing to watch out for when you’re building lists is to keep your own code neat and tidy. Lists tags can easily create a messy looking text file, which in turn makes it difficult to find coding errors.

    We recommend you follows the style guidelines in the Style and Structure section as you create lists. Messy code and neat code both produce the same results, but neat code will be much easier to edit and update in the future.

Disclosure
devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist

Charlie Frank

Charlie has over a decade of experience in website administration and technology management. As the site admin, he oversees all technical aspects of running a high-traffic online platform, ensuring optimal performance, security, and user experience.
View Author
Show More