All the list types in HTML5 are closely related. The simplest and most common kind of list is an unordered list. You can also use ordered lists and nested lists in HTML.
Look at an unordered list
Look at the simple page. In addition to a couple of headers, it has a list of information.
This list of browsers has some interesting visual characteristics:
The items are indented. There's some extra space between the left margin and the beginning of each list item.
The list elements have bullets. That little dot in front of each item is a bullet. Bullets are commonly used in unordered lists like this one.
Each item begins a new line. When a list item is displayed, it's shown on a new line.
These characteristics help you see that you have a list, but they're just default behaviors. Defining something as a list doesn't force it to look a particular way; the defaults just help you see that these items are indeed part of a list.
Remember the core idea of HTML here. You aren't really describing how things look, but what they mean. You can change the appearance later when you figure out CSS, so don't get too tied up in the particular appearance of things. For now, just recognize that HTML can build lists, and make sure you know how to use the various types.
How to build an unordered list
Lists are made with two kinds of tags. One tag surrounds the entire list and indicates the general type of list. This first example demonstrates an unordered list, which is surrounded by the pair.
Note: Indenting all the code inside the
- set is common. The unordered list can go in the main body.
- (list item) and a tag. Normally, each pair goes on its own line of the source code, although you can make a list item as long as you want.
Inside the
You can change the bullet to all kinds of other images, including circles, squares, and even custom images.
The code for the unordered list is pretty straightforward:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>basicUL.html</title> </head> <body> <h1>Basic Lists</h1> <h2 id="tab3" >Common web Browsers</h2> <ul> <li>Firefox</li> <li>Chrome</li> <li>Internet Explorer</li> <li>Opera</li> <li>Safari</li> </ul> </body> </html>