Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Lists

You can arrange your items, subjects or menu in the form of a list. HTML gives you three different types of lists.

  • <ul> - An unordered list. This will list items using bullets and it doesn't have a predefined ordering
  • <ol> - A ordered list. This will use different schemes of numbers to list your items
  • <dl>- A definition list. This is arrange your items in the same way as they are arranged in a dictionary.
HTML Unordered Lists:

An unordered list is a collection of related content that have no predefined order or sequence. The most common unordered list you will find on the Web is a collection of hyperlinks to other documents like glossary.

This list is created by using <ul> tag. Each item in the list is marked with a bullet. The bullet itself comes in three styles: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

One Movie list is given below:


<center>
<h2>Movie List</h2>
</center>
<ul>
<li>Fast and Furious </li>
<li>Insidious</li>
<li>Titanic</li>
<li>Ghost in the ship</li>
</ul>
Run

You can define type attribute to select the type of bullet you like. Following are the possible values:

<ul type="square">
<ul type="disc">
<ul type="circle">
<ul type="square"> <ul type="disc"> <ul type="circle">
  • Hindi
  • Hindi
  • Hindi
  • English
  • English
  • English
  • Maths
  • Maths
  • Maths
  • physics
  • physics
  • physics
  • HTML Ordered Lists:

    The typical browser formats the contents of an ordered list just like an unordered list, except that the items are numbered instead of bullet. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>

    This list is created by using <ol> tag. Each item in the list is marked with a number.

    One Movie list is given below:


    <center>
    <h2>Movie List</h2>
    </center>
    <ol>
    <li>Fast and Furious</li>
    <li>Insidious</li>
    <li>Titanic</li>
    <li>Ghost in the ship</li>
    </ol>
    Run

    You can define type attribute to specify the style of numbers you want. By default its a generic number. Following are the other possible ways:

    <ol type="I"> - Upper-Case Numerals.
    <ol type="i"> - Lower-Case Numerals.
    <ol type="a"> - Lower-Case Letters.
    <ol type="A"> - Upper-Case Letters.
    <ol type="I"> <ol type="i"> <ol type="A"> <ol type="a">
    I. Hindi i. Hindi A. Hindi a. Hindi
    II. English ii. English B. English b. English
    III. Maths iii. Maths C. Maths c. Maths
    IV. physics iv. physics D. physics d. physics

    You can use start attribute to specify the beginning of any index. By default its a first number or character. In the following example index starts from 5:


    <center>
    <h2>Movie List</h2>
    </center>
    <ol start="5">
    <li>Fast and Furious</li>
    <li>Insidious</li>
    <li>Titanic</li>
    <li>Ghost in the ship</li>
    </ol>
    Run

    HTML Definition Lists:

    HTML and XHTML also support another list style entirely different from the ordered and unordered lists we have discussed so far - definition lists . Like the entries you find in a dictionary or encyclopedia, complete with text, pictures, and other multimedia elements, the Definition List is the ideal way to present a glossary, list of terms, or other name/value list.

    Definition List makes use of following three tags.

    • <dl> - Defines the start of the list
    • <dt> - A term
    • <dd> - Term definition
    • </dl> - Defines the end of the list

    <dl>
    <dt><b>HTML</b></dt>
    <dd>This stands for Hyper Text Markup Language</dd>
    <dt><b>HTTP</b></dt>
    <dd>This stands for Hyper Text Transfer Protocol</dd>
    </dl>

    Run

    Appropriate List Usage:

    Following are just a suggestion and there is no hard and fast rule to use them:

    Use unordered lists for:

    • Link collections
    • Short, non sequenced groups of text
    • Providing the summary points of a presentation

    Use ordered lists for:

    • Tables of contents
    • Sets of sequential sections of text
    • Assigning numbers to short phrases that can be referred at other places via hyperlinks

    Use definition lists for:

    • Glossaries
    • Custom bullets - make the item after the <dt> tag an icon-sized bullet image
    • Any list of name/value pairs


    Related Videos