HCDE532 » Using Lists & List Items
XHTML specifications contain special codes for creating lists of items. Lists can be very useful in calling out important material and navigational items.
Creating Lists in HTML
See Also: HTML Lists | W3 Schools
There are a few different types of list you can create:
1. Ordered Lists
By creating an ordered list, we are specifying that out list items will be numbered in order of appearance in the code:
1 2 3 4 5 6 |
<h2>Ordered List</h2>
<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ol>
|
Where <ol> is the tag for an ordered list and <li> is the tag for the list item inside of the ordered list.
2. Unordered Lists
The default type of an unordered list is to create a solid round shaped bullet for the list items—eventually you will see how to change the appearance of, hide or create your own image for the bullet using style sheets.
1 2 3 4 5 6 |
<h2>Unordered List</h2>
<ul>
<li>Bullet Two</li>
<li>Bullet Three</li>
<li>Bullet Four</li>
</ul>
|
Where <ul> is the tag to create an unordered list and (again) the <li> tag is the list item inside the unordered list.
3. Definition Lists
A definition list is a list of items, with a description of each item.
1 2 3 4 5 6 7 8 9 |
<h2>Definition List</h2>
<dl>
<dt>Item Definition One</dt>
<dd>Item Description One</dd>
<dt>Item Definition Two</dt>
<dd>Item Description Two</dd>
<dt>Item Definition Three</dt>
<dd>Item Description Three</dd>
</dl>
|
Styling List Items
There are several ways that we can customize our list items for our pages.
For example, to replace the default bullet with an image we can use the list-style property:
1 2 3 4 |
#content ul li {
list-style: none;
list-style-image: url(images/bg-listitem-bullet.png);
}
|
See Also: Styling Lists | W3 Schools
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
Social