Spelchan.com Logo

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
  • Sidebar

    Chapter 2 Contents

    2.1 HTML Basics Cheat Sheet

    The cheat sheet for this chapter.

    2.2 What is HTML

    A brief history of HTML

    2.3 Structure of a HTML Document

    What makes up a HTML file

    2.4 Tags and Elements

    How tags are used to create HTML elements

    2.5 Special Symbols

    How to display things such as <, >, &, 😀

    2.6 Links

    Linking to other pages, other sites, and within the page

    2.7 Images

    Adding images and image maps to your page.

    2.8 Lists

    Ordered and unordered lists and nesting lists.

    2.9 Tables

    Tables with spanning rows and columns.

    2.10 HTML Only Game Project

    The game of NIM is the project for this chapter.

    2.11 HTML Only Game Solution

    How my solution to the NIM game was put together

    Bonus article

    Solving Nim.

    ← previous section
    Images
    next section →
    Tables
    Table of Contents