CSS Design: Intro to HTML Lists and Techniques

HTML lists are used everywhere in web design. From a numbered list to navigation, lists are one of the basic building blocks of web design and, if used correctly, are quite semantic. Once you understand lists and their attributes, you will start to see them all the time.

Types of Lists

There are three types of lists in HTML:

Unordered Lists
Unordered Lists start with the <ul> tag and are designed to hold information in no particular order in that list. Each item in that list is called a list item and starts with a <li> tag.

Here is what a standard unordered list looks like:

  • List Item 1
  • List Item 2
  • List Item 3
<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

Ordered Lists
Ordered lists start with the <ol> tag. These lists are designed to have logical order because the list items are now numbered as compared to an unordered list. Each list item starts with <li> tag.

Here is what a standard ordered list looks like:

  1. List Item 1
  2. List Item 2
  3. List Item 3
<ol>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ol>

Definition Lists
Definition lists start with the <dl> and have different item tags. There now is this new <dt> tag that defines the list item called a definition title. After that tag you can include a <dd> tag and give a definition description.

Here is a pretty standard definition list:

List Item Title 1
- Item Description 1
List Item Title 2
- Item Description 2
List Item Title 3
- Item Description 3
<dl>
   <dt>List Item Title 1</dt>
      <dd>- Item Description 1</dd>

   <dt>List Item Title 2</dt>
      <dd>- Item Description 2</dd>

   <dt>List Item Title 3</dt>
      <dd>- Item Description 3</dd>
</dl>

Definition lists are very semantic and are much more specific than the other two lists. They can be used in many instances and give a very organised attribute to your code and content. Chris over at CSS-Tricks has a great post for a Definition List’s semantic uses over the traditional options.

For more on HTML lists, the W3C has a ton of useful information on HTML lists and their uses.

CSS List Navigation

CSS Navigation is just a fancy way to talk about a dressed up list used for navigation. The reason we use lists for navigation is because lists make sense. A list can group all of our buttons together and display them in a neat package. Most of the time order doesnt matter with a navigation setup, so we will use an unordered list in this example.

First, lets make a simple unordered list with anchor tags in each list item.

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Pictures</a></li>
   <li><a href="#">Documents</a></li>
   <li><a href="#">Videos</a></li>
</ul>

Nows lets style the list, but we don’t want to use inline styles because that is not semantic.

Inline Styles vs CSS
On a side note, here is what inline styles look like:

<div style="background: red;">
   The inline style for this div should make it red.
</div>

Instead of the above situation, we should separate code from content as much as possible. Just like this:

div   {
   background: red;
}

If your not too sure about CSS(cascading style sheet), read this How to Guide that the W3C made to help people understand CSS.

Style the List
Back to the navigation, lets add the CSS to make it look and function like a simple menu bar.

ul          {
                float: left;
                width: 100%;
                background-color: #454545;
                font-family: Arial, Helvetica, Sans-serif; }
ul li           {
                display:inline;
                list-style: none;}
ul li a     {
                padding: 7px 12px;
                border-right: 3px solid #151515;
                text-decoration: none;
                background-color: #454545;
                float: left;
                color: #2286C7;}
ul li a:hover   {
                background-color:#656565;}

The example is very simple, but semantic and functional.

Example

Extended CSS Navigation Examples

Margin and Lists

When you build a list with linked list items, its best to increase the size of the click-able area. The best way to do this is to use padding vs margin. Far too many times list items are spaced from each other with margin only, while padding is completely ignored. It shouldn’t be a task for the user to click on your link.

ul li a{  
   padding: 5px; /*increases the click-able area*/
   margin: 5px; /*spaces apart*/
   display:block;}

There are a few articles talking more about this one subject. Check out CSS-Tricks and SohTanaka for their wisdom on the subject.

Related HTML List Technique Articles

One Response to CSS Design: Intro to HTML Lists and Techniques

  1. Emberlynn says:

    Haha, shoudln’t you be charging for that kind of knowledge?!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>