Lists

Unordered Lists
There are several types of list, an un-ordered list can be created by the following markup:

Displayed by browser HTML markup required

<ul>
Item one of list <li>Item one of list </li>
Item two of list <li>Item two of list </li>
</ul>

Nested lists can be done as follows. Note that mark nested lists up correctly you need to
understand that any nested list is actually a child of a list item.

Displayed by browser HTML markup required

<ul>
<li>Item one of list </li>
Item one of list
<li>Item two of list
Item two of list
<!-- Closing </li> tag not placed here! -->
Subitem
one of item <ul>
two <li>Subitem one of item two </li>
Subitem two <li>Subitem two of item two </li>
of item two </ul>
Item three of list </li> <!-- Closing </li> for item two here -->
<li>Item three of list </li>
</ul>

It is also possible to specify the appearance of unordered lists:

Displayed by browser HTML markup required

<ul>
Item one of list <li>Item one of list </li>
Item two of list <li>Item two of list </li>
</ul>

ul {
list-style-type: circle;
}
Item one of list
Item two of list
<ul>
<li>Item one of list </li>
<li>Item two of list </li>
</ul>

ul {
list-style-type: square;
}
Item one of list
Item two of list
<ul>
<li>Item one of list </li>
<li>Item two of list </li>
</ul>
 ul.a {list-style-type: disc;}
ul.b {list-style-type: circle;}
ul.c {list-style-type: square;}
ul.d {list-style-type: none; }
Item one of list
Item two of list
Item three <ul>
Item four <li class="a">Item one of list </li>
<li class="b">Item two of list </li>
<li class="c">Item three </li>
<li class="d">Item four </li>
</ul>

Ordered Lists
An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered.

Displayed by browser HTML markup required

<ol>
1. Item one of list <li>Item one of list </li>
<li>Item two of list </li>
2. Item two of list
</ol>

Nested lists can be done as follows:

Displayed by browser HTML markup required

<ol>
1. Item one of list <li>Item one of list </li>
<li>Item two of list
2. Item two of list <ol>
<li>Subitem one of item two </li>
1. Subitem one of item two <li>Subitem two of item two </li>
</ol>
2. Subitem two of item two
</li>
3. Item three of list <li>Item three of list </li>
</ol>

It is also possible to specify the appearance of unordered lists:

Displayed by browser HTML markup required

<ol>
1. Item one of list
<li>Item one of list </li>
2. Item two of list <li>Item two of list </li>
<li>Item three of list </li>
3. Item three of list </ol>

ol {
list-style-type: upper-alpha;
}
A. Item one of list

B. Item two of list <ol>

<li>Item one of list </li>
C. Item three of list <li>Item two of list </li>
<li>Item three of list </li>
</ol>
 ol {
list-style-type: lower-alpha;
}
a. Item one of list

b. Item two of list <ol>

<li>Item one of list </li>
c. Item three of list <li>Item two of list </li>
<li>Item three of list </li>
</ol>

ol {
list-style-type: upper-roman;
}
I. Item one of list

II. Item two of list <ol>

<li>Item one of list </li>
III. Item three of list <li>Item two of list </li>
<li>Item three of list </li>
</ol>

ol {
list-style-type: lower-roman;
}
i. Item one of list

ii. Item two of list <ol>

<li>Item one of list </li>
iii. Item three of list <li>Item two of list </li>
<li>Item three of list </li>
</ol>

It is possible to give a start value to the ordered list or to reset the counter:

Displayed by browser HTML markup required

3. Item one of list <ol start="3">

<li>Item one of list </li>
4. Item two of list <li>Item two of list </li>
<li>Item three of list </li>
5. Item three of list
<li>Item four of list </li>
</ol>
6. Item four of list

1. Item one of list <ol>

<li>Item one of list </li>
2. Item two of list <li>Item two of list </li>
<li value="1">Item three of list </li>
1. Item three of list
<li>Item four of list </li>
</ol>
2. Item four of list

 Note: start and value attributes were deprecated in HTML 4.01, but now SUPPORTED
in HTML5.

It is possible to reverse an ordered list and display it in descending order:

Displayed by browser HTML markup required

4. Item four of list <ol reversed>

<li>Item four of list </li>
3. Item three of list <li>Item three of list </li>
<li>Item two of list </li>
2. Item two of list
<li>Item one of list </li>

1. Item one of list </ol>

Lists for navigation
The <ul> or <ol> can now be enclosed within <nav> elements for better semantic structure when
used as navigational menus. For example:

Displayed
Home About Contact
by browser

HTML
markup <style>
required .nav-bar {
list-style-type: none; /* Removes bullet points */
margin: 0; /* No extra space around the navbar */
padding: 0; /* No extra space around the navbar */
background-color: #333; /* navbar background colour */
}

/* Style each list item */

.nav-bar li {
display: inline-block; /* Align items horizontally */
margin: 0;
}

/* Style the links */

.nav-bar li a { /* <a> tag looks like button */
display: block; /* Make the clickable area a block */
color: white; /* Link text color */
text-decoration: none; /* Remove underline */
padding: 14px 20px; /* Padding around the link */
background-color: #333; /* Match navbar background */
text-align: center;
}

/* Add hover effects */

.nav-bar li a:hover {
background-color: #575757; /* Hover bg color */
color: #fff; /* Text color on hover */
}

/* Optional: Make the navigation bar full-width */

.nav-bar {
justify-content: space-around; /* Evenly space items */
}
</style>

<nav class="nav-bar" >

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

Description Lists
A description list is used to display name/value pairs such as terms and their definitions.

Displayed by browser HTML markup required

Definition tag. <dl>

Text of the definition list. <dt>Definition tag.</dt>
Which may stretch over <dd>Text of the definition list. Which may
several lines. stretch over several lines.</dd>
Another definition tag. <dt>Another definition tag.</dt>
Text of the definition list. <dd>Text of the definition list.</dd>
</dl>
and the same example without any styling:

Enhanced Semantics:

HTML5 allows for greater flexibility and semantic use of description lists. You can wrap groups of
<dt> and <dd> elements within a <div> or <section> for better grouping.

Lists with image bullets

It is possible to use your own graphics as bullets in an unordered list:

Displayed by browser HTML markup required

ul {
list-style-image: url('claretball.gif');
}
Item 1
Item 2
<ul>
Item 3
<li> Item 1 </li>
Item 4
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>

 Images will be discussed in more details in Lecture 3.

ARIA for HTML5 Lists

Accessible Rich Internet Applications (ARIA) roles and properties are used to enhance
accessibility for screen readers and assistive technologies. When working with lists in HTML5,
ARIA attributes can be applied to improve semantic meaning and ensure accessibility for users
with disabilities.
Here is a breakdown of how ARIA can be used with HTML5 lists:

Native HTML lists ( <ul>, <ol>, <dl> ) already provide semantic structure and accessibility,
thus do not need to add ARIA roles. However, ARIA roles may be needed when creating
custom or dynamic lists using non-native HTML elements (e.g., <div> or <span> ) for
complete control over the styling from the ground up. For example if you need to develop
dynamic components (e.g., dropdown menus, accordions, or drag-and-drop lists) you may
find <div> or <span> easier to work with programmatically due to their general-purpose
nature. It is advised to let native semantics do the heavy lifting wherever possible.
ARIA helps convey additional information such as relationships, states, and roles for
complex or custom components.

The table below provides some examples for creating lists using <div> or <span> integrating
ARIA for accessibility.

Displayed by browser HTML markup required

<div role="list">
<div role="listitem">Item 1</div>
Item 1
<div role="listitem">Item 2</div>
Item 2
<div role="listitem">Item 3</div>
Item 3
</div>
 <div role="list">
<span role="listitem">Item A</span>
Item A Item B Item C <span role="listitem">Item B</span>
<span role="listitem">Item C</span>
</div>

<p id="list-label">Features of Our Product</p>

Features of Our Product <ul role="list" aria-labelledby="list-label">
<li>Feature 1</li>
Feature 1
<li>Feature 2</li>
Feature 2
<li>Feature 3</li>
Feature 3
</ul>

<ul role="list" aria-hidden="true">

Hidden Item 1 <li>Hidden Item 1</li>
Hidden Item 2 <li>Hidden Item 2</li>
</ul>

Review Questions
Question 1 - Which HTML tags are used to create an unordered list
Question 2 - Which HTML tags are used to create an ordered list
Question 3 - Write the HTML tags to display the following nested list (no CSS used):

1. HTML

2. HTML5

3. CSS

inline styles

embedded styles

linked styles

4. JavaScript

Accessibility statement (/accessibility)