LISTSHTML5 & CSS Visual Quickstart Guide

Chapter 15

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

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>

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>

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

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>

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;}

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;}

Setting All List-Style Properties at Once

• Can combine different list-style properties into one• li {

list-style: inside circle;}

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>