What is a List?
When you scroll down a Wikipedia page, you’ll see sections like See also, Notes, and References.
These are all lists.
Lists are a way of grouping items together. And in HTML there are two main types:
- Unordered List → no numbers, just bullet points (like in See also)
- Ordered List→ includes numbers or letters (like in References)
Unordered List
To create a list in HTML, you use the <li> tag, which means list item.
For a bulleted list (where order doesn’t matter), you wrap all the items inside a <ul> tag. <ul> stands for unordered list.
Here’s an example:
<h2>See also</h2>
<hr/>
<ul>
<li>List of actors with Academy Award nominations</li>
<li>
List of actors with two or more Academy Award nominations in acting
categories
</li>
<li>List of actors nominated for two Academy Awards in the same year</li>
</ul>Output
Assignment
Take the Notes section from the Wikipedia page and add it to your HTML.
- Add a heading level 2 that says “Notes”
- Add a horizontal line under the heading
- Then create an unordered list with the notes inside
Output
Solution
<h2>Notes</h2>
<hr />
<ul>
<li>Johansson was nominated for Best Actress in a Motion Picture Comedy or Musical for Lost in Translation and Best Actress in a Drama for Girl with a Pearl Earring.</li>
<li>Johansson was nominated for Teen Choice Awards for Choice Movie Actress: Sci-Fi/Fantasy and Choice Summer Movie Star Female, and People’s Choice Awards for Favorite Movie Actress, Favorite On-Screen Chemistry (shared with Jeremy Renner), and Favorite Face of Heroism.</li>
<li>After Candice Bergen, Drew Barrymore, and former cast member Tina Fey.</li>
<li>Created during the COVID-19 pandemic with closed theaters, it was a premium add-on that let Disney+ subscribers watch new content locked behind a paywall.</li>
</ul>Ordered List
Sometimes you don’t just want bullet points, you want items to be numbered. That’s where an ordered list comes in.
The only difference is that instead of <ul>, you use <ol>. The <li> tags stay exactly the same.
So let’s take the Notes section we wrote before and update it. We’ll just swap out <ul> for <ol>:
<h2>Notes</h2>
<hr />
<ol>
<li>Johansson was nominated for Best Actress in a Motion Picture Comedy or Musical for Lost in Translation and Best Actress in a Drama for Girl with a Pearl Earring.</li>
<li>Johansson was nominated for Teen Choice Awards for Choice Movie Actress: Sci-Fi/Fantasy and Choice Summer Movie Star Female, and People’s Choice Awards for Favorite Movie Actress, Favorite On-Screen Chemistry (shared with Jeremy Renner), and Favorite Face of Heroism.</li>
<li>After Candice Bergen, Drew Barrymore, and former cast member Tina Fey.</li>
<li>Created during the COVID-19 pandemic with closed theaters, it was a premium add-on that let Disney+ subscribers watch new content locked behind a paywall.</li>
</ol>Output
Assignment
Now it’s your turn to make the References section.
- Add a heading level 2 that says “References”
- Add a horizontal line under the heading
- Use an ordered list so the references are numbered
- Take just 3 references from the Wikipedia page (you don’t need them all)
Expected Output
Solution
<h2>References</h2>
<hr />
<ol>
<li>“Does Scarlett Johansson Remember Her Lines From The Most Famous Films?”. British Vogue. Retrieved August 15, 2023.</li>
<li>“Scarlett Johansson”. British Film Institute. Retrieved May 7, 2019.</li>
<li>“La monogamia es antinatural”. El País. February 9, 2006.</li>
</ol>Ordered list with alphabets
If you look at the Notes section on Wikipedia, you’ll notice the items are ordered with letters instead of numbers.
In HTML we can do the same thing. All we have to do is tell the <ol> element to use letters. And we do that with an attribute. Remember, attributes are how we give extra info to a tag.
Here the attribute is type="a".
Let’s make the list alphabetical on Notes.
<h2>Notes</h2>
<hr />
<ol type="a">
<li>Johansson was nominated for Best Actress in a Motion Picture Comedy or Musical for Lost in Translation and Best Actress in a Drama for Girl with a Pearl Earring.</li>
<li>Johansson was nominated for Teen Choice Awards for Choice Movie Actress: Sci-Fi/Fantasy and Choice Summer Movie Star Female, and People’s Choice Awards for Favorite Movie Actress, Favorite On-Screen Chemistry (shared with Jeremy Renner), and Favorite Face of Heroism.</li>
<li>After Candice Bergen, Drew Barrymore, and former cast member Tina Fey.</li>
<li>Created during the COVID-19 pandemic with closed theaters, it was a premium add-on that let Disney+ subscribers watch new content locked behind a paywall.</li>
</ol>
Assignment
Add one more list about Movies.
- Add a heading that says “Movies”
- Add a horizontal line under it
- Create an ordered list that uses uppercase letters (A, B, C)
- Put three of Scarlett Johansson’s movies in the list
Expected Output
Solution
<h2>Movies</h2>
<hr />
<ol type="A">
<li>Lost in Translation</li>
<li>Girl with a Pearl Earring</li>
<li>Lucy</li>
</ol>⬅️ Previous Lesson Next Lesson ➡️