How To Create Lists In HTML

There are three types of list; unordered lists, ordered lists and definition lists.


Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.


The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.



Code Snippet


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>Where am I ?</h2>
<p>Coding gurus online tutorials</p>
<h2>What is a list</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3.</li>
</ul>
</body>
</html>

The result of the above code is:



If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.


Lists can also be included in lists to form a structured hierarchy of items.


Code Snippet:


<ul>
<li>List item 1
<ol>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

A list within a list. And you could put another list within that. And another within that. And so on and so forth.


The result of the above code is:




Guys follow the various other tutorials to catch on further in html coding and designing!!!