1.

Explain lists in HTML?

Answer»

To group related information together list is used in HTML.

There are three types of lists namely <ul> unordered list, <ol> ordered list. All the items in any type of list will be defined by <LI> tag.

  • <ul> unordered list: This is the type of list which is not ordered i.e its not listed in numbers. It is displayed by using BULLETS or any other special character.

Unordered list can also have an attribute type. It SPECIFIES the type of bullet you will have, default is a disc.

<!DOCTYPE html> <html> <head>    <title>Unordered list tutorials</title> </head> <BODY>    <h2>Unordered list - 1</h2>    <ul>        <li>Pumpkin</li>        <li>Tomato</li>        <li>Potato</li>        <li>Onion</li>    </ul>    <h2>Unordered list - 2</h2>    <ul type="square">        <li>Tiger</li>        <li>Lion</li>        <li>Goat</li>        <li>Horse</li>    </ul>    <h2>Unordered list - 3</h2>    <ul type="circle">        <li>Car</li>        <li>Bike</li>        <li>Boat</li>        <li>Tank</li>    </ul> </body> </html>

  • <ol> Ordered List: 

Ordered list is listed with numbers i.e it has a SEQUENCE. An ordered list can also have an attribute type. It specifies the type of numbering you will have, default is Numbers. It can also have upper case roman, lower case roman, upper case letters, and lower-case letters. It also has an attribute start, which defines the number/alphabet the numbering will start.

All of these are in the below example.

<!DOCTYPE html> <html> <head>    <title>Ordered list tutorials</title> </head> <body>    <h2>Ordered list - 1</h2>    <ol>        <li>Pumpkin</li>        <li>Tomato</li>        <li>Potato</li>        <li>Onion</li>    </ol>    <h2>Ordered list - 2</h2>    <ol type="I">        <li>Tiger</li>        <li>Lion</li>        <li>Goat</li>        <li>Horse</li>    </ol>    <h2>Ordered list - 3</h2>    <ol type="i" start = "4">        <li>Car</li>        <li>Bike</li>        <li>Boat</li>        <li>Tank</li>    </ol>    <h2>Ordered list - 4</h2>    <ol type="a">        <li>Red</li>        <li>Green</li>        <li>Blue</li>        <li>Yellow</li>    </ol>    <h2>Ordered list - 5</h2>    <ol type="A" start = "7">        <li>Engineer</li>        <li>Accountant</li>        <li>Doctor</li>        <li>Coder</li>    </ol> </body> </html>



Discussion

No Comment Found