This tutorial is part of a web programming course for people who have no programming experience.
In the previous lesson we discussed some specific elements for structuring the content of a web page. We learned how to use p tags to add a paragraph of content. We used various 'h' elements to display headings in different sizes, such as h1, h2, and h3.
In this lesson, we'll discuss how to create a few different types of lists in an HTML document. But before we get started, I would like to say a little bit more about the content of a web page:
Ordered lists automatically display a number next to each item in the list, like so:
To create an ordered list, use an ol element (ol stands for 'ordered list'). In order to add an item to the list, you must nest an li element within the ol element. The text inside each li element will be displayed next the the number.
The following code sample shows the HTML code for creating a simple ordered list:
<ol> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ol>
Get used to seeing li elements! Because you'll find that lists are used in even the simplest of web pages. You'll find lists everywere if you start 'inspecting' the HTML elements on a page that you visit, and you can do this by using the web developer tools as demonstrated in the video. li stands for list item, which is a term you'll hear in many corners of the programming world. Lists (and the list items within) are used to help website visitors understand how the content is organized within a website. So as a web developer, you'll commonly use lists to display content and data.
An unordered list is very similar to a an ordered list. The difference is that instead of numbers appearing before each list item, a bullet point is displayed. To add an unordered list to a page, use a ul element, then nest li elements inside it, like so:
<ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul>
The HTML code sample above would look like this when viewed in a web browser (notice the bullet points, instead of numbers):
We have mentioned hierarchical data structures a few times in this course. We can use nested lists help people visualize/understand hierarchical data. For example, a book may be broken up into chapters, and each chapter may be broken up into sections. Imagine what the table of contents might look like for a book about web development:
Chapter 1 - HTML
- Intro to HTML
- All About HTML Elements
Chapter 2 - CSS
- Intro to CSS
- All About CSS Selectors
Lets start writing the HTML code for this table of contents by creating a list of the chapters, like so:
Now we'll add the sections that are in the first chapter. Pay close attention to the structure in the code sample below and note that the unordered list which displays the sections is nested within the li element for chapter 1.
After having the honest discussion about relationships (in the previous lesson), can you see how the following code sample, which is not correct, differs from the previous one?
These two code samples demonstrate the importance of indenting your code properly. Indenting your code properly helps you to understand the structure of the page, and the relationships between the elements that make up the HTML document. In the first code sample of the nested list, which was the correct way, the ul element is a child of the li element (for chapter 1). In the second sample, which shows the wrong way to create a nested list, the ul element is a sibling of the li element for the first chapter.NEXT LESSON: HTML Hyperlinks