HTML5 Elements of the List Nature

Basics of HTML 5 - Part 10

Foreword: In this part of the series, I discuss HTML5 elements of the list nature.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 10 of my series, Basics of HTML 5. In this part of the series, I discuss HTML5 elements of the list nature. I assume you have read the previous parts of the series before reaching here, as this is a continuation.

You must have made a list in your life before. You might have made a list of what you would buy in a shop or supermarket. Sometimes when you make a list, you order (arrange) the items to result in something like Item 1, Item 2, Item 3, etc. That is an ordered list. If you do not number the items you have an unordered list. In many cases each item of an unordered list begins with a bullet (hyphen). HTML has elements which enable you display such lists on your web page. In this part of the series, I show you how to code such elements and other related elements.

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 tag manes should be in lower case.

On the display (web page), you would have something like:

1. Geography
2. History
3. 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. The start and end tags of the UL element 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, such feature is best discussed today, under Cascaded Style Sheet (see later). 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, that feature is best treated today, under Cascaded Style Sheet (CSS). I intend to write a series on CSS, so just be patient.

Definition Lists
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, each with start and end tags. One of the elements 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 (one for each term). 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.

Illustration
The following code illustrates all what you have learned in this part of the series, so far. 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>

Again, the dl element has two other elements that form its content. These elements are the dt and dd elements. The dl element is a grouping element (see later). These three elements are double-tag elements.

Another Illustration
Try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>dl illustration</title>
</head>
<body>
    <dl>
        <dt>
            House
        </dt>
            <dd>
                A building with rooms
            </dd>
        <dt>
            Car
        </dt>
            <dd>
                A moving object with seats and four wheels
            </dd>
        <dt>
            Road
        </dt>
            <dd>
                A stretch on the ground that allows people and cars to move over.
            </dd>
    </dl>
</body>
</html>

Uses of the dl Element
A dl element can be used for a glossary consisting of terms and definitions. The dl tags enclose the dt and dd tags. The dt tag pair has the term as content. The dd tag pair has the definition as content. The above code illustrates this. The dl element can also be used for question and answers (Frequently Asked Questions - FAQ). It can be used for any list made up of name/value data. In this context, name is a term and value is a description (definition).

Questions and Answers
The following code segment shows how you can use it for questions and answers:

<dl>
    <dt>What is the name of the thing you are holding?</dt>
        <dd>It is a book.</dd>
    <dt>What kind of book is it?</dt>
        <dd>It is a text book</dd>
    <dt>What is the content of the book?</dt>
        <dd>The book talks about the Roman empire: the rise and fall of the Roman empire; democracy for some tine in the roman empire; the termination of democracy by Julius Caesar</dd>
</dl>

HTML elements in the dd Element
The dd element behaves like a paragraph element. However, you can have paragraph elements and other HTML elements in the dd element. The following code illustrates this:

<dl>
    <dt>Term One</dt>
         <dd>
             <p>
                    This is a paragraph.
             </p>
             <p>
                Another Paragraph
             </p>
         </dd>
    <dt>Term Two</dt>
         <dd>
             <p>
                    This is a paragraph.
             </p>
             <p>
                Another Paragraph
             </p>
         </dd>
</dl>

More than one dd Element for a dt Element
You can have more than one dd element corresponding to one dt element in a dl element. Consider the writing of a book for which there are two authors and one editor. The following dl element can be used to list these participants:

<dl>
    <dt>Authors</dt>
        <dd>John Smith</dd>
        <dd>Luke Brown</dd>
    <dt>Editor</dt>
        <dd>James Bond</dd>
</dl>

dd Element for Instructions
You can use the dd element for instructions as in the following code:

<dl>
    <dt>Step One</dt>
        <dd>Do all of these things.</dd>
    <dt>Step Two</dt>
        <dd>Do all of those things.</dd>
    <dt>Step Three</dt>
        <dd>Go over all what you have done.</dd>
</dl>

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 illustrations above, then you would start having the feeling of what HTML can do.

That is it for this part of the series. Time to take a break. We continue in the next part.

Chrys

Broad Network

Related Articles

HTML5 Elements of the List Nature

Basics of HTML 5 - Part 10

Introduction

Related Links

Comments