List Tags

Find in-depth information about html tags at W3 Schools.

A list is a block level tag that contains items that are displayed as a list. Each list item is shown on a new line in a browser, but list items are neither block nor inline elements. Lists can be either bulleted or ordered.

An unordered list is declared with the tag <ul> and closed with </ul> while ordered lists use the <ol> and </ol> tags.

Within these tags each list item is started and stopped with <li> and </li> tags.

List bullets can be modified by using the style ‘list-style-type‘. Some common bullet types include:

Common unordered list bullets

<li style=”list-style-type:disc”>default unordered bullet (no style typically needed)</li>
<li style=”list-style-type:circle”>circle</li>
<li style=”list-style-type:square”>square</li>
<li style=”list-style-type:none”>square</li>

Common unordered list bullets

  • default unordered bullet (no style typically needed)
  • circle
  • square
  • none

Common ordered list bullets

<li style=”list-style-type:decimal”>default ordered bullet (no style typically needed)</li>
<li style=”list-style-type:upper-alpha”>upper-alpha</li>
<li style=”list-style-type:lower-alpha”>lower-alpha</li>
<li style=”list-style-type:upper-roman”>upper-roman</li>

Common ordered list bullets

  • default ordered bullet (no style typically needed)
  • upper-alpha
  • lower-alpha
  • upper-roman

Unordered lists:

<ul>
   <li>are typically bulleted, but can feature custom bullets or no bullets by using styles,</li>
   <li>can contain other lists within them,
      <ul>
         <li>that could be unordered</li>
      </ul>
      <ol>
         <li>or ordered</li>
      </ol></li>
   <li>new lists contained within a list must be encompassed within one list item.</li>
</ul>

  • are typically bulleted, but can feature custom bullets or no bullets by using styles,
  • can contain other lists within them,
    • that could be unordered
    1. or ordered
  • new lists contained within a list must be encompassed within one list item.

Ordered lists:

<ol>
   <li>typically are numbered, but can feature custom numbering systems by using styles,</li>
   <li>can contain other lists within them,
      <ul>
         <li>that could be unordered</li>
      </ul>
      <ol style=”list-style-type:lower-alpha”>
         <li>or ordered with the same numbering system or something different</li>
      </ol></li>
   <li>new lists contained within a list must be encompassed within one list item.</li>
</ol>

  1. typically are numbered, but can feature custom numbering systems by using styles,
  2. can contain other lists within them,
    • that could be unordered
    1. or ordered with the same numbering system or something different
  3. new lists contained within a list must be encompassed within one list item.

Notice from the examples above that if you want to nest one list within another list you must completely encompass your new list with one list tag (<li>and</li>) from the parent list. There are many browsers that will display nested lists that don’t follow this process but you cannot be sure how your lists will be displayed if you don’t do it this way.

Use the tool below to try out some this html.

Leave a Reply