Full width home advertisement

SEO and Blogging

All about Gaming

Post Page Advertisement [Top]

Define list in HTML. Explain the different types of list with example.

HTML offers web creators three different ways for determining arrangements of data. All list should contain at least one list components. Records may contain − 

• <ul> − An unordered list. This will list things utilizing plain projectiles. 

• <ol> − An ordered list. This will utilize various plans of numbers to list your things. 

• <dl> − A definition list. This organizes your things similarly as they are masterminded in a word reference.

HTML List. Define list in HTML. Explain the different types of list with example.

HTML Unordered Lists 

An unordered list is an assortment of related things that have no uncommon request or grouping.  This list is made by utilizing HTML <ul> tag. Every thing in the rundown is set apart with a projectile. 

Example:-

        <!DOCTYPE html>
                <html>
                    <head>
                        <title>HTML Unordered List</title>
                    </head>
                    <body>
                        <ul>
                            <li>Car</li>
                            <li>Truck</li>
                            <li>Train</li>
                            <li>Flight</li>
                            </ul>
                    </body>
                </html>

This will produce the following result,

  • Car
  • Truck
  • Train
  • Flight

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options −
        <ul type = "square">
        <ul type = "disc">
        <ul type = "circle">

Example:-
Following is an example where we used <ul type = "square">
    <!DOCTYPE html>
        <html>
            <head>
                <title>HTML Unordered List</title>
            </head>
            <body>
                <ul type = "square">
                    <li>Honda</li>
                    <li>Yamaha</li>
                    <li>TVS</li>
                    <li>KTM</li>
                </ul>
            </body>
        </html>

This will produce the following result −
    ▪ Honda
    ▪ Yamaha
    ▪ TVS
    ▪ KTM

Following is an example where we used <ul type = "disc">
        <!DOCTYPE html>
            <html>
                <head>
                    <title>HTML Unordered List</title>
                </head>
                <body>
                    <ul type = "disc">
                        <li>Lemon Juice</li>
                        <li>Apple Juice</li>
                        <li>Carot Juice</li>
                        <li>Milk Shake</li>
                    </ul>
                </body>
            </html>

This will produce the following result –
    • Lemon Juice
    • Apple Juice
    • Carot Juice
    • Mike Shake

HTML Ordered Lists 

In the event that you are needed to place your things in a numbered list rather than bulleted, then, at that point HTML requested rundown will be utilized. This rundown is made by utilizing <ol> tag. The numbering begins at one and is augmented by one for each progressive arranged rundown component labeled with <li>.

Example

<!DOCTYPE html>
        <html>
            <head>
                <title>HTML Ordered List</title>
            </head>
            <body>
                <ol>
                    <li>Beetroot</li>
                    <li>Ginger</li>
                    <li>Potato</li>
                    <li>Radish</li>
                </ol>
            </body>
        </html>

This will produce the following result −
1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute

You can use the type attribute for <ol> tag to specify the type of numbering you like to want. By default, it is a number. Following are the possible options −
            <ol type = "1"> - Default-Case Numerals.
            <ol type = "I"> - Upper-Case Numerals.
            <ol type = "i"> - Lower-Case Numerals.
            <ol type = "A"> - Upper-Case Letters.
            <ol type = "a"> - Lower-Case Letters.

Example
Following is an example where we used <ol type = "1">
    <!DOCTYPE html>
        <html>
            <head>
                <title>HTML Ordered List</title>
            </head>
            <body>
                <ol type = "1">
                    <li>PUBG</li>
                    <li>PUBG Mobile</li>
                    <li>Free Fire</li>
                    <li>Call of Duty</li>
                </ol>
            </body>
        </html>

This will produce the following result −
        1. PUBG
        2. PUBG Mobile
        3. Free Fire
        4. Call of Duty

Following is an example where we used <ol type = "I">
    <!DOCTYPE html>
            <html>
                <head>
                    <title>HTML Ordered List</title>
                </head>
                <body>
                    <ol type = "I">
                        <li>First class</li>
                        <li>Second class</li>
                        <li>Third class</li>
                        <li>Fourth class</li>
                    </ol>
                </body>
            </html>

This will produce the following result −
    I. First class
    II. Second class
    III. Third class
    IV. Fourth class

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options −
            <ol type = "1" start = "4"> - Numerals starts with 4.
            <ol type = "I" start = "4"> - Numerals starts with IV.
            <ol type = "i" start = "4"> - Numerals starts with iv.
            <ol type = "a" start = "4"> - Letters starts with d.
            <ol type = "A" start = "4"> - Letters starts with D.

Example
Following is an example where we used <ol type = "i" start = "4" >

    <!DOCTYPE html>
        <html>
            <head>
                <title>HTML Ordered List</title>
            </head>
            <body>
                <ol type = "i" start = "4">
                    <li>Tourist Bus</li>
                    <li>Govt Bus</li>
                    <li>Route Bus</li>
                    <li>School Bus</li>
                </ol>
            </body>
        </html>

This will produce the following result −
        iv. Tourist Bus
        v. Govt Bus
        vi. Route Bus
        vii. School Bus

HTML Definition Lists 

HTML and XHTML upholds a rundown style which is called definition list where passages are recorded like in a word reference or reference book. The definition list is the best method to introduce a glossary, list of terms, or other name/esteem list. 

Definition List utilizes following three labels.
        • <dl> − Defines the beginning of the rundown
        • <dt> − A term
        • <dd> − Term definition
        • </dl> − Defines the finish of the rundown

Example

        <!DOCTYPE html>
            <html>
                <head>
                    <title>HTML Definition List</title>
                </head>
                <body>
                    <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>
                </body>
            </html>
This will produce the following result −
    HTML
        This stands for Hyper Text Markup Language
    HTTP
        This stands for Hyper Text Transfer Protocol

Want to Learn HTML, then Click Here

No comments:

Post a Comment

Bottom Ad [Post Page]

| Designed by Colorlib