Ordered Lists

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

Ordered Lists

Ordered lists are very similar to unordered lists. They are created with the <ol> tag and, by default, will display list items with numbers. Take a look at the following code:

Code Sample:

Lists/Demos/BeatlesOrdered.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - ordered</title>
</head>
<body>
	<h1>Beatles</h1>
	<ol>
		<li>John Lennon</li>
		<li>Paul McCartney</li>
		<li>George Harrison</li>
		<li>Ringo Starr</li>
	</ol>
</body>
</html>

Code Explanation

The image below shows how the code will be rendered.Beatles Ordered List

Nesting Ordered Lists

Like unordered lists, ordered lists can be nested. However, unlike in some word processing applications, nested ordered lists will continue to be displayed using standard numbers.

Code Sample:

Lists/Demos/BeatlesOrderedNested.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - ordered and nested</title>
</head>
<body>
	<h1>Beatles Lead Singers</h1>
	<ol>
		<li>John Lennon
			<ol>
				<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>
			</ol>
		</li>
		<li>Paul McCartney
			<ol>
				<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>
			</ol>
		</li>
		<li>George Harrison
			<ol>
				<li>Here Comes The Sun</li>
				<li>Roll Over Beethoven</li>
			</ol>
		</li>
		<li>Ringo Starr
			<ol>
				<li>Don't Pass Me By</li>
				<li>Yellow Submarine</li>
			</ol>
		</li>
	</ol>
</body>
</html>

Code Explanation

The resulting page is shown below:Beatrles Ordered Nested Lists

As you can see, ordered lists can have nested unordered lists. The reverse is also true.

Start Attribute

The start attribute is used to specify what number the list should start on. It takes as a value any number. For example:

<ol start="3">
	<li>John Lennon</li>
	<li>Paul McCartney</li>
	<li>George Harrison</li>
	<li>Ringo Starr</li>
</ol>
Next