From time to time, you may want to create a numbered list on your web page, or perhaps a list where each item on a list begins with a bullet point. This chapter of the HTML tutorial series shows you how you can do this. We will also deal with another type of list called definition lists.
For those who have just arrived at this article from outside thesitewizard.com, please note that this is chapter 3 of the HTML tutorial. I shall assume that you are already familiar with the things I covered in the earlier chapters, so you may want to start at the beginning if you aren't already conversant with the earlier material. However, if you are completely new to creating a website, it may be best to read How to Make / Create Your Own Website before even going to chapter 1 of the HTML tutorial. There are more things to creating a site than just the web design aspects.
Lists of items that have a bullet point (or black dot) preceding each item on the list are known as "unordered lists" in HTML. You can see an example of an unordered list by scrolling down. The "New Pages" and "Related Pages" sections near the bottom of this page use unordered lists.
To begin an unordered list, use the "<ul>" tag. Then, for every item in the list,
put your text (or picture) between "<li>" and "</li>". When you've
completed every item in your list, close off the list with a "</ul>" tag.
Here's an example to make things clearer.
Although I used plain text for each item in the unordered list above, I could have also put pictures for each of the items if I wanted. (No, you didn't miss anything. We haven't got around to learning how to put images on your page yet. All I'm saying here is that you're not restricted to using text for each item in the list.)
As you've probably guessed, the "ul" in the "<ul>" tag stands for "unordered
list" while the "li" in "<li>" stands for "list item".
The "<li>" tag is a block tag. You can include multiple paragraph tags between the
opening "<li>" tag and its closing "</li>" tag should your items require it.
Like most other things on your web page, the shape of the bullets on your page can be changed using Cascading Style Sheets (CSS), which will be taught later in this series. In fact, the appearance of the entire unordered list can be so radically modified using CSS that it no longer even looks like the default bullet point list. For example, the navigation menu generated by the CSS Navigation Menu Bar Wizard actually uses an unordered list for the button menu. It's still a list of links at its heart, of course. The button-like appearance is just a visual gimmick.
Numbered lists are referred to as "ordered lists" in HTML parlance. Ordered lists use
"<ol>" and "</ol>" instead of the "<ul></ul>" of
unordered lists. As before, each item in the ordered list is sandwiched between "<li>" and
"</li>" tags. That is, the only difference between an ordered and an unordered list where the HTML code
is concerned are the opening and closing tags for the entire list.
To make sure there's no misunderstanding, let me convert my previous list of "favourite sites" (or "favorite sites" in US English) to an ordered list. The converted code is as follows:
As you can see, all I needed to do to change an unordered list to an ordered one is to switch from "ul" to "ol"
for the opening and closing tags. The "<li>" tags remain the same.
Web browsers automatically number each item in an ordered list, relieving you of the burden and tedium of manually numbering or renumbering your items. Like many things in HTML, the type of numbering used can be changed using CSS. That is, you are not restricted to using numeric digits for your lists; CSS lets you use Roman numerals as well as letters of the alphabet. You can also set your list to begin at a number other than "1", and even randomly assign numbers to each item in your list (although that sort of defeats the purpose of having an ordered list). However, as mentioned earlier, CSS will be taught in a later chapter, since it depends on a knowledge of HTML.
HTML supports another type of list which it calls definition lists. Although this type of list is probably less used than ordered and unordered lists, we shall deal with it here, for the sake of completeness.
Let's begin by looking at some HTML code:
Definition lists are meant for situations where you need to pair up a term with its definition. Hence you might use it for things like a glossary. Its use, however, is not strictly restricted to definitions. The HTML standard gives examples where the "term" portion states something that is further elaborated in the "definition" section. An example of this can be seen on thefreecountry.com's pages, such as on its Free Hard Disk Backup and Restore Utilities page. The bulk of the page uses a definition list, where the name of the software is given as the "term" and my description and opinions (if any) of the program is given as the "definition".
As you can see from the above example code, you start off a definition lists with a
"<dl>" tag. For each term you want to define, enclose the term in a
"<dt></dt>" tag pair. The definition of that term is enclosed in
a "<dd></dd>" tag pair. You can even list multiple terms that share
a common definition. Finally, when you've finished with your list of definitions, close it off
with "</dl>".
Like the "<li>" tag, the "<dd>" tag is a block tag. You can
include multiple paragraphs within the definition if you wish. (The "<dt>" tag, however,
is an inline tag.)
At the time I write this, I have not specially styled (ie, changed the appearance of) the definition lists used on thefreecountry.com's internal pages, such as the free hard disk backup page mentioned above, so if you want to see how web browsers render such lists by default, you can take a look at that page (or any other internal page on thefreecountry.com, for that matter).
In the next chapter, we will learn how to insert images (pictures) into your web page.
Note: I'm still in the process of writing the next chapter. If you want to be informed when it is ready, please subscribe to thesitewizard.com's news feed. Don't worry. It's free, and no email address (or any personal information) is required. Only your web browser is needed. (Click here to find out more.) Alternatively, if you prefer to do things manually, just check the "What's New" column of the thesitewizard.com's main page from time to time. I announce all new articles on that page.
Copyright © 2011-2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » HTML Tutorials »
Other articles on: HTML, CSS, Getting Started
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create Automatically Numbered Lists, Bullet Point Lists and Definition Lists in HTML
