logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
Jokes & Riddles
Astronomy
Philosophy
Public Health
Canadian Culture


dailyclick
All times in EST

Full Schedule
g
g HTML Site
Elizabeth Connick
BellaOnline's HTML Editor

g

The HTML Format Tags - Definition, Ordered and Unordered List Tags
Guest Author - Diane Cipollo

There are several HTML tags that control the look and format of your webpage. One example is the bold tag that you read about in an earlier article. Remember that you used the bold <b> tag to make text appear boldface or dark? But maybe you need even more control over the format of your webpages. That’s what we will talk about in this tutorial. As with all HTML tags, in the format tags the element name of each tag is surrounded by angle brackets.

Definition, Ordered and Unordered List Tags

<dl>The Definition List Tags</dl>

This group of tags work together to create a list of words and their corresponding definitions.
term 1
description 1
term 2
description 2
The list is started with the opening <dl> definition list tag and is ended with the closing </dl> tag. Between these tags are the term (<dt></dt>) and description (<dd></dd>) tags. For each term and description pair you will place the term between the opening and closing definition term tags and the corresponding description between the opening and closing definition description tags. Of course, the entire list of term and description pairs are placed between the opening and closing definition list tags. The closing </dt> and closing </dd> tags are optional but it is still good practice to use them.
<dl>
<dt>term 1</dt>
<dd>description 1</dd>
<dt>term 2</dt>
<dd>description 2</dd>
</dl>



<ol>The Ordered List Tags</ol>

This group of tags will work together to create an ordered list of items. The list can be ordered numerically, alphabetically or by Roman numerals.
  1. Item One
  2. Item Two
As in the definition list tags, the ordered list is enclosed between opening <ol> and closing </ol> tags. Each item in the list is enclosed between opening <li> and optional closing </li> tags.
<ol>
<li>First item in the list.</li>
<li>Second item in the list.</li>
</ol>
There are a few attributes that you can use to control the order of the list.
  1. The type attribute will set the style of the ordered list.

    <ol type = "1"> 1, 2, 3, . . .

    <ol type = "a"> a, b, c, . . .

    <ol type = "A"> A, B, C, . . .

    <ol type = "i"> i, ii, iii, . . .

    <ol type = "I"> I, II, III, . . .

  2. If you want the list to begin with something other than the number 1, a, A, i, or I; you will use the start attribute to set the beginning number or letter for the list. The default is to start with the number 1.

    <ol start = "3"> 3, 4, 5 . . .



<ul>The Unordered List Tags</ul>

This group of tags will work together to create an unordered list of items. Instead of letters or numbers in front of the items in the list, there is a solid bullet, open bullet or solid square depending in the level of nesting of the tags.
  • Item 1
  • Item 2
    • Item a
    • Item b
      • Item 1
      • Item 2
<ul>
<li> Item 1 </li>
<li> Item 2 </li>

<ul>
<li> Item a </li>
<li> Item b </li>

<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>

</ul>

</ul>

← Back | Next →





RSS | Previous Features | Site Map


Content copyright © 2008 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Elizabeth Connick for details.

Digg! g delicious Save to Del.icio.us

g


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
How To Set Up a Mailto Link

Using CSS to Set a Background Image

Choosing the Right Font, Part Two

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Driving Amount
Much more
Slightly more
Slightly less
Much less

g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2008 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor