Not only does HTML allow you to have multimedia elements on your page, it also encourages you to format text in interesting ways. Unlike traditional media that is restricted based on its medium, a web page is not restricted in what it can do, where it can get its information from, or how it can display that information. This means that becoming an expert in the way that text is displayed whether the medium is a graph, chart, button, paragraph, or table becomes extremely important in online publishing.
For a video explanation of lists, see:
Formatting with Lists
When formatting text into lists, HTML gives you a choice of two list tags: the ordered list(<ol>) or the unordered list (<ul>). The ordered list lets you organize your list items (<li>) into numerical or alphanumeric order. The unordered list, on the other hand, will just use bullet points or another decorative element to mark your list items. Here’s an overview of how to make the best use of ordered and unordered lists.
The ordered list (<ol>) Tag
The <ol> tag lets you numerically organize and prioritize items in your list. Each list item is enclosed inside an opening and closing <li> tag. Below is an example of a list of fruits inside your HTML page.
<!DOCTYPE html>
<html>
<head>
<title>List of fruits</title>
</head>
<body>
<main>
<h1>Here is my list of fruits</h1>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
</ol>
</main>
</body>
</html>Opening the above file in a web browser will show a page with the following text:
Here is my list of fruits
- Apple
- Banana
- Orange
- Grape
- Strawberry
- Pear
One of the interesting things about the ordered list is that you can change the formatting attribute of the list by adding a type property to the <ol> tag. Below is the same code as above, except this time the list will show roman numerals.
<!DOCTYPE html>
<html>
<head>
<title>List of fruits</title>
</head>
<body>
<main>
<h1>Here is my list of fruits</h1>
<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
</ol>
</main>
</body>
</html>The new roman numeral formatted list should look similar to the following:
Here is my list of fruits
- Apple
- Banana
- Orange
- Grape
- Strawberry
- Pear
You can also use values for type="a", type="A", or type="i" to get the following list formats:
Here is my list of fruits
- Apple
- Banana
- Orange
- Grape
- Strawberry
- Pear
Here is my list of fruits
- Apple
- Banana
- Orange
- Grape
- Strawberry
- Pear
Here is my list of fruits
- Apple
- Banana
- Orange
- Grape
- Strawberry
- Pear
Unordered and multi-ordered Lists
The unordered list creates bullet points. It’s also possible to use other decorative elements besides bullet points to organize the items in your unordered list. Unlike the ordered list, it doesn’t have any special attributes that directly change its style or the way it looks on the page. It is possible to add inline styles to it to change its appearance though. Another feature of the unordered list, like all elements in HTML, is its ability to hold other elements inside it. For example, let’s start with an unordered list of famous movie directors.
<!DOCTYPE html>
<html>
<head>
<title>Movie directors</title>
</head>
<body>
<main>
<h1>Famous movie directors in Hollywood</h1>
<ul>
<li>Christopher Nolan</li>
<li>Guy Ritchie</li>
<li>James Cameron</li>
</ul>
</main>
</body>
</html>We can enhance the simple unordered list above by linking to each director’s Wikipedia page.
<!DOCTYPE html>
<html>
<head>
<title>Movie directors</title>
</head>
<body>
<main>
<h1>Famous movie directors in Hollywood</h1>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Christopher_Nolan">Christopher Nolan</a></li>
<li><a href="https://en.wikipedia.org/wiki/Guy_Ritchie">Guy Ritchie</a></li>
<li><a href="https://en.wikipedia.org/wiki/James_Cameron">James Cameron</a></li>
</ul>
</main>
</body>
</html>This will show a page with a list of directors linked to their Wikipedia page like below.
Famous movie directors in Hollywood
Now what if you also wanted to create a list of some of their top movies underneath their name? And you wanted to rank them by your favorites? Well, with HTML you have even more powerful formatting abilities than with a Word Processor, so you can easily add a second ordered list inside of the unordered list. Look carefully at how it’s done in the HTML code below.
<!DOCTYPE html>
<html>
<head>
<title>Movie directors</title>
</head>
<body>
<main>
<h1>Famous movie directors in Hollywood</h1>
<ul style="list-style-type: none;">
<li>
<a href="https://en.wikipedia.org/wiki/Christopher_Nolan">Christopher Nolan</a>
<ol type="I">
<li>Batman: The Dark Knight</li>
<li>Inception</li>
<li>Batman: The Dark Knight Rises</li>
</ol>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Guy_Ritchie">Guy Ritchie</a>
<ol type="I">
<li>Sherlock Holmes</li>
<li>Revolver</li>
</ol>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/James_Cameron">James Cameron</a>
<ol type="I">
<li>Avatar</li>
<li>The Terminator</li>
</ol>
</li>
</ul>
</main>
</body>
</html>Displaying the above code inside an HTML page in the browser will show the text formatted like below. Note that it’s possible to remove the bullets from the unordered list by adding the attribute style="list-style-type: none;" to the unordered list tag, as already done in the code above. This is actually a custom CSS style that’s commonly applied to unordered lists. With this custom style, the bullets in the unordered list will be gone, like below.
Famous movie directors in Hollywood
- Christopher Nolan
- Batman: The Dark Knight
- The Prestige
- Batman: The Dark Knight Rises
- Inception
- Guy Ritchie
- Sherlock Holmes
- Revolver
- James Cameron
- Avatar
- The Terminator
This completes our list of directors and their movies. While lists are a good way to organize information, sometimes it’s necessary to go to a different level of organization. For more complex data that depends on specific properties, it’s a better idea to use tables. Read on about HTML tables in this next article. Be warned though, HTML tables are only for those who have truly mastered the basics of HTML.