Categories

• HTML Books
• HTML Colors
• HTML Characters
• HTML Tags
• HTML Tutorial
  • About This Tutorial
  • Getting Started
    • Diving In
    • Structure
    • Tinkering
    • Elements
    • Attributes
    • Browser Tools
  • Markup Basics
    • Paragraph Breaks
    • Headings
    • Font Styles
    • Colors
    • Links
    • Images
    • Lists
  • Styling Basics
    • The Style Attribute
    • Style Sheets
    • Classes and IDs
    • Div and Span
    • Font Control
    • Borders
    • Margins and Padding
    • Align and Indent
  • Tables
    • Table Structure
    • Cellpadding and Cellspacing
    • Tables and CSS
  • Web Standards
  • Final Notes
• HTML Software
• HTML Validator

 

Tools

• HTML Online Editor
• HTML Table Generator

 

Partners

• Software Reviews and Comparisons
• CSS Portal
• Generate It
• Web Hosting
• Web Templates

 

  

  

Lists

 

HTML provides several ways to display lists of information:

• unordered lists: bulleted lists (like this one)

• ordered lists: numbered lists, procedures, formal outlines

• definition lists: lists of terms and definitions

Lists are different from anything we’ve covered so far, because generating a list requires at least two elements working together.

Ordered Lists

Ordered lists are contained by an ol element. Within the <ol> and </ol> tags, each list item is defined by an li element:

The default ordered list uses arabic numerals (1, 2, 3, …), but you can easily alter this behavior.

Directly within the ol element, you can only include li elements. However, within the li elements you may place nearly any HTML content that you want: text, paragraphs, images, even another list.

Placing one list within another is a nested list. The outer list will use upper-case Roman numerals, and the inner list will start counting independently, using upper-case letters. There are a large number of available list-style-types for ordered lists. The most common and well-supported values are upper-roman, lower-roman, upper-alpha, lower-alpha, and the default, decimal. If for some reason the browser doesn’t understand the value you specify, it just falls back to the default (decimal numbers).

You can use ol for any list of items where the order is important. This includes outlines, procedures, TODO lists, lists of ranked items.

Unordered List

Unordered lists are similar to ordered lists, except that they do not have a particular order. Unordered lists even recycle the li element, which makes it easy to turn an ordered list into an unordered list and vice-versa. All you need do is turn your ols into uls:

In the parent element ul, we’ve specified that the list should be green and that the bullets should be squares. We overrode this behavior in the third bullet point, specifying a red, circular bullet. Notice how the style cascades from the parent element to the child elements ― each bullet takes on the characteristics of its parent, unless we specify otherwise.

Ordered and unordered lists indent everything enclosed by the ul or ol block. You might be tempted to use ul to indent any old HTML:

<ul>
<p>This is an indented paragraph.</p>
</ul>

Don’t do this. This is incorrect HTML, and there are better ways to achieve the same effect, as we’ll see in “Align and Indent”. While we’re on the subject, li elements must always be enclosed by a ul or ol element. Don’t put li elements directly in the body of the document; this is also bad practice.

Definition Lists

A definition list provides a list of terms and definitions. Definition lists require three elements to construct:

• dl: Denotes the definition list itself. Within the dl you may only include dt and dd elements.

• dt: Denotes a term within the definition list. Within the dt you may only include inline content, such as plain text and inline style elements.

• dd: Denotes a definition for a term. Within the dd you may include any block or inline content: paragraphs, other lists, whatever you like.

A definition list consists of terms (dt) immediately followed by definitions (dd).

You may provide multiple definitions for a term, or even multiple definitions and multiple terms, although this is less common. Some people also use definition lists to mark up screenplays and other exchanges of dialogue: the speaker is a dt and their dialogue is a dd. If you’re writing technical manuals (perish the thought!), you can use definition lists to document variables, interface components, and more. Definition lists are good for any “listed information that comes in pairs.”

Congratulations, you’ve finished the basic section! In the next section we learn about advanced font styling, alignment, margins, and borders. Read on for more…