SJHwebdesigns

Lists

« Previous: Links | Next: Tables »

HTML allows you to create ordered, unordered and definition lists.

<ol>

You can create ordered lists using the <ol> tag.

Code Output
<ol>
    <li>Elephants</li>
    <li>Wildebeeste</li>
</ol>
  1. Elephants
  2. Wildebeeste

<ul>

Unordered lists are created using the <ul> tag.

Code Output
<ul>
    <li>Elephants</li>
    <li>Wildebeest</li>
</ul>
  • Elephants
  • Wildebeest

<li>

The <li> tag defines a list item. The <li> tag is used in both ordered (<ol>) and unordered lists (<ul>).

The <li> element can contain many other elements including headings, paragraphs and other lists:

Code Output
<ul>
    <li>A simple list item</li>
    <li>
         <h2>A complicated list item</h2>
         <p>You can put loads of stuff inside a list item, including further lists:</p>
         <ol>
             <li>Sub-list item 1</li>
             <li>Sub-list item 2</li>
         </ol>
    </li>
</ul>
  • A simple list item

  • A complicated list item

    You can put loads of stuff inside a list item, including further lists:

    1. Sub-list item 1
    2. Sub-list item 2

Remember, though, that everything inside an ordered or unordered list must be contained inside <li> tags - you cannot put anything between or outside of list items. For example,

<ul>Elephants<li>Wildebeest</li></ul>

is wrong because ‘Elephants’ is not contained within <li> tags.

Remember also to keep your tags properly nested - if you open any tags within a list item, these tags should always be closed before the closing <li>.

<dl>, <dt> and <dd>

These tags are used to create definition lists; these work slightly differently from ordered and unordered lists, and are far less common than the other two types, so I will leave them for you to research if you’re interested: you can find all the relevent information at www.w3schools.com/tags/.

« Previous: Links | Next: Tables »

Page style: Dark Light