Guidance portal

World of Guidance and Education

HTML Lists

In this chapter you will learn what are html lists, how to insert html lists and what is the function of html lists?

The insertion of bullets and numbering in text is termed as "html lists" in HTML. In simple words, lists are bullets and numbering on the webpage. Llets learn the syntax of inserting different lists:

Syntax:

     <"type of list"> (opening tag)
    <li>
    there is your first text for list(bullets)
    </li>
    </"tupe of list"> (closing tag)


Note

Among several types of lists the most popular lists are circle, square and disc.

"type of list": This refers to the HTML tag depending upon the type of lists. There are many types of lists for example

  • Number lists
  • Upper case letters
  • Lower case letters
  • Numerals lists
  • Square lists
  • Circle lists
  • Disc lists

The tag for each type of lists is given below in examples. Please note while reading the examples how the sytax of tag changes with change in type of list.

Tag <li>: This is used to insert list items. For each item to be listed you have to insert opening and closing tags (this has been further shown in below examples).

Number lists:

Note the code shown below, tag is <ol> with closing tag </ol>

Upper case lists

For uppercase letters note the change of tag i.e. <ol type="A">

Lower case lists

For lowercase just write lowercase "a" instead of Capital "A".

Numerals lists

Code for numerals lists are (note the change in tag type)

Note

If you want to place a lower numarals then insert lower numarals on place of type.

Square lists

For the square lists (note the change in tag type). Please remember the numbering lists tag is <ol> whereas the bullet lists tag is <ul>.

Circle lists

For the circle list just replace the "square" with "circle".

Disc list

Lastly the discs list code. You might noticed the change from "circle" to "disc" also we have used <ul> and not <ol> since this is bullet list.

    <ul type="disc">
    <li>
    there is your first text for list(bullets)
    </li>
    </ul>

    Note

    Remember this dont insert bullets for designing because bullets has its show bullet item is the part or the topic of text.

AT the end lets put all these numberings and bullets in one code to check the display on the browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    disc
    <ul type="disc">
    <li>there is your first text for list(bullets)
    </li>
    </ul>
    <p>circle</p>
    <ul type="circle">
    <li>there is your first text for list(bullets) </li>
    </ul>
    <p>squre</p>
    <ul type="square">
    <li>there is your first text for list(bullets) </li>
    </ul>
    <p>numers</p>
    <ol type="1">
    <li>there is your first text for list(bullets) </li>
    </ol>
    <p>numarals</p>
    <ol type="I">
    <li>there is your first text for list(bullets) </li>
    </ol>
    <p>letters</p>
    <ol type="A">
    <li>there is your first text for list(bullets) </li>
    </ol>
    </body>
    </html>

    browser view

 

comments powered by Disqus