XHTML Lists
Jan 21, 2016
XHTML
Lists
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 Lists
Things 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 Lists
1. 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 Lists
Aapplesartists
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 Lists
1. 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