Day 5 - Working with Lists (Unordered and Ordered)
Welcome back to Day 5 of our 30-day HTML tutorial series! Today, we're going to explore one of the most common elements used in web content: lists. HTML offers two types of lists: unordered lists (bulleted lists) and ordered lists (numbered lists). These are valuable for presenting information in a structured and organized manner.
Unordered Lists (Bulleted Lists)
Unordered lists are perfect for presenting items in no particular order. To create an unordered list, use the <ul> element, and for each list item, use the <li> (list item) element. Here's an example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This will generate a bulleted list:
You can customize the list style using CSS to change the bullet points to squares, circles, or other symbols.
Ordered Lists (Numbered Lists)
Ordered lists are used when the order of items matters. To create an ordered list, use the <ol> element, and again, use the <li> element for each list item. Here's an example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
This will generate a numbered list:
Just like unordered lists, you can style ordered lists with CSS to change the numbering format.
Nested Lists
You can also nest lists within other lists to create sublists. Here's an example of a nested unordered list within an ordered list:
<ol>
<li>Main item</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Another main item</li>
</ol>
This will create:
Putting It All Together
Now, let's update our HTML document with lists:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text. It provides a clear separation between different blocks of content.</p>
<h2>About Me</h2>
<p>I'm passionate about web development and enjoy sharing my knowledge with others.</p>
<p>Contact me at: example@email.com</p>
<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Interests</h3>
<ol>
<li>Web design</li>
<li>Photography</li>
<li>Hiking</li>
</ol>
</body>
</html>
With lists added to your HTML document, you can effectively organize and
present information on your web page.
Comments
Post a Comment
Thank You !