Lesson 7: HTML Lists  

     Introduction     

Lists are another nice formatting tool for the content of your webpages. The most commonly used list types are:

• unordered lists (bullet lists) - the one you see here
• ordered lists
• definition lists

The HTML elements used for lists are block-level elements, so their content is always displayed separated from surrounding content, just like the content of other block-level elements like paragraphs and headings.

While an unordered list like the one above uses bullets by default before each list item, an ordered list puts ordinal numbers (1., 2., 3., ...) before each list item. In the list above, you can also see that the content of lists is displayed indented.

If you want an example for a definition list, just take a look at the glossary, it´s nothing else than one long definition list.

     Unordered Lists (Bullet Lists)     

An unordered list is formed with the element UL and contains at least one list element LI. So the very basic form of an unordered list would be ...

Here´s an example for an unordered list with some content. I´ve written the tags of the list in bold letters to make them stand out better.

Display Example: This is how it looks like in your browser.

     Ordered Lists     

An ordered list is built with the element OL and also at least one list element LI. So the basic code for an ordered list looks like this:

As said already, an ordered list uses ordinal numbers instead of bullets before each list item. Below is an example for an ordered list.

Display Example: This is how it looks like in your browser.

     Definition Lists     

A definition list is usually used to create glossaries and has a little bit more complex structure than the two lists above. The basic code for a definition list is formed with the element DL and at least one element pair DT and DD.

DT stands for Definition Term and contains the term to be explained and DD stands for Definition Definition and contains the definition of the term. The content of DD is displayed indented relatively to the content of DT.

DT may contain only text and inline elements such as B, I, U, SPAN, STRIKE. It may NOT contain block-level elements such as P and H1.

DD may contain text, inline elements and may also contain block-level elements like P, H1, H2, OL, DL, TABLE. This allows for definition lists to be complexely nested, but don´t bother about this now as you probably won´t have a use for nested definition lists anyway.

Here´s the basic code for a definition list.

If a term has more than one definitions, you can also use more DD elements after the DT element, one for each separate definition:

     Try It Out     

Now experiment a little bit with lists, adding the different types of lists to your first webpage. In the video I´ll show you how you can speed up the creation of lists, using 1stPage2000´s list buttons.

Video button not working ? Click Here

The next lessons gives you an introduction to HTML tables. It´s quite important you understand how to work with tables, because they are very frequently used to form the layout of webpages.