Lists - Adam's HTML Planet - Tutorials and Tips on how to create websites using HTML
Lists
Adam's HTML Planet - Home Page
list of tutorials next tutorial

Lists come in three main flavours - bulleted, numbered and definition.

  1. Open the file tables.htm in your text editor
  2. Make the additions to the file indicated below. Put it after the last entries you made - but before the </BODY> and </HTML> tags!
  3. Save the file [lists.htm]
  4. Preview the results in your browser

<HR>
This is a bulleted or 'unordered' list
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
<HR>
This a numbered or 'ordered' list
<OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</OL>
<HR>
<DL>
<DT>Item 1<DD>This is the first item
<DT>Item 2<DD>This is the second item
<DT>Item 3<DD>This is the third item
</DL>
<HR>
See
an example
Let's look at these lists in a bit more detail.

<UL>
<LI>
</UL>
The tags <UL> and </UL> open and close the bulleted or 'unordered' list. Each list item is noted by the <LI> tag, which doesn't have to have a closing tag you'll have noticed. You can have as many items as you like, you can add items into a list and the entries could be sentences and can contain <P> and <BR> tags as well.

<OL>
<LI>
</OL>
The tags <OL> and </OL> open and close the numbered or 'ordered' list. You'll have seen that the list item tag is exactly the same as for an unordered list. The same comments apply. If you add something to the list you don't have to worry about the numbering - the browser will take care of that.

<DL>
<DT>
<DD>
</DL>
The definition list differs from other two in that although the <DL> and </DL> open and close the list as you would expect, you have two tags for each list item - one for the item itself and the other for a definition. again the definition can consist of sentences and paragraphs if you wish - they can even contain other lists [nested lists].

The info you have just read is presented as a definition list! ... but you'll have spotted that without me telling you I'm sure.


Go up to the top of the pageUp Arrow to choose where you go next