Module 3: HTML Lists

Overview

This lesson will introduce students to HTML lists. The students will work through two short lessons that cover the creation of different types of lists, unordered lists and ordered lists. The lists that are created in this module will eventually become the basis for the navigation of their web portfolio.

Lesson 1: Lists

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson provides a good opportunity to stress that most tags in HTML are container tags, and be sure that students understand this concept. All lists are containers. They have opening and closing tags. Inside these containers, there are multiple list items. List items are also containers: They contain text. It's also important for students to understand that some element are dependent on others. For example, even in HTML5, which is generally pretty forgiving, it is not permissible to have a list item that isn't part of a list.
• This lesson also provides another good opportunity to stress the importance of using indentation in the code. Indenting <li> tags slightly more than <ol> tags makes it easy to see which elements are components of which other elements.

Example Output

When this lesson is complete, students will have modified their index.html file by changing some content to unordered lists.

Lesson 2: Creating a Navigation Menu

• Estimated time required: 20 - 30 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• Students may have a hard time making the connection between the list of words they're creating and a navigation menu like those they typically see on websites. This may be an opportunity to reinforce or revisit concepts taught in Module 2 Lesson 3, specifically the strategy of asking "what is this?" in order to decide which HTML element best represents the content. A navigation menu is a list of web pages. Therefore, it should be coded as a list.
• This lesson also provides a good opportunity to remind students of the difference between HTML and CSS. In the current unit, students are simply creating content and structure. In the next unit, they'll learn about CSS, which will enable them to transform their list of web pages so that it looks more like they expect a navigation menu to look.

Example Output

When this lesson is complete, students will have added an unordered list of pages to their index.html file, which ultimately will become the navigation menu.