Coding For Dummies
Book image
Explore Book Buy On Amazon

Websites have used lists for decades to convey related or hierarchical information. In the following figure, you can see an older version of Yahoo.com that uses bulleted lists to display various categories and today’s Allrecipes.com recipe page, which uses lists to display various ingredients.

image0.jpg

Lists begin with a symbol, an indentation, and then the list item. The symbol used can be a number, letter, bullet, or no symbol at all.

Creating ordered and unordered lists

The two most popular types of lists are:

  • Ordered: Ordered lists are numerical or alphabetical lists in which the sequence of list items is important.

  • Unordered: These lists are usually bulleted lists in which the sequence of list items has no importance.

You create lists by specifying the type of list as ordered or unordered, and then adding each list item using the li tag, as shown in the following steps:

  1. Specify the type of list.

    Add opening and closing list tags that specify either an ordered (ol) or unordered (ul) list, as follows:

    • ol to specify the beginning and end of an ordered list.

    • ul to specify the beginning and end of an unordered list.

  2. Add an opening and closing tag (that is,

  3. and
  4. ) for each item in the list.

    For example, here’s an ordered list:

<ol>
   <li> List item #1 </li>
   <li> List item #2 </li>
   <li> List item #3 </li>
</ol>

Nesting lists

Additionally, you can nest lists within lists. A list of any type can be nested inside another list; to nest a list, replace the list item tag

  • with a list type tag, either
      or
        .

        The example code here shows various lists types including a nested list.

        image1.jpg

        The page produced by the code is shown here:

        image2.jpg

        The

        tag shown in this code sample is not necessary to create a list. It's used here only to name each list.

        Every opening list or list item tag must be followed with a closing list or list item tag.

  • About This Article

    This article is from the book:

    About the book author:

    Nikhil Abraham is the CFO of Udacity, an education company that teaches technology skills that help launch or advance a career. Prior to joining Udacity, Nik worked at Codecademy where he taught beginning coders across a variety of professions. He is also author of Coding For Dummies and Getting a Coding Job For Dummies.

    This article can be found in the category: