The Wonderful World of Lists

Lists in HTML are a pretty straight forward concept. When creating a basic list, there are a few things to consider.

Rendered Example

  1. The entire list is contained in tags
  2. Each individual list item within the list is contained in tags

This will ensure that the entire list can be moved targeted and controlled. Each of the items contained in the list can be controlled as well. The above two items are in a list and more specifically an Ordered List. Let’s take a look in the code to see what that list looks like:

Markup

1
2
3
4
<ol>
    <li>The entire list is contained in tags</li>
    <li>Each individual list item within the list is contained in tags</li>
</ol>

As you can see, the two tags that are used are <ol> and <li> (ordered list and list item). There are other list types that can contain the <li>. Let’s take a look at Unordered Lists. They contain information that would look something like this:

Rendered Example

  • Milk
  • Bread
  • Eggs
  • Apples
  • Denver Broncos Cake

Markup

1
2
3
4
5
6
7
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Apples</li>
    <li>Denver Broncos Cake</li>
</ul>

Another list type that works with slightly different tags is the Definition List. It uses three tags to work and is illustrated below:

Rendered Example

Gamification
The use of game thinking and game mechanics in non-game contexts to engage users in solving problems.
Education
Form of learning in which the knowledge, skills, and habits of a group of people are transferred from one generation to the next through teaching, training, or research.

Markup

1
2
3
4
5
6
<dl>
    <dt>Gamification</dt>
    <dd>The use of game thinking and game mechanics in non-game contexts to engage users in solving problems.</dd>
    <dt>Education</dt>
    <dd>Form of learning in which the knowledge, skills, and habits of a group of people are transferred from one generation to the next through teaching, training, or research.</dd>
</dl>

Lists are very helpful in many ways, and have many practical applications. Aside from the simple listing of items we will explore how to manipulate there presentation in a later article. In the meantime, here is a simple example of how list items could be used to create a simple navigation bar:

Rendered Example

  • Home
  • About
  • Blog
  • Resources
  • Contact

And the complete HTML and CSS to make it all happen:

Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <style>
            ul{
                margin:0;
                padding:0;
            }
            li{
                list-style-type:none;
                margin:1px;
                padding:3px;
                background-color:#ccc;
                display:inline;
                float:left;
            }
        </style>
    </head>
 
    <body>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Resources</li>
            <li>Contact</li>
        </ul>
    </body>
</html>

**UPDATE**

A question was asked about how to start a list from a specific number. The answer is to define the Start attribute with an integer.

So to make something like this:

Rendered:

  1. Chicken
  2. Beef
  3. Pork

You would use this code.

Markup

1
2
3
4
5
<ol start="35">
     <li>Chicken</li>
     <li>Beef</li>
     <li>Pork</li>
</ol>

7 thoughts on “The Wonderful World of Lists

  1. BlueBird

    I was wondering, is it possible to do an ordered list but that it begins by 6 for example and not by 1 as usual?
    If yes, what would be the code for it?

    Thanks for your help !

  2. craig

    I’d like to know why a programmer has to input a “code” for colors and not a specific color name. Do HTML writing programs not understand or recognize color descriptions? Does CSS understand color names?

    1. Abdoanmes Post Author

      Craig, there is a lot to answer that question, but YOU CAN use color names in HTML and CSS. For example, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow are all valid color names. But with it comes down to it, there are 16,777,216 available colors based off the hexidecimal system and having a specific name for each would be terribly cumbersome and I am sure arbitrary at times. With a hexidecimal system, changing certain alphanumeric combinations will allow for you to iteratively adjust colors to your liking. We won’t have time to deeply explore color in this particular course, but here is a great article that can help better explain things: http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

  3. cooie

    I have no idea why, but when i tried to understand lists from the book, I got nothing from it. Yet when I look at this post it becomes very clear. I guess sometimes I need to take a break and come back to a concept to fully grasp it.

Leave a Reply