Lesson 3
Lists and Tables
In this lesson, you will look at two important ways content can be structured in web pages: lists and tables.
Lists
Lists are common to anyone who has worked with word processing tools such as Microsoft Word: They are the bulleted and numbered lists that are used for capturing a sequence of points. HTML lists are very similar to these lists. In this section, I introduce the three types of list provided by HTML.
Unordered lists
Unordered lists are used to create the familiar set of bullet points seen in Word documents. In order to create an unordered list, a set of li elements is placed inside an ul element. li stands for “list item,” while ul stands for “unordered list.”
The following is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>This is the first point
<li>This is the second point
<li>This is the third point
</ul>
</body>
</html>If you save this in an HTML file and open it in Chrome, it will display like the example in Figure 3.1.
The li tag is self-closing, so I have omitted the ending tag. Obviously, this could have been included without affecting the display of the list.
Although unordered lists are simple, once they are combined with CSS, they can become very powerful. Whenever you see a horizontal list of navigation links at the top of a web page, there is a good chance ...
Get HTML5, JavaScript, and jQuery 24-Hour Trainer now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
