Quick Contact

    HTML Lists

    Introduction

    HTML lists can be used to represent a list of data in a well-organized and meaningful manner. In HTML, there are three sorts of lists, each with its own purpose and significance.

    • Unordered list —

      It is used to generate a list of related objects in any order.

    • Ordered list —

      It is used to generate a list of similar things in a certain order.

    • Description list —

      It is used to generate a list of words and descriptions.

    Note:

    Text, pictures, hyperlinks, line spacing, and other elements can be contained within a list item. We can also build a nested list by placing a whole list within a list item.

    HTML Unordered Lists

    The < ul> element is used to construct an unordered list, so each list entry begins with the < li> element.

    Bullets are used to denote list elements in unordered lists.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Unordered List< /title>
    < /head>
    < body>
    < h2>HTML Unordered List< /h2>
    	< ul>
    < li>Chocolate Cake< /li>
    < li>Black Forest Cake< /li>
    < li>Pineapple Cake< /li>
    < /ul>
    	< hr>
    < h2>HTML Nested Unordered List< /h2>
    < ul>
    < li>Chocolate Cake
    < ul>
    < li>Chocolate Velvet Cake< /li>
    < li>Chocolate Lava Cake< /li>
    < /ul>
    < /li>
    < li>Black Forest Cake< /li>
    < li>Pineapple Cake< /li>
    < /ul>
    < /body>
    < /html>
    

    Output

    HTML Unordered List

      • Chocolate Cake
      • Black Forest Cake
      • Pineapple Cake

    ________________________________________

    HTML Nested Unordered List

    • Chocolate Cake
      • Chocolate Velvet Cake
      • Chocolate Lava Cake
    • Black Forest Cake
    • Pineapple Cake

    The CSS list-style-type property may also be used to modify the bullet type in an unordered list.

    The following style rule changes the bullet type from disc to square:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>Change Bullet Type in an HTML Unordered List Using CSS< /title>
    < style>
    ul {
    list-style-type: square;
            }
    < /style>
    < /head>
    < body>
    < ul>
    < li>Chocolate Cake< /li>
    < li>Black Forest Cake< /li>
    < li>Pineapple Cake< /li>
    < /ul>
    < /body>
    < /html>
    

    Output

    • Chocolate Cake
    • Black Forest Cake
    • Pineapple Cake

    HTML Ordered Lists

    The < ol> element is used to build an ordered list, and each list item begins with the < li> element. When the order of the list’s entries is critical, ordered lists are employed.

    An ordered list’s list elements are denoted by numbers.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Ordered List< /title>
    < /head>
    < body>
    < h2>HTML Ordered List< /h2>
    	< ol>
    < li>Wear Seat Bealt< /li>
    < li>Starts the engine< /li>
    < li>Look around and go< /li>
    < /ol>
    < hr>
    < h2>HTML Nested Ordered List< /h2>
    < ol>
    < li>Wear Seat Bealt< /li>
    < li>Starts the engine< /li>
    < li>Look around and go
    < ol>
    < li>Check the Fuel< /li>
    < li>Manage your Speed< /li>
    < /ol>
    < /li>
    < /ol>
    < /body>
    < /html>
    

    Output

    HTML Ordered List

    1. Wear Seat Bealt
    2. Starts the engine
    3. Look around and go

    ________________________________________

    HTML Nested Ordered List

    1. Wear Seat Bealt
    2. Starts the engine
    3. Look around and go
      1. Check the Fuel
      2. Manage your Speed

    HTML Description Lists

    A descriptive list is a collection of objects that each have a describe or definition.

    The < dl> element is used to build the description list. The < dl> element is used in combination with the < dt> element, which specifies a term, and the < dd> element, which specifies the definition of the term.

    Browsers often render definition lists by separating the words and definitions into distinct lines, with the term definitions indented somewhat.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < title>HTML Description or Definition List< /title>
    < /head>
    < body>
    < h2>HTML Definition List< /h2>
    	< dl>
    < dt>Lion< /dt>
    < dd>Lion is Wild Animal.< /dd>
    < dt>Dog< /dt>
    < dd>Dog is Pet Animal.< /dd>
    < /dl>
    < /body>
    < /html>
    

    Output

    FAQS

    Q1. What are the 3 types of list in HTML?

    In HTML, there are three types of lists: Bulleted or unordered list (ul) (ol) Ordered or numbered list (ol) Description or Definition list (dl).

    Q2. What is table tag in HTML?

    An HTML table is defined using the < table> element. A table in HTML is made up of one < table> element plus one or more < tr>, < th>, and < td> components. The < tr> element represents a table row, the < th> element a table header, and the < td> element a table cell.

    Q3. What are lists used for?

    A list is a collection of items that may be arranged or unordered. A list may be used for a variety of purposes, such as storing objects or removing and adding items.

    Q4. What is description list in HTML?

    A description list is a set of words that each have a description. HTML lists are used to express specific information in a list format.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.