Lists
Article ID: KB101450
HTML allows you to make three kinds of lists: ordered lists,
unordered lists, and definition lists.
Ordered Lists
The OL element makes up an Ordered List. Each List
Item is surrounded by LI tags. Here's an example:
<ol>
<li>Go to www.pixelmill.net.</li>
<li>Click on Support at the top of the page.</li>
<li>Click on the HTML section.</li>
</ol>
See live example!
As you can see, the browser automatically puts numbers before each list item.
Ordered lists have certain attributes that you can set. We've specified them
here, but please take a look at the example at the bottom of the page for
specific examples.
| OL - attributes |
type*
="1"
="a"
="A"
="i"
="I" |
The type attribute allows you to set if
you want a list using Arabic numbers (1, 2, 3...), lowercase letters
(a, b, c...), uppercase letters (A, B, C...), or Roman numerals (I, II,
III... or i, ii, iii...). Arabic numerals are the default setting.
*This attribute is deprecated. It is encouraged that
you use style sheets to define the type of list. |
start*
="[number]" |
The start attribute allows you to
specify a starting number for the list. The default starting number is
"1." (Note that if you set your start number to "3", but have the type
set to "A", that the list will start with "C.")
*This attribute is deprecated. |
| LI - attributes |
value*
="[number]" |
This sets the number of the current list
item. |
back to top
Unordered Lists
The UL element makes up an Unordered List with bullets.
List items also use the LI tags. Here's an example:
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Hippo</li>
</ul>
See live example!
Definition Lists
Definition Lists (DL) allow you to have a list
with a Definition Term (DT) and a Definiton Description
(DD). Here's an example:
<dl>
<dt>deprecated</dt>
<dd>Things that are marked as deprecated are no longer recommended, and may in
fact become obsolete in later versions of HTML.</dd>
<dt>element</dt>
<dd>HTML elements are the pieces that make up an HTML document.</dd>
</dl>
See live example!
Most web browsers will indent the definition description. You can also use
style sheets to format the term or description differently.
back to top
Nesting lists
You can put lists inside of lists - this is handy if you want an outline
format. See the example below!
Putting it all together...
<ol type="I">
<li>Ordered Lists
<ol type="A">
<li>Arabic numerals</li>
<li>Roman numerals</li>
<li>Alphabet</li>
</ol>
</li>
<li>Bulleted Lists
<ul type="square">
<li>Disc bullets</li>
<li>Circle bullets</li>
<li>square bullets</li>
</ul>
</li>
<li>Definition LIsts
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
</li>
</ol>
See live example!
The next article is a very important article. By reading about Meaning vs.
Layout, you will understand more about why web design is not just about making
something look good.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1065/kb101450.htm
permalink to this article:
http://www.pixelmill.com/support/kb101450.htm
Back to top