A list is used for presenting one or more similar items. HTML markup have 3 different types of lists used by authors depending on the type of items they hold. The three different types of HTML lists are explained in detailed later in this article.
In addition to the types need may arise such that content authors may have to lists within the lists called nested list.
Unordered list
Unordered list is used in case of providing list items that can be randomly arranged within themselves. It means even after shuffling the items users can perceive the information they need. These items are not necessarily be sequential in order. Eg: Navigation links in a page, best practices described for an application etc.
Sample code for unordered list
The below markup shows how an unordered list can be used to list the items sold in a retail electronic business.
<ul>
<li>Televisions</li>
<li>Desktops</li>
<li>Mobile devices</li>
<li>Tablet devices</li>
</ul>
Sample unordered HTML list
- Televisions
- Desktops
- Mobile devices
- Tablet devices
Ordered list
An ordered list is used only when a sequential order need to be maintained. When describing a process of doing a task. For instance, a step by step procedure followed to prepare tea.
Sample code for an ordered HTML list
The following example describes the sequential steps to be followed to prepare a instant ice tea.
<ol>
<li>Follow the instructions for brewing regular hot tea on the back of the tea package, except increase the amount of tea by 50%.</li>
<li> When the tea has brewed the suggested amount of time remove the leaves and pour tea directly into a container (plastic or glass) filled with ice.</li>
<li>As the ice melts, add more ice to suit your taste.</li>
</ol>
Sample HTML ordered list
- Follow the instructions for brewing regular hot tea on the back of the tea package, except increase the amount of tea by 50%.
- When the tea has brewed the suggested amount of time remove the leaves and pour tea directly into a container (plastic or glass) filled with ice.
- As the ice melts, add more ice to suit your taste.
Definition list
A definition list is used to define terms, glossary for a website, , lists such as FAQs etc. Unlike a ordered and unordered lists , definition list have a word, phrase or a sentence as <dt> and a description of it in <dd> in each list item.
Sample code for HTML definition list
The below example shows the meaning of some terms used in accessibility technology.
<dl>
<dt>Disability</dt>
<dd>
Disabilities is an umbrella term, covering impairments, activity limitations, and participation restrictions. An impairment is a problem in body function or structure; an activity limitation is a difficulty encountered by an individual in executing a task or action; while a participation restriction is a problem experienced by an individual in involvement in life situations. Thus, disability is a complex phenomenon, reflecting an interaction between features of a person’s body and features of the society in which he or she lives.
</dd>
<dt>accessibility</dt>
<dd>
Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the “ability to access” and benefit from some system or entity.
</dd>
<dt>assistive technology</dt>
<dd>
Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
</dd>
</dl>
Sample HTML definition list
- Disability
- Disabilities is an umbrella term, covering impairments, activity limitations, and participation restrictions. An impairment is a problem in body function or structure; an activity limitation is a difficulty encountered by an individual in executing a task or action; while a participation restriction is a problem experienced by an individual in involvement in life situations. Thus, disability is a complex phenomenon, reflecting an interaction between features of a person’s body and features of the society in which he or she lives.
- accessibility
- Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the “ability to access” and benefit from some system or entity.
- assistive technology
- Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
Nested List
In some cases where a direct list is not sufficient a list should be provided for a list item. This is called as nested list. It may also possible that a ordered list may be within an item of a unordered list or vice versa. For example a list that describes services, products, About us as a list, items services and products can a nested list as service 1, service 2 , service 3 and product 1, product 2, product 3 respectively.
Sample code for nested list
The below example shows how a nested list can be provided using HTML.
<ul>
<li>About Us</li>
<li>Products</li>
<ul>
<li>Televisions</li>
<li>Desktops</li>
<li>Mobile devices</li>
<li>Tablet devices</li>
</ul>
<li>Services</li>
<ul>
<li>Pre-sale services</li>
<li>Door step delivery services</li>
<li>Store services</li>
<li>Online services</li>
</ul>
<li>Contact us</li>
</ul>
Sample HTML nested list
- About Us
- Products
- Televisions
- Desktops
- Mobile devices
- Tablet devices
- Services
- Pre-sale services
- Door step delivery services
- Store services
- Online services
- Contact us
Points to remember
- Use appropriate type of HTML list depending on the content of the web page.
- Do not use HTML list for styles such as indenting (Use CSS instead).
- Use of appropriate lists helps screen reader users to navigate the webpage comfortably.
- Unordered list provide a bulleted point by default with each list item, use CSS property to remove it.
- Ordered list provides sequential numbering with each list item, use CSS to remove them or to change it to other orders such as a, b,c or I, ii, iii etc.
G57: Ordering the content in a meaningful sequence(General technique)