WEB TUTS

In this HTML tutorial, I am going to tell you about HTML List. There are three types of lists in HTML. In below tutorial, You will learn all three types of HTML list in details with examples.

 

HTML lets you create three different types of lists.
Unordered list: A bulleted list (like this one). The browser automatically displays the bullets and indents the list items.

Ordered list: A numbered list, like those used for the steps in this book. The browser automatically displays the numbers in the correct sequence.
Definition list: A list that alternates paragraphs aligned with the left margin and indented paragraphs. The first of each pair of paragraphs is the term being defined, and the second is the definition of the term.

CREATE A BULLETED LIST
A bulleted list is a block element that starts with a <ul> (unordered list) tag and ends with a </ul> tag. Within the list, each item starts with an <li> (list item) tag and ends with an </li> tag.
 

To create a bulleted list:
1. Type the opening and closing tags for the unordered list:
<ul>
</ul>
2. Within the tags, type the list items, one to a line, marking each with
<li> and </li> tags—for example:
<ul>
<li>San Diego</li>
<li>Los Angeles</li>
<li>San Francisco</li>
</ul>
3. Save the file, switch to your browser, and update the display. Your list will be displayed with default black bullets, as in the example shown.
4. Try changing the bullets to squares by adding the type attribute to the <ul> tag and
specifying the square parameter:
<ul type="square">
5. Save the file, switch to your browser, and update the display. The bullets will have turned to squares. Depending on your browser, the squares may be filled in (as in the example shown) or empty.
6. Change the bullets to empty circles by changing the type attribute to circle:
<ul type="circle">

7. Save the file, switch to your browser, and update the display. The bullets will have
turned to circles.
8. Change the bullets back to regular bullets by either changing the type attribute to disc or by removing the attribute altogether. disc is the default bullet type, so you don’t need to specify it if you want a default bulleted list.
9. Save the file.

CREATE A NUMBERED LIST
A numbered list is a block element that begins with an <ol> (ordered list) tag and ends with an </ol> tag. Within the list, each item starts with an <li> (list item) tag and ends with an </li> tag.

To create a numbered list:
1. Type the opening and closing tags for the ordered list:
<ol>
</ol>
2. Within the tags, type the list items, one to a line—for example:
<ol>
<li>Answering live telephone queries</li>
<li>Providing customer service via phone</li>
<li>Providing customer service via e-mail</li>
<li>Providing customer service via online chat</li>
<li>Telemarketing</li>
</ol>
3. Save the file, switch to your browser, and update the display. Your list will be numbered from 1 to 5, as in the example shown.

CHANGE THE NUMBERING TYPE
The default type of numbered list uses standard numbers, as in the previous example. You can specify different types of numbering by adding the type attribute to the <ol> tag, as described in Table 3-2.
1. Change the numbering on the numbered list to uppercase roman numerals by
changing the type attribute to I:
<ol type="I">
2. Save the file, switch to your browser, and update the display. When changed, the example list looks like this:
3. Change the numbering back to standard numbering by either changing the type attribute to 1 (<ol type="1">) or removing the type attribute altogether. Standard numbering is the default for numbered lists, so you don’t need to specify the type attribute if you want a list with standard numbering.
4. Save your file again.
 

CHANGE THE STARTING NUMBER
By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used: I, i, A, or a. Sometimes, you may need to use a different starting number for a list. For example, if you break a numbered list with a graphic or a paragraph, you will need to start the second part of the list with the appropriate number rather than with 1.

To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number—for example:
<ol type="1" start="5">
 

CREATE A DEFINITION LIST
A definition list is a block element that begins with a <dl> (definition list) tag and ends with a </dl> tag. Each of the terms defined begins with a <dt> tag and ends with a </dt> tag. Each of the definitions for those terms begins with a <dd> tag and ends with a </dd> tag.

To create a definition list:
1. Type the opening and closing tags for the definition list:
<dl>
</dl>
2. Within the tags, type each of the definition terms within <dt> and </dt> tags, and type the definitions for those terms within <dd> and </dd> tags:
<dl>
<dt>Telephone</dt>
<dd>Just call us&#8212;couldn’t be easier.</dd>
<dt>Online chat</dt>
<dd>Talk to a customer service representative via text. The representative will help you immediately or will call back if research is required.</dd>
<dt>E-mail</dt>
<dd>Send a query to one of our customer service representatives. You will receive an answer within 24 hours.</dd>
</dl>
3. Save the file, switch to your browser, and update the display.

CREATE A NESTED LIST
You can nest, or position, any list within another list—for example, a bulleted list within a numbered list, a numbered list within a bulleted list, a definition list within a bulleted list, or a list within the same type of list as itself.  To nest a list, place the tags for the nested list within the tags for the list that will contain it. The  browser then displays the nested list with more indent than the list that contains it. You can nest another list within the nested list if necessary; the second nested list receives even more indent than the first nested list.

To create a nested list:
1. Position the insertion point at the appropriate point within the existing list.
2. Close and reopen the ordered list, and add the opening and closing tags for the
sublist—for example, as shown in bold font here:
<ol type="1">
<li>Answering live telephone queries</li>
</ol>
<ul>
</ul>
<ol>
<li>Providing customer service via phone</li>
<li>Providing customer service via e-mail</li>
<li>Providing customer service via online chat</li>
<li>Telemarketing</li>
</ol>
3. Within the bulleted list tags (<ul> and </ul>), type the items for the sublist:
<ul>
<li>Provide information</li>
<li>Redirect to customer service</li>
<li>Redirect to sales agents</li>
</ul>
4. Save the file, switch to your browser, and update the display.