HTML lists are used to group related items together in a web page.
We can create list in HTML by using tags. For a set of items or data to display we can present as a list of items than writing them as line text.
Unordered lists
Unordered lists are used to display items in no particular order. They are typically used for bulleted lists, such as lists of features or benefits. Unordered lists are created using the `<ul>` tag. Each item in the list is created using the `<li>` tag.
We can list out different types of Scripts used in creating a web site.
Ordered lists are used to display items in a specific order. They are typically used for numbered lists, such as steps in a process or items in a sequence. Ordered lists are created using the `<ol>` tag. Each item in the list is created using the `<li>` tag.
Now let us rank students according to their mark they got in examination.
The `<dd>` (definition) tag is used in conjunction with the `<dl>` (definition list) tag to define a term. A definition list is a list of terms and their definitions.
Let us try to display some steps involved in creating a website.
Buy a domain name
Develop pages
Buy hosting account
Upload and set up the site.
<dl>
<dd>Buy a domain name</dd>
<dd>Develop pages </dd>
<dd>Buy hosting account</dd>
<dd>Upload and set up the site. </dd>
</dl>
While definition lists and HTML lists can both be used to display information, they are used for different purposes. Definition lists are used to define terms, while HTML lists are used to group related items. Defination List→
Styling HTML lists
HTML lists can be styled using CSS. For example, you can change the font, color, and size of the list items. You can also change the style of the bullets or numbers.
This CSS will style the ordered list with uppercase Roman numerals and the unordered list with square bullets. It will also make the list items larger and darker.
Questions
What are the two types of HTML lists?
What is the difference between an ordered list and an unordered list?
How do you create an ordered list in HTML?
How do you create an unordered list in HTML?
What is the <li> tag used for?
How can you style HTML lists using CSS?
What are some of the different ways to use HTML lists?
When would you use an ordered list instead of an unordered list?
When would you use an unordered list instead of an ordered list?
What are some creative ways to use HTML lists to improve the design and usability of a web page?
What is the <dl> tag used for?
What is the <dt> tag used for?
What is the <dd> tag used for?
How can you create a definition list in HTML?
How can you style definition lists using CSS?
Can you explain the difference between a definition list and an HTML list?