Tuesday, May 13, 2014

HTML Lists

// // Leave a Comment

There are three types of list; unordered lists, ordered lists, 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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>

<body>
<h1>My first web page</h1>

    <h2>What this is</h2>
<p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

</body>
</html>
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.
Replace the above list code with the following:
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink

Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

0 comments:

Post a Comment