welcome to tutorialfamily

html orderlist

Order list start with the ol tag.

Each list start with the li tag.

order type default

example



<!DOCTYPE html>
<html>
	<head>
		<title>
			order list default demo
		</title>
	</head>
	
<body>
	<ol>
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


Html order list type

Html order list type syntax
<ol>

Type Description
type=”1″ The list items will be display with numbers (default)
type=”I” The list items will be display with uppercase roman numbers
type=”i” The list items will be display with lowercase roman numbers
type=”A” The list items will be display with uppercase letters
type=”a” The list items will be display with lowercase letters

Numbers type



<!DOCTYPE html>
<html>
	<head>
		<title>
			number type order list demo
		</title>
	</head>
	
<body>
	<ol type="1">
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


Uppercase type



<!DOCTYPE html>
<html>
	<head>
		<title>
			uppercase order list demo
		</title>
	</head>
	
<body>
	<ol type="A">
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


Lowercase type



<!DOCTYPE html>
<html>
	<head>
		<title>
			lowercase order list demo
		</title>
	</head>
	
<body>
	<ol type="a">
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


uppercase roman type



<!DOCTYPE html>
<html>
	<head>
		<title>
			uppercase roman type order list demo
		</title>
	</head>
	
<body>
	<ol type="I">
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


lowercase roman type



<!DOCTYPE html>
<html>
	<head>
		<title>
			lowercase roman type order list demo
		</title>
	</head>
	
<body>
	<ol type="i">
		<li>Volvo</li>
		<li>Hero</li>
		<li>Honda</li>
	</ol>
</body>
</html>


html Description List

<dl> is define the description list.

<dt> is define the term.

<dd> is describe the term.

description list



<!DOCTYPE html>
<html>
	<head>
		<title>
			description order list demo
		</title>
	</head>
	
<body>
	<dl>
		<dt>Volvo</dt>
		<dd>- Red color</dd>
		<dt>Honda</dt>
		<dd>- Black color</dd>
	</dl>
</body>
</html>


Our Content