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
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:
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:
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.
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:
and the display will be:
The different possible values for the type attribute are:
decimal Decimal numbers
lower-alpha Lowercase latin alphabet
upper-alpha Uppercase latin alphabet
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numeral
This is for the start ordering number. So, if the ol start tag of the above list is
the display will be,
The value of the start attribute is 4; the numbering started from 4.
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:
The display should be:
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:
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
- 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, 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:
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>
<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>
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.
Related LinksBasics of HTML 5
Basics of ECMAScript
HTML DOM Basics
Text Elements in HTML
Microsyntax Dates and Times in HTML
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course