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.
What you'll learn
- Identify the three HTML tags (``, ``, and ``) used to create lists on a webpage with 100% accuracy.
- Explain the difference between unordered lists (``) and ordered lists (``) by describing the type of markers (bullets vs. numbers) they use with at least two complete sentences.
- Apply the ``, ``, and `` tags to create a webpage with at least one unordered list and one ordered list, each containing at least three items, and validate the code using an online HTML validator with no errors.
- Create a webpage that uses both ordered and unordered lists to present information about their favorite hobbies, including at least 3 list items in each list, demonstrating correct HTML syntax and structure.
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 FreeMore from Advanced Topics
Computer Science for other grades
Frequently asked questions
What grade level is "Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags"?
Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags is a Grade 6 Computer Science lesson on ExcelOS.
What will I learn in Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags?
You'll be able to: Identify the three HTML tags (``, ``, and ``) used to create lists on a webpage with 100% accuracy; Explain the difference between unordered lists (``) and ordered lists (``) by describing the type of markers (bullets vs….
Is "Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with Creating Lists: The `<ul>`, `<ol>`, and `<li>` Tags?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.