Computer Science
Grade 6
20 min
Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags
Build unordered and ordered lists to organize information on your webpage.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the purpose of the `<ul>`, `<ol>`, and `<li>` HTML tags.
Differentiate between an ordered list (`<ol>`) and an unordered list (`<ul>`).
Construct a valid HTML unordered list with at least three list items.
Construct a valid HTML ordered list with at least three list items.
Explain why `<li>` tags must always be placed inside either a `<ul>` or `<ol>` tag.
Create a nested list by placing one list inside a list item (`<li>`) of another list.
Have you ever made a list of your favorite video games or the steps to beat a level? 🎮 Let's learn how to make those same lists on a real website!
In this lesson, you'll discover how to organize information on a webpage using three special HTML tag...
2
Key Concepts & Vocabulary
TermDefinitionExample
Unordered List: `<ul>`A list where the order of the items does not matter. It uses bullet points by default.A shopping list for a party: `<ul><li>Chips</li><li>Soda</li><li>Balloons</li></ul>`
Ordered List: `<ol>`A list where the order of the items is important. It uses numbers by default.Steps to log in: `<ol><li>Enter username</li><li>Enter password</li><li>Click 'Submit'</li></ol>`
List Item: `<li>`A tag that represents a single item within either an ordered (`<ol>`) or unordered (`<ul>`) list.In a list of pets, `<li>Dog</li>` would be one list item.
HTML TagA special keyword surrounded by angle brackets, like `<bod...
3
Core Syntax & Patterns
The Container Rule
`<li>` tags MUST go inside a `<ul>` or `<ol>` tag.
The `<ul>` and `<ol>` tags act like containers or boxes for your list items. You can't have a list item just floating by itself; it needs its container to tell the browser it's part of a list.
The Order Rule
Use `<ol>` for steps. Use `<ul>` for items.
Choose your list container based on whether the order is important. If you are listing steps in a process (1, 2, 3...), use an Ordered List (`<ol>`). If you are just listing a group of things (like your favorite foods), use an Unordered List (`<ul>`).
The Paired Tags Rule
Every opening tag (`<ul>`, `<ol>`, `<li>`) needs a closing tag (`</ul>`, `</ol>`, `</li...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You want to create a list of planets where the main list is numbered, and a sub-list for Mars's moons is bulleted. Which structure is correct?
A.<ol><li>Mars<ul><li>Phobos</li><li>Deimos</li></ul></li></ol>
B.<ol><li>Mars</li></ol><ul><li>Phobos</li><li>Deimos</li></ul>
C.<ul><li>Mars<ol><li>Phobos</li><li>Deimos</li></ol></li></ul>
D.<ol><li>Mars</li><ul><li>Phobos</li><li>Deimos</li></ul></ol>
Challenging
A list on a webpage is supposed to be numbered A, B, C, but it's showing up as a, b, c. What is the MOST LIKELY error in the code?
A.The programmer used `<ol type="a">` instead of `<ol type="A">`.
B.The programmer used `<ul>` instead of `<ol>`.
C.The programmer forgot the `type` attribute completely.
D.The computer's keyboard had caps lock off.
Challenging
A programmer wants a numbered list to start at 'D' and continue to 'E', 'F', etc. Which code accomplishes this?
A.<ol type="A" start="4"><li>Item D</li></ol>
B.<ol type="D"><li>Item D</li></ol>
C.<ol type="letter" start="D"><li>Item D</li></ol>
D.<ol><li>D. Item D</li></ol>
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free