devxlogo

HTML Basics: Lists

HTML Basics: Lists

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.
    1. produces a alphabetical list with capital letters.
    1. produces a numerical list with arabic numerals. This is also the default value.
    1. produces a alphabetical list with lowercase letters.
    1. 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,

        .

      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.

    devx-admin

    Share the Post: