XHTML Tutorial: Standards-Based Web Design

by Paul Bohman

• Lists |
• Ordered (Numbered) Lists

Unordered (Bulleted) Lists

Unordered (bulleted) lists are a useful way to organize a list of items that does not need to appear in a particular order. Lists help to organize content and make it easy to read. Browsers render them much the same way that word processors render bulleted lists, as shown in the example below:

The code for the above list is as follows:

<ul>
	<li>Visual disabilities</li>
	<li>Auditory disabilities</li>
	<li>Motor/Mobility disabilities</li>
	<li>Cognitive disabilities</li>
	<li>Seizure disorders</li>
</ul>

The <ul> stands for "unordered list." The <li> stands for "list item."

It is possible to embed lists within lists, as shown in the example below:

The code for the above list is shown below:

<ul>
	<li>Visual disabilities 
		<ul>
			<li>Blindness</li>
			<li>Low vision</li>
			<li>Color-blindness</li>
		</ul>
	</li>
	<li>Auditory disabilities 
		<ul>
			<li>Deafness</li>
			<li>Hard-of-hearing</li>
		</ul>
	</li>
	<li> Motor/Mobility disabilities 
		<ul>
			<li>Inability or difficulty using a mouse</li>
			<li>Inabiltiy or difficulty using a keyboard</li>
		</ul>
	</li>
	<li>Cognitive disabilities 
		<ul>
			<li>Difficulty with memory</li>
			<li>Difficulty with attention</li>
			<li>Difficulty with perception</li>
			<li>Difficulty with reading</li>
			<li>Other cognitive difficulties</li>
		</ul>
	</li>
	<li>Seizure disorders
		<ul>
			<li>Vulnerability to seizures when viewing strobe or flickering effects</li>
		</ul>
	</li>
</ul>

Notice that the embedded lists are contained completely within a list item ( <li> ) of the parent list. Take a closer look at the Seizure disorders list item:

<li>Seizure disorders
	<ul>
		<li>Vulnerability to seizures when viewing strobe or flickering effects</li>
	</ul>
</li>

The closing </li> for the parent list item ("Seizure disorders") is after the closing </ul> of the embedded list.