In HTML, you can create lists to organize and present information in a structured manner. There are two main types of lists: unordered lists and ordered lists.
Unordered List (ul): An unordered list displays a list of items with bullet point<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h1>My Favorite Fruits</h1>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</body>
</html>
Ordered List (ol): An ordered list displays a numbered list of items.<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h1>Steps to Make a Sandwich</h1>
<ol>
<li>Get two slices of bread.</li>
<li>Spread peanut butter on one slice.</li>
<li>Spread jelly on the other slice.</li>
<li>Press the two slices together.</li>
<li>Cut the sandwich in half (optional).</li>
</ol>
</body>
</html>
In both examples, we use the <ul> and <ol> tags to define the unordered and ordered lists, respectively. Inside these tags, we use <li> (list item) tags to define each item in the list. The browser automatically handles the presentation, providing bullet points for unordered lists and numbers for ordered lists.
You can also nest lists within other lists to create hierarchical structures. For example, you can create a list of ingredients for each sandwich step in the ordered list:
<!DOCTYPE html>
<html>
<head>
<title>Nested List Example</title>
</head>
<body>
<h1>Steps to Make a Sandwich</h1>
<ol>
<li>Get two slices of bread.</li>
<li>
Spread peanut butter on one slice.
<ul>
<li>Peanut Butter</li>
<li>Butter knife</li>
</ul>
</li>
<li>
Spread jelly on the other slice.
<ul>
<li>Jelly</li>
<li>Butter knife</li>
</ul>
</li>
<li>Press the two slices together.</li>
<li>Cut the sandwich in half (optional).</li>
</ol>
</body>
</html>
By nesting <ul> or <ol> within an <li> tag, you can create a sublist for each list item. This way, you can represent more complex information in a structured and organized manner.