2. Lists in HTML
• HTML provides a way to create lists of items
• Plain lists
• Numbered lists
• Bulleted lists
• List of descriptions
• Also possible to nest one or more lists inside another one
• Lists formed by principal element to specify what sort of list you
create
• ul – Unordered list
• ol – Ordered list
• dl – Description list (formerly definition list)
• Secondary element specifies what sort of list item
• li for list item in ol or ul
• dt for term in dl
• dd for description in dl
3. Creating Ordered Lists
• Ordered list is useful for step-by-step instructions
• Also useful for creating an outline
• Also the proper choice for marking up breadcrumb
navigation
• Example:
<h1>Making a PB&J Sandwich</h1>
<ol>
<li>Get two slices of bread</li>
<li>Spread peanut butter on one slice</li>
<li>Spread jelly on the other slice</li>
<li>Put the two slices together</li>
</ol>
4. Creating Unordered Lists
• Unordered lists are most widely used lists on Web
• …because they’re used to mark up navigation
• Also useful for lists of features, parts lists, etc.
• Example:
<h1>What You Need for a PB&J Sandwich</h1>
<ul>
<li>2 slices of bread</li>
<li>Peanut Butter</li>
<li>Jelly</li>
<li>Butter knife</li>
<li>Spoon</li>
</ul>
5. Choosing Your Markers
• You can choose what sort of markers appear to the left of each
list item
• Bullets
• Numbers
• Images
• Do this via CSS property list-style-type: marker
• marker can be one of the following:
• disc
• circle
• square
• decimal
• upper-alpha
• lower-alpha
• upper-roman
• none
6. Choosing Where to Start List Numbering
• By default, numbered list begins with 1
• Might want to start somewhere else, though
• Change this with start attribute on the ol tag
• <ol start=“3”> would start ordered list at 3
• You can also change numbering of a specific list item
• <ol start=“2”>
<li>Unscrew the old bulb</li>
<li value=“5”>Screw in the new bulb</li>
<li>Plug in the lamp and turn it on</li>
</ol>
7. Using Custom Markers
• Can create your own custom marker with an image
• Don’t have to change your HTML, just the CSS
• First, turn off normal markers
• Then, set background property for li elements to desired image
• ul {
list-style: none;
margin-left: 0;
padding-list: 15px;
}
li {
background: url(arrow-right.png) no-repeat 0
2px;
padding-list: 25px;
}
8. Controlling Where Markers Hang
• By default, lists are indented from left margin
• Markers can begin either halfway to the right of that point
(default) or flush with the rest of the text
• To make markers flush with the text:
li {
list-style-position: inside;
}
9. Setting All List-Style Properties at Once
• Can combine different list-style properties into one
• li {
list-style: inside circle;
}
10. Creating Description Lists
• Used for describing association between names (or
terms) and values in groups
• Previously called definition lists, now known as
description lists
• <h1>List of Horror Movie Legends</h1>
<dl>
<dt>Boris Karloff</dt>
<dd>Best known for his role in
<cite>Frankenstein</cite>, his real name
was William Henry Pratt.</dd>
<dt>Christopher Lee</dt>
<dd>Took a bite out of audiences as Dracula</dd>
</dl>
