Unordered Lists

Contact Us or call 1-877-932-8228
Unordered Lists

Unordered Lists

Unordered lists are rendered as bulleted lists. Take a look at the following code sample:

Code Sample:

Lists/Demos/BeatlesUnordered.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Beatles - unordered</title>
</head>
<body>
	<h1>Beatles</h1>
	<ul>
		<li>John Lennon</li>
		<li>Paul McCartney</li>
		<li>George Harrison</li>
		<li>Ringo Starr</li>
	</ul>
</body>
</html>

The <ul> tag starts an unordered list. Each list item is contained in <li></li> tags. The image below shows how this code would be rendered.Unordered List of Beatles Members

Nesting Unordered Lists

Unordered lists can also be nested. The browsers use indentation and different styles of bullets to display the nested lists. The following example shows how this works:

Code Sample:

Lists/Demos/BeatlesUnorderedNested.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Beatles - unordered and nested</title>
</head>
<body>
	<h1>Beatles Lead Singers</h1>
	<ul>
		<li>John Lennon
			<ul>
				<li>Norwegian Wood (This Bird Has Flown)</li>
				<li>All You Need Is Love</li>
				<li>Day Tripper</li>
				<li>Can't Buy Me Love
					<ul>
						<li>John and Paul together</li>
					</ul>
				</li>
				<li>Lucy In The Sky With Diamonds</li>
			</ul>
		</li>
		<li>Paul McCartney
			<ul>
				<li>Lady Madonna</li>
				<li>Lovely Rita</li>
				<li>Eleanor Rigby</li>
				<li>Can't Buy Me Love
					<ul>
						<li>John and Paul together</li>
					</ul>
				</li>
				<li>When I'm Sixty-Four</li>
			</ul>
		</li>
		<li>George Harrison
			<ul>
				<li>Here Comes The Sun</li>
				<li>Roll Over Beethoven</li>
			</ul>
		<li>Ringo Starr
			<ul>
				<li>Don't Pass Me By</li>
				<li>Yellow Submarine</li>
			</ul>
		</li>
		</li>
	</ul>
</body>
</html>

Notice that the nested unordered lists are siblings to plain text. For example, the text "George Harrison" is a sibling of the unordered list that follows it. Only list items, not lists themselves, can contain nested (child) lists. The resulting page is shown below:Unordered Nested List of Beatles Members and Songs

Both the indentation and the style of bullet can be controlled with CSS.

Next