Module 8: HTML Lists
Topics in
this Module
Lists in HTML
In HTML, you can create both ordered lists and unordered lists using the <ol> and <ul> elements, respectively. These elements are used to structure content into lists, and they can contain list items specified with the <li> element. Here's an explanation of these elements, along with their attributes and values, along with examples for each:
Unordered Lists (Using <ul>)
An unordered list is used to create a list of items where the order does not matter, and typically, list items are displayed with bullet points.
Attributes for <ul>:
type:
This attribute specifies the type of bullet point used for list items. The possible values are:
- disc (default): A filled circle.
- circle: An unfilled circle.
- square: A filled square.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can also specify the type attribute to change the bullet style:
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered Lists (Using <ol>)
An ordered list is used to create a list of items where the order matters, and list items are typically displayed with numbers or letters.
Attributes for <ol>:
type:
This attribute specifies the type of numbering used for list items. The possible values are:
- 1 (default): Arabic numerals (1, 2, 3, ...).
- A: Uppercase letters (A, B, C, ...).
- a: Lowercase letters (a, b, c, ...).
- I: Uppercase Roman numerals (I, II, III, ...).
- i: Lowercase Roman numerals (i, ii, iii, ...).
start:
This attribute specifies the starting value for the list. It is useful when you want to begin the list at a number other than 1.
Example:
<ol type="A">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
You can also use the start attribute:
<ol type="i" start="5">
<li>Item v</li>
<li>Item vi</li>
<li>Item vii</li>
</ol>
List Items (Using <li>)
The <li> element is used within both <ul> and <ol> elements to define individual list items.
Attributes for <li>:
The <li> element does not have any specific attributes, but it can contain various HTML elements and attributes to structure the content within list items.
Example:
<ul>
<li><a href="#">Link 1</a></li>
<li><strong>Item 2</strong></li>
<li><em>Item 3</em></li>
</ul>
In the example above, each list item contains different HTML elements, such as links, strong text, and emphasized text, to format the content within the list items.
These HTML list elements (<ul>, <ol>, and <li>) are essential for organizing and presenting content in a structured manner on web pages. You can use their attributes and values to customize the appearance and behavior of lists as needed for your specific design and content requirements.
Nested Lists
In HTML, you can create nested lists of various kinds, including nested unordered lists (ul), nested ordered lists (ol), and combinations of both. Nested lists allow you to organize content hierarchically, making it easier to represent structured information. Here, I'll explain how to create nested lists and provide multiple examples for each type.
Nested Unordered Lists (ul)
You can nest unordered lists by placing one <ul> element inside another <li> element. Each nested <ul> represents a sub-list within the parent list item. Here's an example:
<ul>
<li>Main Item 1
<ul>
<li>Sub-item 1.1</li>
<li>Sub-item 1.2</li>
</ul>
</li>
<li>Main Item 2
<ul>
<li>Sub-item 2.1</li>
<li>Sub-item 2.2</li>
</ul>
</li>
</ul>
In the example above, you have a main unordered list with two list items, each containing a nested unordered list with two sub-items.
Here is what that would look like in your web browser:
Nested Ordered Lists (ol)
Creating nested ordered lists is similar to nested unordered lists. You nest <ol> elements within <li> elements. Here's an example:
<ol>
<li>Main Item A
<ol>
<li>Sub-item A.1</li>
<li>Sub-item A.2</li>
</ol>
</li>
<li>Main Item B
<ol>
<li>Sub-item B.1</li>
<li>Sub-item B.2</li>
</ol>
</li>
</ol>
In this example, you have a main ordered list with two list items, each containing a nested ordered list with two sub-items.
Here is what that would look like in your web browser:
Nested Combination of Lists (ul and ol)
You can also create nested combinations of ordered and unordered lists. Here's an example:
<ul>
<li>Main Item X
<ol>
<li>Sub-item X.1</li>
<li>Sub-item X.2
<ul>
<li>Sub-sub-item X.2.1</li>
<li>Sub-sub-item X.2.2</li>
</ul>
</li>
</ol>
</li>
<li>Main Item Y
<ul>
<li>Sub-item Y.1</li>
<li>Sub-item Y.2</li>
</ul>
</li>
</ul>
In this example, you have a main unordered list with two list items. The first list item contains a nested ordered list with one of its items containing a nested unordered list.
Here is how the browser would render that code:
Remember that you can style nested lists using CSS to control their appearance, such as indentation and bullet/number styles, to ensure they are visually distinguishable. Nested lists are a powerful way to represent structured information on your web pages and enhance the readability of your content.
Videos for Module 8: HTML Lists
There are no videos yet this term for this Module. Check back soon!
Activities for this Module
S8 - Building a List
Lists are really valuable in HTML. They allow us to easily organize and present information in an easy-to-read format. They come in two basic types: Ordered and unordered. An ordered list is a group of items where each item is designated by something that indicates what order the items are in. The list type could be one of several possible options, designated by the "type" attribute, which goes in the main list tag. Type can be one of the following options:
type="1" The list items will be numbered with numbers (this is the default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Unordered lists used what people commonly refer to as "bullets" to designate each item. Instead of telling us what order the items are supposed to be in, a bullet just says "this is an item". It's appropriate to use an unordered list any time that the order of the items isn't significant, because when we use an ordered list the numbers or letters are part of what we are trying to communicate.
Surrounding each list is a list tag, and this is what decides what kind of list it is. An unordered list (UL) tag looks like this:
<ul> ... </ul>An ordered list (OL) tag looks like this:
<ol> ... </ol>Inside each set of list tags, we can have one or more "list item" tags (LI). Those look like this, regardless of whether they are inside an ordered list or an unordered list:
<li>This is a list item</li>Don't forget: List tags and list item tags all require opening and closing tags.
So, putting it all together, this is what an unordered list looks like:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>An ordered list with numbers looks like this:
<ol>
<li>Wash hair</li>
<li>Condition hair</li>
<li>Dry hair</li>
</ol>You can change the numbers to uppercase letters by adding a "type" attribute, like this:
<ol type="A">
<li>Wash hair</li>
<li>Condition hair</li>
<li>Dry hair</li>
</ol>Let's build a complex list together:
Start with the following code inside the existing html in Liveweave:
<h1>Grocery List</h1>Beneath that, follow the instructions below:
1. Start by creating the main unordered list :
- Open the `<ul>` tag to start your unordered list.
2. Add the first list item for "Laundry" :
- Within the main unordered list, add an `<li>` tag with the text "Laundry".
3. Add the second list item for "Household repairs" :
- After the "Laundry" list item, add another `<li>` tag with the text "Household repairs".
4. Add the third list item for "Errands (In This Order)" :
- After the "Household repairs" list item, add another `<li>` tag with the text "Errands (In This Order)".
5. Add the fourth list item for "Homework" :
- After the "Errands (In This Order)" list item, add another `<li>` tag with the text "Homework".
6. Close the main unordered list :
- Close the `<ul>` tag to complete the main list structure.
Adding Nested Items
7. Create a nested unordered list for "Household repairs" :
- Inside the list item for "Household repairs", open another `<ul>` tag.
8. Add list items inside the nested unordered list for "Household repairs" :
- Inside this nested unordered list, add `<li>` tags for "Kitchen Sink", "Screen Door", and "Toilet Seat".
- Close this nested unordered list with a `</ul>` tag.
9. Create a nested ordered list for "Errands (In This Order)" :
- Inside the list item for "Errands (In This Order)", open an `<ol>` tag.
10. Add list items inside the nested ordered list for "Errands (In This Order)" :
- Inside this nested ordered list, add `<li>` tags for "Car Wash", "Bank", and "Grocery Store".
11. Create another nested unordered list inside the "Grocery Store" list item :
- Inside the list item for "Grocery Store", open another `<ul>` tag.
12. Add list items inside the nested unordered list for "Grocery Store" :
- Inside this nested unordered list, add `<li>` tags for "Apples", "Bread", and "Milk".
- Close this nested unordered list with a `</ul>` tag.
13. Close the nested ordered list for "Errands (In This Order)" :
- Close the `<ol>` tag for the ordered list.
Here is a more complete picture of how the finished list should look.
- Main Unordered List
- Laundry
- Household repairs
- Nested Unordered List
- Kitchen Sink
- Screen Door
- Toilet Seat
- Errands (In This Order)
- Nested Ordered List
- Car Wash
- Bank
- Grocery Store
- Nested Unordered List
- Apples
- Bread
- Milk
- Homework
Remember to always close your ol, ul and li tags and keep your code properly indented for better readability!
When you are done, post a screenshot of your list results and answer the questions for this forum.
Post the following:
- You can post screenshots of your code or the results of your code when it is run.
- Something you learned from this.
- Something you struggled with or found difficult.
Please return to this discussion throughout the module, and see if you can either learn from your classmates' work or help them develop their understanding. While I don't count posts, I expect each of you to post your Sandbox Challenge and reply to about 1 classmate per module.
A8 - Formatted Grocery List
The Challenge
This week, your challenge is to create a grocery list using HTML lists - both ordered and unordered. The image below is what you will be re-creating. If you need the assignment in alternative text, please contact the instructor.
Grading / Success Criteria
To earn credit for this assignment, it must:
- Show exactly the same bulleted and numbered list structure as the image above.
- Have some basic CSS formatting to enhance the readability of the list.
- Use at least one instance of nested tag selection for the CSS.