top of page
HTML5.png

HTML

LIST TAG

  • By using which tag we can create list of items in a webpage or HTML page is known as list tag.

  • HTML supports various types of list:-

  1. OL  (Ordered List)

  2. UL  (Unordered List)

  3. DL  (Definition List)

Ordered list:

​

  • An ordered list is a collection of related items that have special order or sequence.

  • This list is created by using HTML <ol> tag.

  • Each item in the list is marked with a numerical bullet.

  • An ordered list starts with the <ol> tag.

  • Each list item starts with the <li> tag.

  • We can use “type" attribute for <ol> tag to specify the type of numerical bullet we like.

  • The following are the possible options:-

    • <ol type="1"> - default case numerals.

    • <ol type="I" > - uppercase roman numerals

    • <ol type="i" > - lowercase roman numerals

    • <ol type="a" > - lowercase letters

    • <ol type="A" > - uppercase letters

  • We can use “start" attribute for <ol> tag to specify the starting point of numbering we need. The following are possible options:-

    • <ol type="1" start="4" > - numerals starts with 4.

    • <ol type="I" start="4" > - numerals starts with IV.

    • <ol type="a" start="4" > - numerals starts with d.

    • <ol type="A" start="4" > - numerals starts with D.

  • Example:

<html>
    <head>
        <title> ORDERED LIST </title>
    </head>
    <body>
        <h4> LETTERS LIST: </h4>
        <ol TYPE="A">
            <li> BCA </li>
            <li> MCA</li>
            <li> M.TECH</li>
        </ol>
        <h4> ROMAN LIST: </h4>
        <ol TYPE="I">
            <li> BCA </li>
            <li> MCA</li>
            <li> M.TECH</li>
        </ol>
        <h4> NUMBER LIST STARTS WITH 101: </h4>
        <ol TYPE="1" START="101">
            <li> BCA </li>
            <li> MCA </li>
            <li> M.TECH </li>
        </ol>
    </body>
</html>

​

OUTPUT:

ol.JPG

Unordered list:

​

•    An unordered list is a collection of related items that have no special order or sequence.
•    This list is created by using HTML <ul> tag.
•    Each item in the list is marked with a bullet.
•    An unordered list starts with the <ul> tag.
•    Each list item starts with the <li> tag.
•    We can use “type” attribute for <ul> tag to specify the type of bullet we like.
•    By default, the bullet symbol for the unordered list is disc.
•    Following are the possible options :

​

<ul type= "square" >  - [ ▪ ]
<ul type= "disc" >  -   [ ● ]
<ul type= "circle" >  -  [ ○ ]
 

​

  • Example:

<html>
    <head>
        <title> UNORDERED LIST </title>
    </head>
    <body>
        <h4> DISC BULLETED LIST: </h4>
        <ul TYPE="DISC" >
            <li> BCA </li>
            <li> MCA </li>
            <li> M.TECH </li>
        </ul>
        <h4> CIRCLE BULLETED LIST: </h4>
        <ul TYPE="CIRCLE" >
            <li> BCA </li>
            <li> MCA </li>
            <li> M.TECH </li>
        </ul>
        <h4> SQUARE BULLETED LIST: </h4>
        <ul TYPE="SQUARE" >
            <li> BCA </li>
            <li> MCA </li>
            <li> M.TECH </li>
        </ul>

    </body>
</html>
 

​

OUTPUT:

ul.JPG

Definition list:

​

•    HTML and XHTML support a list style which is called definition list where entries are listed like in a              dictionary.
•    Definition list makes use of following 3 tags:-
          I.    <dl> - Defines the start of the list.
          II.    <dt> - Data term
          III.    <dd> - Data definition
•    The <dl> tag is generally used to define a specific term.

​

•    Example:

<html>
    <head>
        <title> DEFINITION LIST </title>
    </head>
    <body>

        <dl>
           <dt> <b> HTML </b> </dt>
           <dd> It stands for HYPERTEXT MARKUP LANGUAGE </dd>

       </dl>
    </body>
</html>

​

OUTPUT:

​

dl.JPG

Related Topics

bottom of page