/* */ Click to Join Live Class with Shankar sir Call 9798158723

Html Lists

What is List tag ?

HTML Lists have three type of lists to show single or multiple list item. These three lists are Unordered List, Ordered List and Description List, formerly known as Definition List. For example, name of fruits, name of cities, top engineering colleges in sequence etc. Lists are styled by bullets or numbers based on the type of list, i.e Unordered List or Ordered List. We can also create Nested Lists in HTML.

HTML List Example

Unordered list Ordered list Description List
  • Pen
  • Books
  • Notebooks
  • Bag
  1. Html
  2. CSS
  3. Javascript
  4. node.js
  5. SQL
HTML
scalaton of webpages
CSS
Style of webpages
Java script
Funtions of webpages



Unordered List

Use Unordered List where sequence is not required. For Example, list of fruits, vegetables etc. By default, unordered list are styled with disk (•). Till html4/xhtml, type attribute was used to change list style. But in HTML5, type attribute of unordered list is deprecated. But we can remove or change list style using CSS list-style property. its have 4 attributes : type = disk, circle, square,none

Unordered List 
<!DOCTYPE html> 
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
    </head>
    <body>
        <ul>
            <center>Ordered list</center>
            <li>Pen</li>
            <li>Bag</li>
            <li>Notebooks</li>
            <li>Books</li>
        <ul>
    </body>
</html>
Output

    Unordered list
  • Pen
  • Bag
  • Notebooks
  • Books




Ordered List

Ordered list are Sequential List. ol use numbers, alphabets and Roman characters as list style. Ordered list are countable by default, ordered list are styled with numbers. We can change list style using type attribute or List Style.

Ordered List 
<!DOCTYPE html> 
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
    </head>
    <body>
        <ol>
            <center>Ordered list</center>
            <li>table 1</li>
            <li>table 2</li>
            <li>table 3</li>
            <li>table 4</li>
        <ol>
    </body>
</html>
Output

    Ordered list
  1. table 1
  2. table 2
  3. table 3
  4. table 4




Description List

Description List, formerly known as Definition List is a list with description term and description data.

Discription List 
<!DOCTYPE html> 
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
    </head>
    <body>
        <dl>
            <dt>WEB DESIGNING</dt>
            <dd>To Design front end of a website.<dd>
        <dl>

        <dl>
            <dt>>DATABASE<dt>
            <dd>ORACLE, My SQL, and  SQL Server<dd>
        <dl>
    </body>
</html>
Output

WEB DESIGNING
To Design front end of a website.
DATABASE
ORACLE, My SQL, and SQL Server








«  PREVIOUS PAGE NEXT PAGE »