Hello, space explorer! Today, we'll delve into HTML lists. Just like real-life lists, lists in HTML structure webpage content, making it easy to read. By the end of this lesson, you'll be able to craft ordered and unordered lists in HTML, understand list elements, and create nested lists.
Web development often requires structuring content in the form of lists. Fortunately, HTML provides us with tags to create such lists systematically. There are two main types:
<ol>): These are for lists where order matters, like the steps of a recipe or the rankings in a competition.<ul>): These are for lists where order isn't crucial, such as a shopping list or a list of favorite movies.Creating unordered lists or bullet lists is simple using the <ul> tag, with <li> tags for each item. Here's an unordered list of planets:
HTML, XML1<body> 2 <h1>List of Planets</h1> 3 <ul> 4 <li>Mercury</li> 5 <li>Venus</li> 6 <li>Earth</li> 7 <li>Mars</li> 8 </ul> 9</body>
When viewed in a browser, this code generates a list with bullet points. Notice how all <li> tags are inside the <ul> element.
When the order is vital to the data, we use an ordered list. Here's how to create one for planets according to their distance from the Sun:
HTML, XML1<body> 2 <h1>Planets in Order from the Sun</h1> 3 <ol> 4 <li>Mercury</li> 5 <li>Venus</li> 6 <li>Earth</li> 7 <li>Mars</li> 8 </ol> 9</body>
Nested lists, or lists within lists, are useful when we need to establish a hierarchy. This can be achieved by placing an <ul> or <ol> tag inside a <li> tag. For instance, consider a master list of planets with sub-lists of their features:
HTML, XML1<body> 2 <h1>Planets and Their Features</h1> 3 <ul> 4 <li> 5 Mercury 6 <ul> 7 <li>Smallest planet</li> 8 <li>Closest to the Sun</li> 9 </ul> 10 </li> 11 <li> 12 Venus 13 <ul> 14 <li>Second brightest natural object in the night sky</li> 15 <li>Also known as the morning star and evening star</li> 16 </ul> 17 </li> 18 </ul> 19</body>
Ordered lists can be customized using the type and start attributes.
For example, to make an ordered list start numbering from 3, you can tweak it as follows:
HTML, XML1<body> 2 <h1>Planets in Order from the Sun (starting from 3)</h1> 3 <ol start="3"> 4 <li>Earth</li> 5 <li>Mars</li> 6 </ol> 7</body>
The type attribute in HTML lists is used to specify the style of the list item marker for ordered and unordered lists. For example, the following would create an ordered list with items marked as A, B, C, and so on:
HTML, XML1<ol type="A"> 2 <li>List Item 1</li> 3 <li>List Item 2</li> 4 <li>List Item 3</li> 5</ol>
Congratulations! You've now learned how to construct HTML lists, including ordered, unordered, and nested lists. You've also gained an understanding of list attributes and can craft lists effectively. Let's put this knowledge to the test in the exercises that follow. Good luck!