In this article, you will learn about lists in HTML. Let’s start it!
Topics Covered
Lists in HTML class 10
For computer applications, I have covered Unit 1 Networking, HTML Basics, HTML 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:
-
- Ordered (Numbered) Lists – A list with numbers.
- Unordered (Bulleted) Lists – A list with symbols or bullets
- Description (Definition) Lists – A list to write definitions or terminologies.
Ordered (Numbered) Lists
To generate order lists in HTML following tags are used:
-
- OL: The ordered lists always starts with <ol> and ends with </ol>.
- 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
Attributes of an ordered list
Ordered lists can be customized using the following attributes:
- type : It specifies the type of list. Such lists types are a,A,i,I.
- 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 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:
-
- Disc: This default type of bullets in HTML.
- Circle: You can change the type in the circle which is coming like disc only but without any fill color.
- 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
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:
-
- DL: It is used to start and end the description list.
- DT: It is used to write the term or word for the definition.
- 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:
Thank you for reading the article. Feel free to ask your doubts or queries related to this topic in the comments.
[…] you have to do registration first. In previous articles, we have discussed images in HTML, Lists in HTML, HTML formatting Tags, HTML basic […]