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:
- Ordered lists (
<ol>): These are for lists where order matters, like the steps of a recipe or the rankings in a competition. - Unordered lists (
<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:
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:
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:
