Building List

CREATING A LIST

Before we proceed,i want you to know that they are three type of list:

*Unordered List
*Ordered List
*Definition List

Unordered List

This kind of list contains bullets,you can use this list if the order of elements in the list isn't important.
*Note* : The unordered list is represented by <ul></ul> tags and inside the tags is a number of list item,Each element of the list is stored between a <li></li> tags.You can have as many list tags as you want.

1. Open your text editor.

2. Type the following code in your text editor.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Using list </title>
</head>
<body>
<h2>Using unordered list </h2>
<h3>Country Names </h3>
<ul>
<li> RED </li>
<li> BLUE </li>
<li> GREEN </li>
<li> YELLOW </li>
</ul>
<h3> End of unordered list. </h3>
</body>
</html>

3. Save the file as mylist.html. Make sure the extension is .html and thereis no space between the filename.

4.Load your page into the browser. You can open your system browser and drag the file (mylist.html) into the browser or just double-click the file.

Ordered List

This lists are almost exactly like unordered lists,the only diffirence is that ordered list uses numbers and not bullets.

Type the following code in your text editor.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Using list </title>
</head>
<body>
<h2>Using ordered list </h2>
<h3>Country Names </h3>
<ol>
<li> Nigeria </li>
<li> Russia </li>
<li> Japan </li>
<li> Usa </li>
</ol>
<h3> End of ordered list. </h3>
</body>
</html>

Definition Lists

This kind of list doesn't use bullets or numbers.Instead, they have two elements.Definition terms are usually words or short phrases and definition descriptions are the extended text blocks that contain the actual definition.

Replace the code in your body tag with this:
<h2>Using Definition List </h2>
<h2>Upcoming super heros </h2>
<dl>
<dt> Tree man </dt>
<dd> This super hero is ten times stronger than a normal human,his body can create food for him through photosynthesis and he can camouflage at will. </dd>
<dt> Mirroring </dt>
<dd> This super hero has a special eyes called sorak in ancient greek,with one gaze,she can control your five senses,her beauty can heal but are fangs disapprove. </dd>
<dt> Inches </dt>
<dd> This information is classified. </dd>
</dl>
<h3> End of definition list. </h3>