HTML Lists

Information on your web page can be listed using the List feature of HTML. You will have a set of reasons for including a list in your web pages. These reasons can vary from inserting your user's ten favorite music albums on the page or may consist of visitors' names along with their favorite hobby to list down in a web document. There may be plenty of reasons. So in simple terms, you can provide numbered or orderly place your information as a category or subcategory, which might increase your document's readability. In this chapter, you will learn how to use lists and the different tags used in listing your data.

HTML's Listing Tags

HTML provides three different techniques to specify information in the form of lists. It is to be noted that every list needs to have at least one multiple data element within it. The various forms of HTML list tags are:

HTML Tag Description
<ol> HTML <ol> tag is abbreviated as an Ordered List, which is used for numbering the lists on a web page.
<ul> HTML UL tag is abbreviated as an Unordered List, used to list your items via bullets and circles.
<dl> HTML dl tag is abbreviated as a Definition List, which is used to arrange your data items like how items remain placed in any dictionary.

The type Attribute

You can use the type attribute in these above listing tags. This type of attribute will eventually help you specify your customized type from the types pre-specified by HTML.

For Ordered List, the type can have five values:
  • <ol type = "1"> - Numbers, which is the default type of Ordered List
  • <ol type = "i"> - Numerals (roman) with lower caps
  • <ol type = "I"> - Numerals (roman) with upper caps
  • <ol type = "a"> - Numbering will be done in the form of Lower-case Letters
  • <ol type = "A"> - Numbering will be done in the form of upper-case Letters

Similarly, for Unordered lists also, there are three symbols that will act as bullets for your lists.

These three values can be used for type attribute of <ul>
  • <ul type = "square"> - Bulleting using a filled square.
  • <ul type = "disc"> - Bulleting using a filled circle.
  • <ul type = "circle"> - Bulleting using an empty circle.

Start Attribute

The start attribute of <ol> is used for providing the starting point or value of your list.

Example:

<ol type="I" start="3">

Example of HTML OL Tag

Example:

<ol type="i" start="4">
    <li> Four </li>
    <li> Five </li>
    <li> Six </li>
</ol>
<ol type="I" start="1">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
    <li> Neha </li>
</ol>
<ol type="A" start="1">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
    <li> Neha </li>
</ol>
<ol type="a" start="1">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
    <li> Neha </li>
</ol>
<ol type="1" start="1">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
    <li> Neha </li>
</ol>

Example of HTML UL Tag

Example:

<ul type="square">
    <li> A </li>
    <li> B </li>
    <li> C </li>
</ul>
<ul type="disc">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
</ul>
<ul type="circle">
    <li> Alex </li>
    <li> Deeksha </li>
    <li> Ray </li>
</ul>

Definition List

In this type of data listing, the data are arranged or listed like a dictionary or encyclopedia. It is used on the last page of your site to provide the glossary or place a set of definitions. It takes the help of two more tags called: <dt> - a definition terminology and <dd> - definition description.

Example:

<dl>
    <dt> Alex </dt>
    <dd> Class X </dd>
    <dt> Deeksha </dt>
    <dd> Class IX </dd>
</dl>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram