# HTML 105: Creating Lists in HTML

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

## Refresher Quiz

<details data-node-type="hn-details-summary"><summary>What are Block Level Elements?</summary><div data-type="detailsContent">Block-level elements take up the entire line. they do not share the same line with other elements</div></details><details data-node-type="hn-details-summary"><summary>What are Inline Elements?</summary><div data-type="detailsContent">Inline Elements take up the exact space of their content, thereby sharing space with other elements.</div></details><details data-node-type="hn-details-summary"><summary>What are Some Examples of Inline Elements</summary><div data-type="detailsContent">Headings and divs are examples of inline elements.</div></details><details data-node-type="hn-details-summary"><summary>What are some examples of Block Level Elements?</summary><div data-type="detailsContent">Spans and Buttons are inline Elements.</div></details><details data-node-type="hn-details-summary"><summary>What is the Difference Between a Span and a Div?</summary><div data-type="detailsContent">They are both containers for sectioning parts of the HTML document for styling purposes, whereas the difference between them is that the Span is an inline element while the Div is a block-level element.</div></details><details data-node-type="hn-details-summary"><summary>What tag is used for defining a div and a span</summary><div data-type="detailsContent">Just as the names imply, the <code>div</code> tag is used in creating the div element while the <code>span</code> tag is used in creating the span element.</div></details><details data-node-type="hn-details-summary"><summary>What are Block Level Elements?</summary><div data-type="detailsContent">Block-level elements take up the entire line. they do not share the same line with other elements</div></details><details data-node-type="hn-details-summary"><summary>What does the 'small' tag do in HTML?</summary><div data-type="detailsContent"><code>small</code>: It is used to make texts small</div></details><details data-node-type="hn-details-summary"><summary>What does the 'big' tag do in HTML?</summary><div data-type="detailsContent"><code>big</code>: It is used to make texts Big</div></details><details data-node-type="hn-details-summary"><summary>What does the Italic tag do in HTML?</summary><div data-type="detailsContent"><code>italic</code>: It is used to make texts Italicised</div></details><details data-node-type="hn-details-summary"><summary>What does the 'bold' tag do in HTML?</summary><div data-type="detailsContent"><code>b</code>: It is used to make texts Big</div></details><details data-node-type="hn-details-summary"><summary>What does the 'underline' tag do in HTML?</summary><div data-type="detailsContent"><code>u</code>: It is used to underline text in HTML</div></details><details data-node-type="hn-details-summary"><summary>What does the 'superscript' tag do in HTML?</summary><div data-type="detailsContent"><code>sup</code>: It is used to create superscript text such as exponents in mathematical expressions.</div></details><details data-node-type="hn-details-summary"><summary>What does the 'subscript' tag do in HTML?</summary><div data-type="detailsContent"><code>sub</code>: It is used to create subscript text, typical for references to footnotes on a page.</div></details><details data-node-type="hn-details-summary"><summary>What does the 'deleted' tag do in HTML?</summary><div data-type="detailsContent"><code>del</code>: It is used for creating a strike-through over texts to make them look deleted.</div></details><details data-node-type="hn-details-summary"><summary>What does the 'monospaced' tag do in HTML?</summary><div data-type="detailsContent"><code>tt</code>: It is used to create monospaced text in a document.</div></details><details data-node-type="hn-details-summary"><summary>What does the 'mark' tag do in HTML?</summary><div data-type="detailsContent"><code>mark</code>: It is used to create a transparent background over text to make the seem emphasized.</div></details>

## 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:
    

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712069522036/e9c7192c-96eb-432e-9c53-9b7eb179f925.png align="center")

## 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:
    

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712070676068/2833f0ab-44f6-46ce-b71f-426e896c4597.png align="center")

## 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:
    

```xml
<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:
    

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712077521815/f19ed6ee-be87-49a2-a4f4-839848a000d6.png align="center")

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:
    

```xml
<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:
    

```xml
<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:
    

```xml
<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:

```xml
<dl>
    <dt>
    </dt>
    <dd>
    </dd>
</dl>
```

Here is the live server preview of the Description List:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712077845570/f524c0e0-bb31-477f-8210-9e0ab771494e.png align="center")

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