HTML5 banner image.

Lists are common structures on web pages. They can be ordered or unordered, what we would call numbered lists and bulleted lists in Microsoft Word. Lists can be styled to perform other functions on webpages; menus are often actually coded as lists with CSS styling applied to them. This is semantically correct as a website’s menu is a list of links on and for that website.

In this post:

  1. General
  2. Unordered lists
  3. Ordered lists
  4. Styling lists
  5. start Attribute
  6. reverse Attribute
  7. Nesting lists

1. General

Both types of lists have simple defaults as can be seen in the following Codepen:

See the Pen HTML Lists by David Fox (@foxbeefly) on CodePen.

2. Unordered lists

Unordered lists are what we refer to as bulleted lists in Microsoft Word. An unordered list does not suggest a specific sequence or preference of the items in the list.

3. Ordered lists

Ordered lists are the equivalent of numbered lists in Microsoft Word. An order or preference is suggested, as in a sequence of steps to be taken or that some items are more important or take preference over others.

4. Styling lists

Both list types can be styled in a number of ways. The default bullet point is a solid, dot and the default numbered list uses a simple 1, 2, 3. This can be modified using the type attribute:

See the Pen HTML lists type attribute by David Fox (@foxbeefly) on CodePen.

You want to know if you can use a custom image as a bullet point, don’t you? Head over to the post Create a custom bullet using CSS

The next page introduces further aspects of HTML lists that I have seen in Grade 12 assessments and can be used in Grade 11 & 12 PATs.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.