From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 2.8: Lists

Lists are quite common, so it makes sense to have lists. HTML supports unordered, ordered, and lists of definitions. Unordered lists can be thought of as bullet points, and without CSS we do get bullets shown for each item on the list. Ordered list are numbered lists, meaning that each item in the list is numbered. Definitions are your list of terms that you often see in textbooks and other academic material.

All three types of list work in a very similar manner, with ordered and unordered list being trivially easy to switch between. To create an unordered list, we start with a <ul> tag. Between the start and end of this tag, we use <li> to indicate a list item. Here is a simple example:

<ul>   <li>first entry</li>
  <li>second entry</li>
  <li>third entry</li>
  <li>fourth entry</li>
</ul>

• first entry
• second entry
• third entry
• fourth entry

If we were to replace the <ul> tag with <ol> (and obviously the </ul> with </ol>) then we would end up with the following result:

1. first entry
2. second entry
3. third entry
4. fourth entry

List items can contain whatever you want, including other lists. Placing a list inside another list is known as nesting. The code below is an example of nesting unordered lists.

<ul>
  <li>first entry</li>
  <li>second entry
  <ul>
    <li>first sub-entry</li>
    <li>second sub-entry</li>
  </ul>
  </li>
  <li>third entry
  <ul>
    <li>first sub-entry
    <ul>
      <li>first sub-sub-entry</li>
      <li>second sub-sub-entry</li>
    </ul>
    </li>
    <li>second sub-entry</li>
    </ul>
    </li>
  </li>
  <li>fourth entry</li>
</ul>

• first entry
• second entry
  • first sub-entry
  • second sub-entry
• third entry
  • first sub-entry
    • first sub-sub-entry
    • second sub-sub-entry
  • second sub-entry
  • third sub-entry
• fourth entry

Again, switching ≶ul> to <ol> would then result in the following output:

1. first entry
2. second entry
   1. first sub-entry
   2. second sub-entry
3. third entry
   1. first sub-entry
      1. first sub-sub-entry
      2. second sub-sub-entry
   2. second sub-entry
   3. third sub-entry
4. fourth entry

Mixing between the two types of lists is also possible. Simply have some

tags have the opposite type of list for it’s nested list. The image of this is below but as the code is very self-evident so will not be listing it here, but you canget the code in the repository (samples/chapter02/listDemo.html) if you want to take a look at the code. A good practice exercise would be to try and recreate the following list without looking at the demo.

1. first entry
2. second entry
   • first sub-entry
   • second sub-entry
     1. first sub-sub-entry
     2. second sub-sub-entry
   • third sub-entry
     • first sub-sub-entry
     • second sub-sub-entry
3. third entry
   1. first sub-entry
      • first sub-sub-entry
      • second sub-sub-entry
   2. second sub-entry
      1. first sub-sub-entry
      2. second sub-sub-entry
   3. third sub-entry
4. fourth entry

The final type of list, which is only vaguely a list, is the definitions list. This works similar to the above lists but each item of the list has two different tags used to describe it instead of just one. To start a definitions list you use the <dl> tag. Each element in this list consists of a term and a description. To specify the term you use the <dt> tag. To specify the description of the term you use the <dd> tag. Here is a simple example:

<dl>
  <dt>word to define</dt>
  <dd>definition of word</dd>

  <dt>second word to define</dt>
  <dd>definition of second word</dd>

  <dt>third word to define</dt>
  <dd>definition of third word</dd>
</dl>

word to define

definition of word

second word to define

definition of second word

third word to define

definition of third word