Lists for Grouping HTML Elements

Grouping Content – Part 2

Foreword: In this part of the series, I talk about HTML list elements in their default mode, used for grouping smaller elements to form a list.

By: Chrysanthus Date Published: 24 Jun 2015

Introduction

This is part 2 of my series, Grouping Content. In this part of the series, I talk about HTML list elements in their default mode, used for grouping smaller elements to form a list. You should have read the previous part of the series before reaching here, as this is a continuation. You should already know that a line of text could be made up of a combination of text-level semantic elements. Such a line can be an item in a list. A list is made up of lines (items) with a common characteristic.

HTML5 has a set of attributes called, ARIA Role Attributes. These attributes have default values. In this tutorial, the default values are assumed; that is why I said above that I would talk about the list elements in their default modes. I will address the issue of ARIA Role Attributes in some other series.

The ol Element
ol stands for ordered list. The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. Each item is in an element called the li element. It is the li element that has the line of text made up of text-level semantic elements. So, the ol element groups the li elements, each of which groups the text-level semantic elements. An example of an ol code is:

<ol>
    <li>Geography</li>
    <li>History</li>
    <li>English Language</li>
</ol>

You can see the ol element tags enclosing the li element tags. The ol element is a double tag element. The li element is a double tag element but you can omit the end tag of the li element, if the li element is immediately followed by another li element or if there is no more content in the parent element. I suggest you always type the end tag. The above code will produce the following display on the browser:

1.Geography
2.History
3.English Language

You can see that the list is ordered by its numbering. That is the default numbering scheme. If you want a different numbering scheme, you have to use the type attribute. The ol element has three attributes, which are: type, start and reverse.

type Attribute
If you want the numbering of the above list to be in lower roman numerals, then the start tag of the ol element should be:

    <ol type=lower-roman>

and the display will be:

i.Geography
i.History
iii.English Language

The different possible values for the type attribute are:

Value         Description
decimal         Decimal numbers
lower-alpha     Lowercase latin alphabet
upper-alpha     Uppercase latin alphabet
lower-roman     Lowercase roman numerals
upper-roman     Uppercase roman numeral

start Attribute
This is for the start ordering number. So, if the ol start tag of the above list is

    <ol start=4>

the display will be,

4.Geography
5.History
6.English Language

The value of the start attribute is 4; the numbering started from 4.

reversed Attribute
This attribute is for reversed numbering, counting downward. The reversed attribute is a Boolean attribute; its presence means reverse; its absence means no-reverse. Try the following code:

<ol reversed>
    <li>Geography</li>
    <li>History</li>
    <li>English Language</li>
</ol>

The display should be:

3.Geography
2.History
1.English Language

The ul Element
This is a list, which is 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 listed item. You can use CSS to change the bullet style (see later).

The dl Element
The dl element, is a kind of list element, where the list items exists in sub groups. Each sub group is called a name-value group. The element for the name component of the group is dt. The element for the value component of the group is dd. This leads to something like:

    <dl>

        <dt></dt>
        <dd></dd>

        <dt></dt>
        <dd></dd>
        <dd></dd>

        <dt></dt>
        <dt></dt>
        <dd></dd>

    </dl>

As you can see, each group consists of at least one dt element and at least one dd element. The dl element is a double tag element, which encloses (groups) the dt and dd elements. A dt element's end tag may be omitted if the dt element is immediately followed by another dt element or a dd element. A dd element's end tag may be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element. Well, I suggest you get into the habit of not omitting any end tag.

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data. For terms and definitions, a term is in a dt element and a definition is in a dd element. For metadata topics and values a topic is in a dt element and a value is in a dd element. For questions and answers, a question is in a dt element and an answer is in a dd element.

The following example shows the dl element used to give a set of instructions.

<p>Determine the winning points as follows (use the
first matching case):</p>
<dl>
<dt> If you have exactly ten gold coins </dt>
<dd> You get ten winning points </dd>
<dt> If you have one or more gold coins, and you have one or more silver coins </dt>
<dd> You get two winning points </dd>
<dt> If you have one or more silver coins </dt>
<dd> You get one winning point </dd>
<dt> Otherwise </dt>
<dd> You get no winning points </dd>
</dl>

A dd element can have zero, one or more p elements. If the text for a dd element is short it does not need to be in a paragraph. If it is long, it should be in paragraphs.

Note: the list elements are block level elements, with line break element above and below, and would occupy the whole width of the containing element.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Lists for Grouping HTML Elements

Grouping Content – Part 2

Introduction

Related Links

Comments