HTML Lists

HTML lists:-HTML provides three types of elements  <ul>,<ol>, and <dl> for marking up three types of lists,

The list elements are as follows:

  1. Unordered lists:- An unordered list starts with the <ul> opening tag. Collections of items in the unordered list that appear in no particular order.
  2. Ordered lists:- An ordered lists start with the <ol> opening tag in which the items appear in sequence such as (1,2,3.. or A, B, C…)
  3. Description lists:- An Description list starts with the <dl> opening tag that consist of name and value pairs elements including but not limited to terms and definitions

All list elements themselves and the item elements that go in list elements are displayed as block elements by default, which means that the elements start on a new line and have some space above and below, but you may be altered with CSS.

Let’s see in details

 

1.Unordered Lists:-

By default, the web browser will display an unordered list <ul> with a bullet symbol before each list item <li>, but it can be changed with the help of a style sheet (CSS). To mark up the unordered list as a <ul> element. this unordered list start with opening <ul> tag before the first list item <li> and the closing with </ul>  after the last list item <li>. Then, to mark up each list item in the unordered list as a list item <li>, enclosing each list item in opening <li> tag and closing </li> tag,  you will see in a moment in the below example.

You can place one or more than one list item within an unordered list. But cannot put other elements and any untagged text within the unordered list. However, you can place any type of content HTML elements within a list item <li>

Example:-

<ul>
       <li>List item no.1</li>
       <li>List item no.2</li>
       <li>List item no.3</li>
       <li>List item no.4</li>
       <li>List item no.5</li>
</ul>

Result:-

  • List item no.1
  • List item no.2
  • List item no.3
  • List item no.4
  • List item no.5


2.Ordered Lists:-

An ordered list is for those items that have a particular order, such as 1, 2, 3, … or a, b, c, and so on. And ordered list works like the unordered lists, I have described earlier paragraph, but the HTML  <ol> element is used to mark up the ordered list. Instead of the bullets symbol in an unordered list, the web browser automatically inserts numbers before ordered list items but you do not want numbers to display, then you can remove the numbering symbols with the help of style sheets (CSS), so you do not require to put the number symbol before list items in the source document.

An ordered list elements must contain one or more than one list item elements, as shown in the below example:

Example:-

<ol>
    <li> an ordered list item example one </li>
    <li> an ordered list item example two </li>
    <li> an ordered list item example three </li>
    <li> an ordered list item example four </li>
</ol>

Result:-

  1. An ordered list item example one
  2. An ordered list item example two
  3. An ordered list item example three
  4. An ordered list item example four

The default rendering of an ordered list. The web browser adds the number symbol automatically.

If you want to start with a number other than 1, such as ‘5’ you can use the “start” attribute in the Opening <ol> tag to starting with a particular number, and also start with alphabetically such as A, B, C, D, or a, b, c, d,.. and I, II, III, IX, X, etc by using “type” attribute, as shown in the below example:

Example no.1:-

<ol start=“5”>
    <li> an ordered list item example one </li>
    <li> an ordered list item example two </li>
    <li> an ordered list item example three </li>
    <li> an ordered list item example four </li>
</ol>

Result:-

    5. An ordered list item example one

    6. An ordered list item example two

    7. An ordered list item example three

    8. An ordered list item example four

Example No. 2

<ol type=“A”>
    <li> an ordered list item example one </li>
    <li> an ordered list item example two </li>
    <li> an ordered list item example three </li>
    <li> an ordered list item example four </li>
</ol>

Result:-

  1.  ordered list item example one
  2. ordered list item example two
  3. ordered list item example three
  4. ordered list item example four

Note:-  You can put any type of list elements such as <ul>, <ol>, or <dl> within the list item <li> element of any list type. for example:

<ul>
    <li> an unordered list item example one </li>
    <li> 

      <ol>
            <li>
an ordered list item example one </li>
            <li>
an ordered list item example two </li>
            <li>
an ordered list item example three </li>
            <li>
an ordered list item example four </li>
       </ol>

    </li>
    <li> an unordered list item example two </li>
    <li> an unordered list item example three </li>
</ul>


3. Description list:

HTML description list elements are used for any type of name/value pairs, such as questions and answers, terms and their definitions, or other types of terms and their associated information. Description list is a bit different from the unordered list and ordered list that we have described earlier paragraph. It is marked up as an <dl> element. The content of an <dl> element is some number of <dt> elements that indicate the names and <dd> elements for their respective values such as a description, definition, or associated information. 

The <dl> element defines a description list
The text between <dt> tag and </dt> tags is used for a term or label
The content within the <dd> element defines a value such as a description, definition, or associated information.

Example:-

Description list example

Result:-

Description list example result

 

The  HTML description list <dl> element permit to contain only <dt> and <dd> elements. we can’t put other html elements within <dt> elements such as heading elements or other content-grouping elements (like paragraphs) in names but you can put any type of flow content within the value (dd) element. In the previous example, the last <dd> element contains two-paragraph <p>elements, the default spacing between the two <p>elements could be cleaned up with a style sheet(CSS). Description List is permitted to have multiple definition <dd>elements with one term or level <dt>element. 

Example:-

<dl>
      <dt></dt>
      <dd></dd>
      <dd></dd>
       <dt></dt>
       <dd></dd>
       <dd></dd>
       <dd></dd>
</dl>