HTML 5 Lists
HTML5 Basics - Part 11
Forward: HTML has elements which enable you display such lists on your web page. In this part of the series, I show you how to use such elements.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Ordered Lists
The HTML element for an ordered list is the OL element. OL stands for Ordered List. Imagine you have a list of three school subjects: Geography, History, and English Language. Your ordered list would be as follows:
<ol>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ol>
The OL element consists of a number of another element called the LI element. LI stands for List. Each list item is actually the content of an LI element. The start and end tags for the OL element are required (must be present). The start and end tags of each LI element are also required (must be present). Remember, in HTML for any double tag element, the start and end tags are always required. The tag manes must be in lower case.
On the display (web page), you would have something like:
Geography
History
English Language
As you can see the list items are ordered (numbered).
Unordered List
These are lists, which are not numbered. In this case, on the display, each list item is preceded by a bullet (hyphen). For the above three subjects you would have the following code:
<ul>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ul>
The difference between this code and the one before is that instead of ‘ol’ you have ‘ul’, for the outermost tags. ul stands for Unordered List. Again, as with all HTML double tag elements, the start and end tags are required (must be present). On the display, for the above code, you would have something like
Geography
History
English Language
Note the bullet in front of each list item.
With ordered list it is possible to determine whether the numbers will 1, 2, 3, 4, etc or A, B, C, etc or i, ii, iii, iv, etc. and so on. However this topic is best treated today, under Cascaded Style Sheet. With unordered list, it is possible to determine the type of bullets you want; it is possible to determine whether your bullets will be square dots, round dots, small circles, etc. Again, this topic is best treated today, under Cascaded Style Sheet (CSS). I intend to write a series on CSS, so just be patient.
You may have a list, which is made up of terms with their descriptions. On the display you may have something like:
Term One
description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one
Term Two
description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two
Term Three
description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three
The content of the definition list element consists of two other elements in pairs. One element of the pair takes care of the definition term; the other takes care of the definition description. The tag name of the Definition List element is, ‘dl’; that for the Definition Term is ‘dt’; and that for the Definition Description is ‘dd’. Without content, this is how you would have the DL element:
<dl>
<dt>
</dt>
<dd>
</dd>
<dt>
</dt>
<dd>
</dd>
</dl>
The above code should have two terms with two corresponding descriptions. On the display, by default, the description is indented to the right relative to the term. These three elements are shown in code in the illustration below.
The following code illustrates all what we have learned in this part of the series. You can save the code as an HTML file and then open (double click) it in a browser. The code ends with the “</html>” tag.
<!DOCTYPE HTML>
<html>
<head>
<title>
Products
</title>
</head>
<body>
<h3>Ordered List of Subjects</h3>
<ol>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ol>
<h3>Unordered List of Subjects</h3>
<ul>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ul>
<h3>Example of a Definition List</h3>
<dl>
<dt>
Term One
</dt>
<dd>
Description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one description of term one
</dd>
<dt>
Term Two
</dt>
<dd>
Description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two description of term two
</dd>
<dt>
Term Three
</dt>
<dd>
Description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three description of term three
</dd>
</dl>
</body>
</html>
More on List Content
The li, dt or dd content must not only be text. It can be other HTML elements. It can be a hyperlink, for example. These three elements can have attributes (in the start tag). However, you do not always need the attributes, so I will not discus them in this series.
Wow, the tutorials are beginning to yield results. If you have tried the code in the illustration above, then you would start having the feeling of what HTML can do.
We can take a break here. We continue on the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT