Lesson 10: All you need to know about HTML lists

 Signed in as:    
      Sign out



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends


This first video describes HTML's support for lists:

This video also covers the attributes and style properties related to lists.

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.


Lesson 10: All you need to know about HTML Lists

Click here for the video transcript


Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this lesson is primarily concerned with creating ordered and unordered lists.

In the files you created for the "Flying Drones Academy" (FDA.html and FDAHist.html), there are two lists in the left hand column. Convert these to unordered lists:

First, replace the <br> tag after 'Links to site pages' with a </p> end tag and do the same with the <br> tag after 'Further information'.

Next, after the new </p> tags, on the next line, add a <ul> tag.

Replace the three &nbsp; non-breaking space character entity references in front of each list entry with <li> tags

And replace the trailing <br> tags with </li> tags.

Replace the </p> tags at the end of the lists with </ul> tags.

In FDAHist.html, in the main column, is a list of courses. Convert this to an ordered list, starting with '200' (use a process similar to the one you used above for the left hand column).

Aesthetically, you might want to replace the <p> tag in front of the list with a <div> tag (in which case you should replace the </p> end tag with a </div> end tag, of course).

Note: this might require some adjusting of your style sheet to fit the page into the viewport nicely. Just a heads' up.

Optional: play with the list-style-type and list-style-position properties for the ordered list. For the unordered lists, try playing with the list-style-image property.


The video below is a bonus video, and optional because it's a little nerdy / geeky. It explores an application for lists that I find useful: create a list of links, a definition list whose elements are all <a> elements - links to sites I use a lot; I call this 'bookmarks.html', store it in my 'scraps' directory, and make it be the home page for all the browsers I use.


Bonus video: An application of lists.

Click here for the video transcript



Supplemental materials

    A cumulative summary of the contents of the course so far: Click here


Hands on exercise (Optional)

Using the session content as a guide, build your own bookmarks page and make it the home page for all your browsers.


 Lesson navigation 




Email us if you would like additional information. We would love to see your comments and recommendations for our site.