Lists (Chapter 15)

html_list_2

HTML contains elements specifically for creating lists of items. You can create plain, numbered, or bulleted lists, as well as lists of descriptions. You can also nest one list (or more) inside another one.

All lists are formed by a principal element to specify what sort of list you want to create (u1 for unordered list, 01 for ordered list, and d1 for description list, known as a definition list before html5) and secondary elements to specify what sort of list items you want to create (li for a list item in an 0l or ul, and dt for the term with dd for the description in a d1).

Of these, the unordered list is the most common across the Web, as it’s the de facto standard for marking up most kinds of navigation (there are several examples of this throughout the book). But all three list types have their place, shich you’ll learn about it.

Regarding using lists to mark up groups of links, such as your main navigation, a list of links to videos or related stories, or the links in you footer. Use ordered lists to mark up breadcrumb navigation, since the links represent a distinct sequence of links ( in other words, the order is meaningful). Breadcrumb navigation is often displayed horizontally above the main content area to indicate where the current page exists in the site’s navigation path. For instance, on a page providing the details of a particular mobile phone, it could be: Home-Products-Phones-The Fone 3.0. Each item in the list except the last would be a link, since the visitor is on the page for The Fone 3.0.

You may create one list inside another known as nesting lists even mixing and matching ordered and unordered lists. Be sure to nest each list properly, using all the required start and end tags.

Lists are indented from the left margin by default, though you can remove the indentation (or add more) with CSS. Depending on how much you reduce the left margin, your bullets might stick outside you content or disappear beyond the left edge of the window.

You may insert one type of list in another; the inner list is known as a nested list. You can do this with ordered and unordered lists. There’s also another kind of nested list. Nesting lists is particularly useful with an outline structured as ordered lists where you may several levels of items or for navigation with sub-menus structured as unordered lists. You can style nested lists a variety of ways.

Browsers generally indent descriptions (values= on a new line below their terms (names). You’ll notice from the examples that you don’t have to -or more to the point, shouldn’t- mark up single paragraphs of text as p elements within the dd elements. However, if a single description is more than one paragraph, do mark it up with p elements inside one dd instead of splitting up each paragraph (without p elements) into its own dd.

Leave a comment