How to Create Powerful Content with Lists
by
Steven Moseley
Lists allow you to display information in an ordered fashion by dissecting the content of your site into smaller, more legible pieces.
Lists have been used in advertising for years, and are proven to increase readership. They convey the notion that you have something important to say, and that you have organized your thoughts clearly enough to section them appropriately and concisely.
In HTML, there are three pre-defined types of lists: ordered lists, unordered lists, and definition lists.
List Items
List items specify points to note in ordered and unordered lists. Each item is separated from the others on its own line and preceeded either by a numerical, alphabetic, or graphical point marker.
Item Types
The type defines what kind of numbering or lettering will order the list. Possible values are "I", "i", "A", and "a". Default is numeric.
Ordered Lists- It has been well known in the advertising world for decades that Ordered (Numbered) Lists increase the readership of a body of text.
- Pioneers of print media (such as Ogilvy and Mather) often used lists exclusively in an ad (such as their famed Rolls Royce print ad of the late 60s) which would increase the amount of readers by 10% or more on average.
- Why people like to read text in lists is unknown, but my belief is that it organizes information into easily tackled sections that:
- Define the individual thoughts contained within the text as separate entities, and
- Order those separate entities in the level of significance perceived by the author.
<ol></ol>
These are the “ordered list” elements. Any information between them will be indented from the previous text. Further, any list items defined between them will follow a “1,2,3” or “a,b,c” hierarchy (thus the name “ordered”).
Example:
Code:
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ol type="a">
<li>List Item 3a</li>
<li>List Item 3b</li>
<li>List Item 3c</li>
</ol>
</li>
</ol>
Unordered Lists- Unordered (Bulletted) Lists are similar to Ordered (Numbered) Lists in that they divide a body of text into discernable thoughts.
- However, unordered lists are less effective in increasing readership, because they lack the numbering of ordered lists (which further organizes the text).
- Although effective in conveying a series of thoughts that have no particular order, it is preferable to use ordered lists whenever possible.
<ul></ul>
Any information in unordered lists will be indented from the previous text. Further, any list items defined between them will follow a bulleted hierarchy (not numbered, and therefore “unordered”).
Example:
Code:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ul>
<li>List Item 3a</li>
<li>List Item 3b</li>
<li>List Item 3c</li>
</ul>
</li>
</ul>
Definition Lists
Definition lists are a little different from ordered and unordered lists because they don't have any preceeding marker, and because they have two elements for each item in the list: a term and a definition
The "term" element denotes the word or phrase that will be defined. It is not indexed (as other items in lists).
The "definition" element is the description of the term element. It is indexed (tabbed) to the right to distinguish it.
Example:
Code:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
