XHTMLLists

Lists There are three types of lists

available in XHTMLUnordered or bulleted listsOrdered or numbered listsDefinition or directory lists

Lists Unordered <ul> </ul> Ordered <ol> </ol> Definition <dl> </dl>

Creating Lists Unordered and Ordered Lists use

two tags <ul> or <ol> to begin the list <li> to begin each list item

Note: Remember there must be a closing tag for each opening tag.

Unordered Lists Used to list any series of items

that have no particular order.

Unordered Lists<p>Things to do today:</p><ul><li>Pick up dry cleaning</li><li>Grocery shopping</li><li>Pay bills</li>

</ul>

Unordered Lists<p>Things to do today:</p><ul>

<li>Pick up dry cleaning</li><li>Grocery shopping</li><li>Pay bills</li>

</ul>Notice the title of the list goes before the <ul> tag and is enclosed in the paragraph block element.

Unordered ListsThings to do today:• Pick up dry cleaning• Grocery shopping• Pay bills

Ordered Lists Perfect for explaining step-by-

step instructions for how to complete a particular task or for creating an outline of a larger document.

Ordered Lists<ol><li>Logon to the computer</li><li>Open your journal</li><li>Write your Glossary word</li><li>Wait for instructions</li>

</ol>

Ordered Lists1. Logon to the computer2. Open your journal3. Write your Glossary word4. Wait for instructions

Definition Lists Particularly suited to glossaries,

but works well with any list that pairs a word or phrase with a longer description.

Definition Lists Consist of a term, followed by an

indented definition. Use three tags:

<dl> </dl> - begin the list <dt> </dt> - definition term <dd> </dd> - definition

Definition Lists<dl>

<dt>A</dt><dd>apples</dd><dd>artists</dd>

<dt>B</dt><dd>bugs</dd><dd>balloons</dd>

</dl>

Definition ListsA

applesartists

Bbugsballoons

Nesting Lists You can nest lists within lists.<ol>

<li>item a</li><li>item b</li><li>item c

<ul><li>item one</li><li>item two</li>

</ul></li>

</ol>

Nesting Lists1. item a2. item b3. item c

• item one• item two

list-style-type By default, unordered lists use a disc

for each item and ordered lists use numbers.

You can change the appearance of either by including the list-style-type property in a style attribute

Style attribute - unordered<ul> <li>Item one </li> <li> Item two </li></ul>

<ul style="list-style-type: circle"> <li>Item one </li> <li> Item two </li></ul>

<ul style="list-style-type: square"> <li>Item one </li> <li> Item two </li></ul>

Style attribute - ordered<ol> <li>Item one </li> <li> Item two </li></ol>

<ol style="list-style-type: upper-alpha"> <li>Item one </li> <li> Item two </li></ol>

<ol style="list-style-type: lower-alpha"> <li>Item one </li> <li> Item two </li></ol>

Style attribute - ordered

<ol style="list-style-type: upper-roman"> <li>Item one </li> <li> Item two </li></ol>

<ol style="list-style-type: lower-roman"> <li>Item one </li> <li> Item two </li></ol>

Comments – Why? To remind you (or future editors)

what you were trying to achieve with your HTML tags.

Great way to add reminders to your text.

Comments – Why? A comment will be ignored by the

browser. You can use them to keep track of

revisions.

Comments – How? Comments start with <!-- Comments end with --> Example

<!-- Last modification on 10/3/01 -->

Assignment Exercise 6: Creating lists Independent Practice: List

Assignment