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 lang="en">
<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>

Code Explanation

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 Lists of Beatles Songs by Singer

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 lang="en">
<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>
		<li>Ringo Starr
			<ul>
				<li>Don't Pass Me By</li>
				<li>Yellow Submarine</li>
			</ul>
		</li>
	</ul>
</body>
</html>

Code Explanation

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 Lists Beatles Songs by Singer

Next