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.

  1. 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,
    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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may