The comprehensive guide about lists in HTML class 10

In this article, you will learn about lists in HTML. Let’s start it!

Lists in HTML class 10

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 Lists, Fonts, and Images in HTML.

Lists in HTML

Lists are an important part of a document. Whether it is a 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 into your mind about 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.
 

In the next section of lists in HTML class 10 you will learn types of lists it 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

lists in HTML class 10
lists in HTML class 10

Attributes of an ordered list

Ordered lists can be customized using the following attributes:
  1. type : It specifies the type of list. Such lists types are a,A,i,I. 
  2. start: It is the value of starting point for the list.

Observe this code:

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

</body>
</html>

Output:

unordered lists in HTML class 10
unordered lists in HTML class 10

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>
 
 
An unordered list has a type attribute only. It supports three types of bullets:
    1. Disc: This default type of bullets in HTML.
    2. Circle: You can change the type in the circle which is coming like disc only but without any fill color.
    3. Square: It displays 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
bulletetd lists in HTML class 10
bulletetd lists in HTML class 10
 

Description Lists in HTML

This list is used to write definitions or terminologies on 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:
definition list in HTML
definition list in HTML
 
 
Thank you for reading the article. Feel free to ask your doubts or queries related to this topic in the comments. 
 

1 thought on “The comprehensive guide about lists in HTML class 10”

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

Comment Your Views

%d bloggers like this: