The complete guide about lists in HTML

Computer Applications – 165 Unit 2 – HTML – Lists in HTML

For computer applications, I have covered Unit 1 NetworkingHTML BasicsHTML Basic Elements, and HTML formatting tags in previous articles. In this article, I am going to discuss about Lists, Fonts, and Images in HTML. The contents are:
    1. Lists in HTML
    2. Types of lists in HTML
    3. Ordered lists
    4. Unordered List
    5. Description List

Lists in HTML

Lists are an important part of a document. Whether it is word document or pdf document or web document. It adds functionality to understand the contents clearly. In your textbook you have seen the list of questions, points are listed in numbers or symbols! This information makes your text and document contents more attractive and readable. So now questions coming in your mind how to use lists in HTML? Don’t worry, in the next paragraph, you will learn that! Before that let understands about types lists supported by HTML.

Types of Lists in HTML

HTML support three types of lists basically. They are:

    1. Ordered (Numbered) Lists – A list with numbers. 
    2. Unordered (Bulleted) Lists – A list with symbols or bullets
    3. Description (Definition) Lists – A list to write definitions or terminologies.

Ordered (Numbered) Lists

To generate order lists in HTML following tags are used:
    1. OL: The ordered lists always starts with <ol> and ends with </ol>. 
    2. LI: LI tag specifies list items and written between <ol> and </ol>. For a number of the list items, the same number of <li> tags are required.

Example:

<html>
<head>
<title>Ordered List in HTML</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ol>
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Compueter Applciations</li>
<li>Artificial Intelligence</li>
</ol>

</body>
</html>

Output
use of <ol> tag in HTML
Ordered list output

Attributes of ordered list

Ordered lists can be customized using the following attributes:

    1. Type: This attribute is used to change the list type from numbers to alphabetical lists (starts with ‘A’ or ‘a’), roman numerical list (starts with ‘i’ or ‘I’).
    2. <html>
      <head>
      <title>Order List with small small alphabets numbers in HTML</title>
      </head>
      <body>
      <h1>Subjects we offer:</h1>
      <ol type="a">
      <li>Computer Science</li>
      <li>Informatics Practices</li>
      <li>Information Technulogy</li>
      <li>Compueter Applciations</li>
      <li>Artificial Intelligence</li>
      </ol>
      </body>
      </html>
      Output:
      type attribute of <ol>
      Now you change the code and following then observe the output in your PC:
      1. type = “I”
      2. type = “a”
      3. type = “A”
    3. Start: The start attribute is used to specify the starting value for the list. Observe the following code and output.
    4. <html>
      <head>
      <title>Order List with small roman numbers in HTML</title>
      </head>
      <body>
      <h1>Subjects we offer:</h1>
      <ol type="a" start="27">
      <li>Computer Science</li>
      <li>Informatics Practices</li>
      <li>Information Technulogy</li>
      <li>Compueter Applciations</li>
      <li>Artificial Intelligence</li>
      </ol>
      </body>
      </html>
      Output:
      Start attribute with OL
      Start attribute with OL

Unordered List in HTML

To use unordered list HTML provides <ul> and </ul> tag.  
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ul>
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technulogy</li>
<li>Compueter Applciations</li>
<li>Artificial Intelligence</li>
</ul>

</body>
</html>
Output
ul tag in HTML
ul tag in HTML
Unordered list has a type attribute only. It support three types of bullets:
    1. Disc: This default type of bullets in HTML.
    2. Circle: You can change the type in circle which is coming like disc only but without any fill color.
    3. Square: It display the list with square filled bullets.
<html>
<head>
<title>Unordered List with circle type</title>
</head>
<body>
<h1>Subjects we offer:</h1>
<ul type="circle">
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Computer Applications</li>
<li>Artificial Intelligence</li>
</ul>
</body>
</html>

Output
circle type bullets in html

Description Lists in HTML

This list is used to write definitions or terminologies in HTML web page. To use this type of list, the following tags are used: 
    1. DL: It is used to start and end the description list.
    2. DT: It is used to write the term or word for the definition. 
    3. DD: It is used to write the data or descriptive text for the term. 

Observe the following code:

<html>
<head>
<title>Descrition List</title>
</head>
<body>
<dl>
<dt>HTML
<dd>Hpyertext markup language is used to create the static webpage.
</dt>
</dl>
</body>
</html>
Output:
description tag in HTML
Thank you for reading the article. Feel free to ask your doubts or queries related to this topic in comments. 

1 thought on “The complete guide about lists in HTML”

  1. Pingback: The complete guide - HTML Forms for CBSE class 10 Computer Applications - TutorialAICSIP Computer Applications

Comment Your Views

%d bloggers like this: