Lists in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists in HTML</title>
</head>
<body>
<!--
<ul> : unordered list starts with this tag.
<ol> : ordered list starts with this tag.
<li> : each list item starts with the this tag.
-->
<h1>Demo: Lists in HTML</h1>
<h2>Unordered Lists</h2>
<p>Shopping Items:
<ul>
<li>Milk</li>
<li>Coffee</li>
<li>Eggs</li>
<li>Bread</li>
<li>Jam</li>
</ul>
</p>
<hr>
<h2>Ordered Lists</h2>
<p>Route directions:
<ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Go straight across the first two roundabouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meters up the road</li>
</ol>
</p>
<hr>
<h2>Nesting Lists</h2>
<p>Tasty Hummus recipe:
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ul>
</li>
<li>Serve hummus with hot naan bread.</li>
</ol>
</p>
</body>
</html>