Using Lists in HTML

Not everyone likes or enjoys reading long, wordy paragraphs – but would rather quickly scan a list to get the same information.

So, if you’re looking for a way to streamline your pages, you may find presenting information on your website or blog in a list format may be the best way to keep readers happy and on your page longer.

HTML lists can be created in the following formats:

  • Plain
  • Numbered
  • Bulleted (like this one)
  • Lists of Definitions
  • Nested Lists

Today we’ll cover two basic list formats – ordered and unordered.

The ordered list presents information in a numbered sequence, i.e., when you need step-by-step instructions or a particular sequence.   These instructions may be how to complete a task, listing of steps in a process, or creating an outline.  An ordered list can be created anywhere in the section of your HTML document.  (Read about HTML Basics)

The unordered list  is probably the one you most frequently see on the Internet.  This type of list is used to display any series of items that do not require any particular order.

Ordered List

The graphic below shows the HTML code (left side)  used in the of the HTML document for an ordered list with the result shown on the right side. 

Unordered List HTML

The graphic below shows the HTML code (left side)  used in the of the HTML document for an unordered list with the result shown on the right side. 

You can make ordered and unordered lists as long as you like using the

  • tag to begin each new line and the
  • tag to close the line.  When the last line has been included, you would use the tag to end the unordered  list and to end an ordered list.

    Choosing Your Bullets (List Markers) for Unordered Lists

    By default markers in an unordered list will be solid round bullets; however, you can change these,  if you like, by defining the marker in the ‘style sheet rule’.   (Read about Internal Style Sheets)

    To change the marker in the ‘style sheet rule’  the code would look like the following where ‘marker‘ would be the value (see graphic below).

    The marker values you can choose from are shown in the graphic below.  The left side is the value to be used right after  list-style-type: .  This means that if you wanted a square instead of the default bullet the line of code would look like:  li {list-style-type:square}

    There may be times when you want a list without any markers. To do this you would use the code:  li {list-style-type:none}

    Helpful Tips

    1. Unless you specify otherwise items in an ordered list will default to being numbered using Arabic numerals (1, 2, 3, etc.)
    2. Items in unordered lists will default to solid round bullets.
    3. Keep text in lists as short as possible.
    4. Inserting a line break
      in your list will break the text to the next line while maintaining the same indenting.
    5. No text is permitted between the
          tag and the first
        • tag. However, should you use text here – it will have the same indentation but without the marker.
        • You can nest lists one inside the other but be sure to use all the correct opening and closing tags to maintain integrity.
        • Lists automatically default to a 40 pixel left indent.

      Next week we’ll cover how to use images for markers, choosing where to start list numbering as well as some other helpful list tips.

    Comments are closed.