Unordered Lists (ul & li)
What is an Unordered List?
Imagine you are making a grocery list. It doesn't matter whether you buy the apples first or the oranges first—you just need to make sure both get in your cart.In HTML, an Unordered List is used for lists where the order of the items does not matter. The browser displays these items with small bullet points by default. We build them using two tags:
<ul> (Unordered List): The outer wrapper that defines the list.<li> (List Item): The tags that wrap each individual item inside the list.Why does it matter?
Lists are one of the most common ways to structure information on the web. In fact, most navigation menus, sidebars, and product galleries are built behind the scenes using<ul> and <li> tags, styled with CSS to remove the bullets!
How to write it
Nest your<li> tags directly inside the <ul> tags:
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
List Item 1
List Item 2
Common Mistakes
<ul>: Only <li> tags should be direct children of a <ul> tag. Writing <ul>Grocery Items<li>Apples</li></ul> is invalid.<li> tag with </li>.Quick Reference
<ul> — Defines an unordered list.<li> — Defines a list item.Your Task
Create an unordered list `<ul>` containing two list items `<li>`: 'Apples' and 'Oranges'.
index.html
Type code above to start the lesson.
Live Preview