Unordered, Ordered, & Definition Lists

Lists are an everyday part of life. To-do lists determine what to get done. Navigational routes provide a turn by turn list of directions. Recipes provide both a list of ingredients and a list of instructions. With a list for nearly everything, its easy to see how they have become popular online.

Unordered List

Unordered lists are purely a list of related items, in which their order does not matter nor do they have a numbered or alphabetical list element. Creating an unordered list in HTML is accomplished using the unordered list, ul, block level element. Each list item within an unordered list is individually marked up using the list item, li, block level element.

<ul>
   <li>iPad</li>
   <li>iPhone</li>
   <li>MacBook Air</li>
</ul>
Demo of above code
  • iPad
  • iPhone
  • MacBook Air

Ordered List

The ordered list element, ol, works just like the unordered list element, including how each individual list item is created. The main difference between an ordered list and an unordered list is that with an ordered list the order of which items are represented is important. Instead of showing a dot as the default list item element, an ordered list uses numbers. Using CSS, these numbers can then be changed to letters, Roman numerals, and so on.

<ol>
   <li>iPad</li>
   <li>iPhone</li>
   <li>MacBook Air</li>
</ol>
Demo of above code
  1. iPad
  2. iPhone
  3. MacBook Air

Definition List

Another type of list often seen online, yet quite different than that of an unordered or ordered list, is the definition list. Definition lists are used to outline multiple terms and descriptions, often in the case of a glossary. Creating a definition list in HTML is accomplished using the dl element. Instead of using the li element to mark up list items, the definition list actually requires two elements: the definition term element, dt, and the definition description element, dd.

<dl>
   <dt>study</dt>
   <dd>the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books
   </dd>
   <dt>design</dt>
   <dd>a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made
   </dd>
   <dd>purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
   </dd>
   <dt>business</dt>
   <dt>work</dt>
   <dd>a person’s regular occupation, profession, or trade</dd>
</dl>
Demo of above code
study
the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books
design
a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made
purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
business
work
a person’s regular occupation, profession, or trade

Nested Lists

One reason lists are extremely powerful within HTML is the ability to nest lists inside one another. Unordered lists can live within ordered or definition lists, definition lists can live within unordered and ordered lists, and vice versa. Every list has the ability to be placed within another list, nesting them continually. The potential to do so doesn’t provide free reign to build pages completely out of lists. Lists should still be reserved specifically for where they hold the most semantic value.

<ol>
   <li>Walk the dog</li>
   <li>Fold laundry</li>
   <li>
		Go to the grocery and buy:
	   <ul>
		   <li>Milk</li>
		   <li>Bread</li>
		   <li>Cheese</li>
	   </ul>
   </li>
   <li>Mow the lawn</li>
   <li>Make dinner</li>
</ol>
Demo of above code
  1. Walk the dog
  2. Fold laundry
  3. Go to the grocery and buy:
    • Milk
    • Bread
    • Cheese
  4. Mow the lawn
  5. Make dinner

Navigational List Example

The following example shows how navigation also called as menu in websites is created.

<ul>
   <li>
	   <a href="#" title="Home">Home</a>
   </li>
   <li>
	   <a href="#" title="Services">Services</a>
   </li>
   <li>
	   <a href="#" title="About">About</a>
   </li>
   <li>
	   <a href="#" title="Contact">Contact</a>
   </li>
</ul>
ul {
  list-style: none;
  margin: 0;
}
li {
  float: left;
}
a {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
a:hover {
  background: #454d59;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: #d0d2d5;
}
li:first-child a {
  border-left: none;
  border-radius: 4px 0 0 4px;
}
li:last-child a {
  border-right: none;
  border-radius: 0 4px 4px 0;
}
Demo of above code

 


comments powered by Disqus