HTML lists are used to organize and structure content on a webpage. There are three types of lists in HTML: unordered lists (bulleted), ordered lists (numbered), and definition lists.
Unordered lists are created using the <ul>
tag, and each list item is marked with the <li>
tag. The items in an unordered list are typically displayed with bullet points.
Ordered lists are created using the <ol>
tag, and list items are marked with the <li>
tag. The items in an ordered list are typically displayed with numbers.
Definition lists are created using the <dl>
tag. Each list item consists of a term (<dt>
) and a definition (<dd>
).
Here is an example of an unordered list:
Copy code<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
And here is an example of an ordered list:
Copy code<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
And here is an example of a definition list
Copy code<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
You can also use CSS to style the list.
An Unordered List:
An unordered list, also known as a bullet list, is a type of list in HTML that is used to organize and structure content on a webpage. It is created using the <ul>
tag, and each list item is marked with the <li>
tag. The items in an unordered list are typically displayed with bullet points.
Here is an example of an unordered list:
Copy code<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can also use CSS to style the list, for example:
Copy codeul {
list-style-type: square;
}
An Ordered List:
An ordered list, also known as a numbered list, is a type of list in HTML that is used to organize and structure content on a webpage. It is created using the <ol>
tag, and each list item is marked with the <li>
tag. The items in an ordered list are typically displayed with numbers or letters.
Here is an example of an ordered list:
Copy code<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
You can also use CSS to style the list, for example:
Copy codeol {
list-style-type: upper-roman;
}
This will change the numbering to upper case Roman numerals. Additionally, you can use <ol start ="number">
to set the starting number for the ordered list.
Copy code<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This will set the starting number of the list to 5.
A Definition List:
A definition list, also known as a description list, is a type of list in HTML that is used to organize and structure content on a webpage. It is created using the <dl>
tag. Each list item consists of a term (<dt>
) and a definition (<dd>
).
Here is an example of a definition list:
Copy code<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
In this example, “Term 1” is the term and “Definition 1” is the definition. You can also use CSS to style the list.
It is commonly used to create glossaries or to mark-up dialogues in a conversation.