html tutorial, internet tutorials

  Lesson 7: HTML Lists  


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 ...

    <li> </li>

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.

<b>1stPage2000</b> is my favorite free HTML editor. It makes creating webpages easy and fast because ...</p>

it uses different colors for different HTML elements so one gets a better view over a document´s structure.</li>
it has hotkeys for the quick insertion of tags.</li>
I can use pre-written HTML code snippets.</li>
it has a great, comprehensive HTML reference.</li>
it has many wizards for the speedy inclusion of tables, images, lists, links and other elements.</li>

     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:

    <li> </li>

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.

<h1>Native American Ten Commandments</h1>
<p> ( author unknown ) </p>

Treat the Earth and all that dwell thereon with respect.</li>
Remain close to the Great Spirit.</li>
Consider the impact on the next six generations when making decisions.</li>
Work together to benefit all humanity.</li>
Freely give help and kindness wherever needed.</li>
etc ...

     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.

     <dt> </dt>
     <dd> </dd>

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

     <dt> </dt>
     <dd> </dd>
     <dd> </dd>

     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.

previous lesson top of page next lesson

    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Skills & Tools
HTML Basics
The Head Section
The Body Section
Anchors & Links
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


FAQ / Support


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
Page copy protected against web site content infringement by Copyscape