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>
<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>

The image below shows how the code will be rendered:

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>
<head>
<meta charset="UTF-8">
<title>Beatles - unordered 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>

The resulting page is shown below:

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>

The start attribute was deprecated in HTML 4, but brought back in HTML5 as there is no great CSS alternative. It is supported by all browsers, but if you set your DOCTYPE to XHTML or HTML Strict, your file will not validate. If you use the new HTML5 DOCTYPE, as we have been recommending, you will have no problems.

Next