Understanding List Elements in HTML

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 an Unordered List

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.

Creating an Ordered List

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:

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal