HTML lists

Compose tips

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <div> <pre> <address> <h1> <h2> <h3> <h4> <h5> <h6>This site allows HTML content. While learning all of HTML may feel intimidating, learning how to use a very small number of the most basic HTML “tags” is very easy. This table provides examples for each tag that is enabled on this site.For more information see W3C’s HTML Specifications or use your favorite search engine to find other sites that explain HTML.
    Tag Description You Type You Get
    Tag Description You Type You Get
    Anchors are used to make links to other pages. <a href="">TaxoBank</a> TaxoBank
    Emphasized <em>Emphasized</em> Emphasized
    Strong <strong>Strong</strong> Strong
    Cited <cite>Cited</cite> Cited
    Coded text used to show programming source code <code>Coded</code> Coded
    Unordered list – use the <li> to begin each list item <ul> <li>First item</li> <li>Second item</li> </ul>
    • First item
    • Second item
    Ordered list – use the <li> to begin each list item <ol> <li>First item</li> <li>Second item</li> </ol>
    1. First item
    2. Second item
    Definition lists are similar to other HTML lists. <dl> begins the definition list, <dt> begins the definition term and <dd> begins the definition description. <dl> <dt>First term</dt> <dd>First definition</dd> <dt>Second term</dt> <dd>Second definition</dd> </dl>
    First term
    First definition
    Second term
    Second definition
    No help provided for tag img.
    No help provided for tag div.
    Preformatted <pre>Preformatted</pre>
    No help provided for tag address.
    Header <h1>Title</h1>


    Header <h2>Subtitle</h2>


    Header <h3>Subtitle three</h3>

    Subtitle three

    Header <h4>Subtitle four</h4>

    Subtitle four

    Header <h5>Subtitle five</h5>
    Subtitle five
    Header <h6>Subtitle six</h6>
    Subtitle six

    Most unusual characters can be directly entered without any problems.

    If you do encounter problems, try using HTML character entities. A common example looks like &amp; for an ampersand & character. For a full list of entities see HTML’s entities page. Some of the available characters include:

    Character Description You Type You Get
    Ampersand &amp; &
    Greater than &gt; >
    Less than &lt; <
    Quotation mark &quot;
  • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines.

Can I put these together?

Yes. Just remember to close each one. You could do something like an OL list and under each LI command for the OL, you could put in a small UL. Like so:

  1. Main Heading
    • List item 1
    • List item 2
  2. Secondary Heading
    • List item 1
    • List item 2

here’s what it looks like:

<LI>Main Heading
<LI>List item 1
<LI>List item 2
<LI>Secondary Heading
<LI>List item 1
<LI>List item 2

There is a pattern to putting unordered lists under one another.


  • The first list gives you the solid bullet
  • The second gives you the empty bullet. You can see that above.
  • Each list after that gives you a square bullet.

Nesting Lists within Lists:

Note that it is possible to nest a list within another list.  It is also possible to mix the types of lists which will be nested within one another.  See the example below:



Code Result
Shopping List:<hr>
      <li>Potato Chips
      <li>Tootsie Rolls
      <li>Gummy Bears
Shopping List:

  1. Fruit
    • Apples
    • Pears
    • Oranges
  2. Vegetables
    • Celery
    • Lettuce
    • Carrots
  3. Snacks
    • Potato Chips
    • Tootsie Rolls
    • Gummy Bears

Using nested lists is an excellent way of generating an outline format using HTML:



Code Result
<ol type="I">
    <ol type="A">
            <ol type="a">
    <ol type="A">
    <ol type="A">

  1. Beaked.
    1. Ambiguous.
    2. Friendly.
      1. Benevolent.
      2. Inviting.
        1. Talkative.
        2. Flirtatious.
        3. Jocular.
      3. Charming.
    3. Menacing.
  2. Clawed.
    1. Three-Toed.
      1. Lesser.
      2. Greater.
    2. Two-Toed.
  3. Forked-Tongued.
    1. Red.
    2. Orange.
    3. Blue.

Note that indentation is preserved within the nested lists.  Also note that the code has been indented to make divisions within the complex nested lists easier to follow and that it parallels the indents produced by the code, itself.









Leave a Reply

Your email address will not be published. Required fields are marked *