Buffer

HTML Tutorial – HTML Lists

Elvis Elvis

You can use this HTML tutorial to learn the basics of this widely used mark-up language. This part of the web design tutorial shows you how to create lists on your web pages.

Lists are commonly used throughout most websites — they’re easy to create.

Once you know how to structure the different lists it’ll be like second nature to you in a very short time!

Learn how to use these HTML tags to increase your ability to create your web pages with this guide.

How To Create An HTML List

Creating lists for your web pages is not difficult. The three most familiar lists that you will structure are the unordered list, the ordered list, and definition lists.An unordered list, also known as a bulleted list, is one where the order of the items doesn’t matter — such as a grocery list. Usually each item has a bullet point like this one…

The entire unordered list is bounded by <ul>and </ul> tags —
(ul means unordered list)
.

Each item within your list, usually a phrase or word, is bounded by <li>and </li> tags –
(li defines a list item).

Typically each item appears in an indented form with a bullet point in front of it. These tags are signal to the browser to display an unordered list. The order of this type of list is not important

Here’s how we make a list of a several grocery items…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”en” lang=”en”>
<head>
<title>Web Page With An Unordered List</title>
</head>
<body>

HTML Tutorial   HTML Lists

This is an example of how to create an HTML unordered list …

<ul type=”disc”>
<li>fruits</li>
<li>soy milk</li>
<li>water</li>
<li>nuts</li>
<li>vegetables</li>
<li>rice</li>
<li>fish</li>
</ul>

</body>
</html>

Here’s how the web browser displays this HTML unordered list

  • Ordered List
    The entire unordered list is bounded by <ol>and </ol> tags –
    (ol indicates an ordered list).

 

Each item within this list is bounded by <li>and </li> tags –
(li is a listed item within an ordered list).

The order of the list is important with this list type. If no attribute is indicated then the browser default will start the list of with…

… the Arabic number 1.

Otherwise we can start the list with a other character values such as an upper or lower case letter or a Roman numeral — ex. a. or A. or I.

This HTML tutorial section lists same grocery items…

<!DOCTYPE html
PUBLIC ” – //W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1 – transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”en” lang=”en”>
<head>
<title>Web Page With An Ordered List</title>
</head>
<body>

This is an example of how to create an HTML ordered list …

<ol type=”1″>
<li>fruits</li>
<li>soy milk</li>
<li>water</li>
<li>nuts</li>
<li>vegetables</li>
<li>rice</li>
<li>fish</li>
</ol>

</body>
</html>

Here’s how the web browser displays our HTML ordered list

Tip:
You can begin your list with a number or letter other than the first one by inserting a start value attribute in the ol tag like this…
<ol start=5>.

You’ve also learned how create a few simple lists in this HTML tutorial section. Experiment on your own — you’ll be surprised how easy it is to create lists for your web pages.