C and S Design.
Search Friendly Programming and Design

Go to -> C and S Design -> Articles -> Coding -> Make A List

HTML Tags and Elements

Defining a list

Just like Santa Claus, a developer or coder will need to make a list.
In this case, on a webpage, and it is useful to know how to make a list in a "search engine friendly" way to ensure that the meaning can be construed from the markup structure.
Three different list style can be created in HTML, and for coding using semantic markup it is important to use the right type of list.

Ordered List <ol> </ol>: An ordered list is a list of items where each item <li> </li> is preceded by an increasing series of letters or numbers
Unordered List <ul> </ul>: An ordered list is a list of items where each item <li> </li> is preceded by a bullet point marker
Definition List <dl> </dl>: A definition list is NOT a list of items. It is a list of terms <dt> </dt> and descriptions <dd> </dd> for those terms.

The above list of list types is using a definition list, because that's what it is. A list of terms and descriptions.
To a non-visual user agent an ordered list and an unordered list should have the same meaning, only to a visual user agent do the two take on a different guise.

What type of list?

What type of list should we use?
Well it all depends on what is being listed. As way of an example, lets assume that we are writing a page for a software application and need to note the features available (documented features of course, not the UNdocumented ones)

so we will have a heading and use a bullet point (unordered) list.

<ul><h2>Main features of the Application</h2>
<li>Simple to use</li>
<li>Intuitive User Interface</li>
<li>Small Footprint</li>
<li>Free for Personal Use</li>
<li>Automatic Updates</li>
</ul>

Which would appear on the page as :-

Main features of the Application

Simple to use
Intuitive User Interface
Small Footprint
Free for Personal Use
Automatic Updates

Then further along the project we need to identify some key benefits for the end user. Again an unordered list could be used but, as benefits are often listed in order of importance an ordered list would be preferable.

<ol><h2>Key Benefits of the Application</h2>
<li>Reliability</li>
<li>Speed</li>
<li>Support</li>
<li>Scaleable</li>
<li>Flexible</li>
</ol>

And looks like this :-

Key Benefits of the Application

Reliability
Speed
Support
Scaleable
Flexible

So far so good, now this particular software application is an update, so we have some new features and some improved features that we want to tell the visitor about.
This is where the definition list comes in.

<dl><h2>New and Updated features</h2>
<dt>User Interface</dt>
<dd>The feedback from you, as the end users of [name of application] has helped to guide our designers towards a new user interface that is designed around your needs and preferences.</dd>
<dt>Reports</dt>
<dd>The report designer in this version of [name of application] has been simplified, so making it quicker for you to be up and running after installation.</dd>
<dt>Device Support</dt>
<dd>The external device support has been enhanced with drivers included for the latest versions of the hardware.</dd>
<dt>Updates</dt>
<dd>Application updates can now be configured to be downloaded and installed automatically, ensuring that your software is always up to date.</dd>
</dl>

This appears on the page as :-

User Interface: The feedback from you, as the end users of [name of application] has helped to guide our designers towards a new user interface that is designed around your needs and preferences.
Reports: The report designer in this version of [name of application] has been simplified, so making it quicker for you to be up and running after installation.
Device Support: The external device support has been enhanced with drivers included for the latest versions of the hardware.
Updates: Application updates can now be configured to be downloaded and installed automatically, ensuring that your software is always up to date.