HTML 105: Creating Lists in HTML

For a quick review of our previous article, let's take the following quiz:

Refresher Quiz

Ordered Lists

Ordered lists, ol are lists that are ordered just as the name implies. They follow a certain numerical order and they are used to itemize things when it is important to follow a certain order.

• When making an ordered list, you use the ol tag and then nest the li tags for each item. You can also create a sub-list for sub-categories.

• To demonstrate this, in our index.html file, let's turn our skills section into an ordered list.

• First, convert the u tags for the underlines into ol ordered list tags.

• Then wrap li list item tags around each skill as follows:

 <ol><li>HTML</li><li>CSS</li><li>Javacsript</li><li>React</li></ol>

Unordered Lists

Unordered lists, ul are used when itemizing things without following any particular order. They appear as bullet points: Here is how they are created in HTML:

• Start by wrapping our hobbies section with an ul tag, replacing the p tags, and deleting the div tags as well.

• Next, wrap each hobby item inside a li list item and see how it gets rendered on the live server preview page as bullet points as follows:

    <ul>
      <li>football</li><li>basketball</li><li>
      <a href="./assets/music.html" target="_blank">listening to music</a></li>
    </ul>

Nested Lists

Lists can be nested into a list as sub-categories. Let's take an example of the following, just for demonstration purposes:

• In the hobbies section let's create a sub-category under each section by nesting an unordered list item under each hobby

• Under the football hobby, after the 'football' text, nest an ul tag, and inside this ul tag, nest two li list items: 'watching football games', and 'playing football', as follows:

<li>football
      <ul>
          <li>watching football games</li>
          <li>playing football</li>
      </ul>
 </li>

• under the basketball hobby, in like manner, right after the basketball text, nest a ul tag with two li list items inside the ul tag. the List items should have the following content: 'watching basketball games', and 'playing basketball video games', as follows:

<li>basketball
      <ul>
          <li>watching basketball games</li>
          <li>playing basketball video games</li>
      </ul>
 </li>

This is how you make ordered lists and unordered lists and nest other lists into them. Next we will discuss how to make description lists.

Description Lists

Description lists are used to provide definitions or descriptions of terms. You can create a dictionary website using this.

The basic structure is the dl 'description list' tags wrapping the dt 'description terms' tag and the dd 'description definition' tags, in pairs. To demonstrate this, we will turn our contact section into a description list, just for demonstrative purposes:

• First, create a dl opening tag just below the Contact Me element and close the tag just below the U2B closing anchor tag. This wraps the entire contacts elements in a 'description list' tag, like this:

<dl>
    <a
      href="https://www.linkedin.com/in/ao111"
      target="_blank"
      title="my linkedin"
      >Linkedin
    </a>

    <a href="https://github.com/accdev1694" target="_blank" title="my github"
      >GitHub
    </a>

    <a
      href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
      target="_blank"
      title="my youtube"
      >U<sup>2</sup>B
    </a>
  </dl>

• Next, wrap the anchor tags of each contact item with a dt 'description term' tag to turn each item into a description term, like this:

<dl>
     <dt>
       <a
          href="https://www.linkedin.com/in/ao111"
          target="_blank"
          title="my linkedin"
          >Linkedin
        </a>
      </dt>

      <dt>
        <a href="https://github.com/accdev1694" target="_blank" title="my github"
            >GitHub
        </a>
      </dt>

      <dt>
        <a
          href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
          target="_blank"
          title="my youtube"
          >U<sup>2</sup>B
        </a>
    </dt>
  </dl>

• lastly, add a dd 'description definition' opening and closing tags, with a definition right under each dt description term element as follows:

<dl>
      <dt>
        <a
        href="https://www.linkedin.com/in/ao111"
        target="_blank"
        title="my linkedin"
        >Linkedin
        </a>
      </dt>
      <dd>Linkedin in as online platform for your professional profile</dd>

      <dt>
        <a href="https://github.com/accdev1694" target="_blank" title="my github"
        >GitHub
        </a>
      </dt>
      <dd>GitHub is an online platform for your codes and all things tech collaboration</dd>

    <dt>
      <a
      href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
      target="_blank"
      title="my youtube"
      >U<sup>2</sup>B
      </a>
    </dt>
    <dd>Youtube is an online video streaming platform</dd>
  </dl>

In summary, 'description lists' use dl tags at the highest level, then two tags for each item: the dt 'description term' and dd 'description definition', in the following structure:

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

Here is the live server preview of the Description List:

That is all about lists in HTML. Don't forget to like, subscribe, and comment on this blog. Thank you.