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>

12 thoughts on “Article Postings

  1. craig

    I thought it was quite interesting the divide that the respondents posted about the need for education in website design. I suppose website design is like most jobs where if you have the skills, one doesn’t need to have a degree. Well, as of yet I don’t possess the mad skills, but hope to be in the ballpark by the end of the semester.

    1. Tryenamy

      Hey everyone, this is Ryan Higley and I work with Adam in the Instructional Technology Center here on campus. I created all the artwork for the course this semester and helped Adam with some of the gamified elements. I’ll be popping in here occasionally throughout the semester with comments and ideas mostly related to design. I’m excited to talk with you all.

      1. Abdoanmes

        Thanks, Ryan! Thank you a bunch for helping with the design as it adds a much better feeling to the completely gamified course. Your incite on design principles and visual communication will definitely be appreciated.

    1. adam

      If you comment using the reply under someones name, you will be able to reply in context to that person. Click the reply under the article if you want to reply to the overall topic.

      1. adam

        Comments can go three levels deep. Oh, and by the way, we are experiencing a few issues with the badging points, so bear with me as I figure that out. Just so you know, I will be keeping track of you grade outside of the system so that you are accurately awarded the proper grade.

Leave a Reply