Lists

Ordered & Unordered Lists

An unordered list

	    is displayed as:
		apples
oranges
pears
 
	    <ul>

	      <li>apples</li>

		  <li>oranges</li>

		  <li>pears</li>

		</ul>

HTML provides two basic types of list tags, ordered and unordered. As you might guess, an ordered list is a numbered list of items and an unordered list does not have numbers. For both types, the list tag is a container tag, either <ol> or <ul> and inside it appear list item tags, <li>, and inside each of those is the text of the item itself.

A poorly written list

  
	    <ul>

		  My shopping list:

	      <li>apples</li>,

		  <li>oranges</li>,

		  <li>pears</li>

		</ul>

Remember: Don't put text before, after or in between different <li> tags.

Using good style, no other text or tags should appear before, after or in between two different <li> tags. In the example to the right, the text in red should not be there. Most browsers will display an example like this one properly, but since it is poor style, they may not. To fix this example, you could put "My shopping list" before <ul> and put the commas inside the <li> tags.

List Attributes

An ordered list

	    is displayed as:
		Introduction
Main Idea
Conclusion
 
	    <ol 
		type="A"
		>

	      <li>Introduction</li>

		  <li>Main Idea</li>

		  <li>Conclusion</li>

		</ol>

Try It: Add a list to your page. Try different values for the type attribute.

Most browsers display unordered list items with round bullets and ordered list items with "1.", "2.", etc. However, you can change the style of the list items in the <ul> or <ol> tag. For the <ul> tag, you can add the type attribute, which accepts disc, square, or circle (default), indicating the shape of the bullet. For the <ol> tag, the type attribute indicates the number style and the valid values are A, a, I, i, and 1 (default). For A and a, the items will be marked with letters of the alphabet instead of numbers and for I and i they will be marked with Roman numerals. You can also use the start attribute to change the number the list starts with.

Definition Lists

A definition list

  
	    <dl>

	      <dt>girl</dt>

		  <dd><em>n.</em> a female child</dd>

		  <dt>inc</dt>

		  <dd><em>abbr.</em> short for incorporated</dt>

		</dl>

is displayed as:

  
		girl
		n. a female child
		inc
		abbr. short for "incorporated"

There is a another list tag in HTML called a definition list, that is designed especially for displaying a term, such as a word, and the definition of the term. Most browsers display the term on the left and the definition on the next line and indented.

Just like the other list tags, there is an outer container tag for the list itself, <dl>, and the list items are inside it. However, the list items are now broken up into two tags, the term inside a <dt> and the definition inside a <dd> tag. Just like ordered and unordered lists, it is poor style to put text outside of the <dt> or <dd> tags but inside the <dl> tags.

End of Topic

Prev Next