loading...

HTML5 – HTML5 Lists: Numbered, Bulleted, and Definition Lists

Let’s discuss the six list creation tags for HTML5 next, which allow developers to create different types of list-based content using a numbered (or even a lettered) list, a bulleted list, or a definition list. These more specialized text-related tags allow HTML5 developers to define their document list content with a good deal of flexibility using only a half-dozen tags. These list tags are inherently semantic, as they clearly define lists and order, as well as list descriptions and terms.

In this chapter, you learn about list tags, which implement list-based content in HTML, as all of the tags are supported in HTML 4.01, and some in earlier versions of HTML.

These include a list <li> tag, an ordered list <ol> tag, the unordered list <ul> tag, and the description list <dl> tag, description term <dt> tag, and the description data <dd> tag.

HTML5 List Tags: Ordered Information

This chapter covers the six text-related “list tags” supported in HTML5. They create ordered collections of information, much like an array in JavaScript programming, but styled as a list or data definition collection, similar to what you experience with basic JSON definitions, such as the ones covered in JSON Quick Syntax Reference (Apress, 2016). All of these tags are supported in legacy versions of HTML; a few of the tags even go all the way back to HTML 2.0, which I’ll point out, where applicable. These list tags are optimally used as child tags of the semantic tags covered back in Chapter 10, so that list-based content is encapsulated (wrapped) in standardized semantic containers, so that the search engine robots (the indexing and ranking algorithms) optimally implement Web 3.0, which is the future of the Internet: Semantic Search. Table 13-1 shows the six list tags supported in HTML5.

Table 13-1. Six HTML Content Publishing Tags

for Creating Lists

HTML5 List Creation Tags

HTML5 List Creation Tag Usage

li

Defines a list item

ol

Defines an ordered list

ul

Defines an unordered list

dl

Defines a definition list

dt

Defines a definition term

dd

Defines the definition data

Let’s take a look at these list creation tags in logical sections, in the same way that they are arranged in this table, starting with “core” HTML5 list tags <li>, <ul>, and <ol>. These define important content lists or collections to the HTML rendering engines. For this reason, these list tags should also be considered to be classified as semantic search tags.

HTML5 Stylized Lists: Ordered and Bulleted Lists

The list tags that go back the farthest in HTML support are the most often used: the list item <li> tag, which specifies each item in a list, and its parent <ul> or <ol> tags, which are used to specify unordered (bulleted) lists, or ordered (numbered/lettered/Roman Numeral) lists. These tags have enough parameters that you can create a wide array of professionally styled lists, without having

to resort to any custom CSS3 stylesheet code.

The LI Tag: The Core List Tag Used to Define Each List Item

The <li> tag defines

each “member” of the list with a starting <li> and an ending </li> tag around the word, sentence, or text block of the list member. The proper way to use the <li> tag is as a child element of a <ul> or <ol> parent container, however, browsers are very forgiving in how they render <li> elements, and render them without a parent <ol> or <ul> container. If you use an HTML “validator,” to validate your markup, it won’t be considered “valid” HTML markup, just so you know. Therefore, I am going to show you the correct way to use <li>.

Let’s use a semantic <section> tag to create two section areas of bullets containing types of cars. We’ll expand upon the semantic tags example in Chapter 10, and add bulleted lists (using the default unordered list <ul> parent tag). This is accomplished using the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ul>
    <li>Ferrari</li>              
    <li>Lamborghini</li>              
    <li>Porsche</li>              
    <li>Bugatti</li>              
   </ul>
 </section>
 <section >
  <h1>American Domestic Car Brand List</h1>
   <ul>
    <li>Cadillac</li>              
    <li>Buick</li>              
    <li>Jeep</li>              
    <li>Lincoln</li>              
   </ul>
 </section></body></html>                                                                              

Next, let’s take a look at how the unordered list <ul> tag allows you to configure the child <li> members that it contains.

The UL Tag: Defining and Styling an Unordered List Container

The <ul> tag is used as a parent tag list container to define the list member content using symbols for what are commonly called “bullets.” This tag has two parameters that are not supported in HTML5 due to the trend toward using CSS for styling and tag markup for content definition. I include them in Table 13-2 for those of you working on legacy HTML projects.

Table 13-2. Two HTML Parameters for

Creating Unordered Lists

Unordered List Parameter

Unordered List Parameter Usage

type

Defines bullet type (disc, circle, square)

compact

Defines the list to be rendered: smaller

Let’s look at how you configure the <ul> tag.

Let’s use the type parameter to change a standard disc bullet to a square bullet for the first section’s list, and the bullet to use the hollow bullet (called a circle) for the second section’s list. This is accomplished in the following HTML markup (in HTML5 it is accomplished using CSS3):

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ul type="square">              
    <li>Ferrari</li>
    <li>Lamborghini</li>
    <li>Porsche</li>
    <li>Bugatti</li>
   </ul>              
 </section>
 <section >
  <h1>American Domestic Car Brand List</h1>
   <ul type="circle">              
    <li>Cadillac</li>
    <li>Buick</li>
    <li>Jeep</li>
    <li>Lincoln</li>
   </ul>              
 </section>
</body>
</html>

Note that most, if

not all, of the HTML5 browsers should still respect the type parameter, implementing a correct bullet type even though the parameter is no longer supported in HTML5.

Next let’s take a look at ordered list <ol> parent tags.

The OL Tag: Defining and Styling an Ordered List Container

The <ol> tag defines list-based content that is numbered, uses Roman Numerals, or uses alphabetic letter indicators to determine the order of the members in an ordered list. The <ol> tag has four parameters (one of which, compact, is no longer supported in HTML5 due to the trend toward using CSS3 for styling and using tag markup solely for content definition). The type parameter for the <ol> tag

is supported in HTML5, as are the reversed and the start parameters, which are generally used with a numeric ordering type, set using a type parameter. I include these parameters in Table 13-3 for those of you working on legacy HTML markup projects.

Table 13-3. Four HTML5 Parameters for Creating Ordered Lists

Ordered List Parameter

Ordered List Parameter Usage

type

Defines ordering type (1, A, a, I, or i)

reversed

Defines numbering direction (backward)

start

Defines the start number (for number type)

compact

Defines the List to be rendered: smaller

Let’s take a look at how we can configure this <ol> tag, substituting it for the <ul> tag used in a previous example.

To use numbered ordering starting with the number four and counting backward, you can specify the following parameters for the first section’s list:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ol type="1" start="4" reversed>              
    <li>Ferrari</li>
    <li>Lamborghini</li>
    <li>Porsche</li>
    <li>Bugatti</li>
   </ol>              
 </section>
 <section >
  <h1>American Domestic Car Brand List</h1>
   <ol type="A">              
    <li>Cadillac</li>
    <li>Buick</li>
    <li>Jeep</li>
    <li>Lincoln</li>
   </ol>              
 </section>
</body>
</html>

The second section uses capital letter alphabetic order, signified using the type=“A” parameter. To use Roman numerals, use the type=“I”parameter setting. It is usually not logical to count backward or starting with arbitrary letters or Roman numerals using these type settings, but it’s possible to do so.

Next, let’s take a

look at HTML5 description lists. HTML versions prior to HTML5 defined the <dl> tag as a definition list (this was not as semantically relevant).

HTML5 Description Lists: Lists of Terms with Data

The last three

tags in Table 13-1 allow you to define a description list. In HTML 4.01, a <dl> was called a “definition list.” This list contained a group of terms and definitions. These terms and definitions represented a “many to many” interrelationship, as in one or more terms matched to one or more definitions. This HTML element was therefore misunderstood and subsequently misused, or not used at all. To make matters worse, this definition list was not usable for semantic search.

To fix all the issues with the <dl> tag, HTML5 redefines this tag as a description list. The <dl> element represents the associated (related) data list consisting of zero or more name-value pairs or name-value groups.

A name-value pair consists of the description term <dt> and its description data <dd> value, which is very similar to a JSON key-value pair. A name-value group consists of one or more description terms <dt> elements followed by one or more values in the form of description data <dd> elements.

Within a single description list <dl> element, there cannot be more than one single description term <dt> element for each description term name; that is, there can be no duplicate <dt> elements within a description list <dl> parent container.

Name-value pairs and name-value groups can be terms and definitions, metadata topics and values, questions and answers, or any other pairs or groupings of name-value data.

Those of you familiar with JSON may see the similarities between the key-value pairs used to define JSON data definition structures and object notation structures.

The DL Tag: Defining the Description List Parent Container

The <dl> tag defines the topmost level for the description list.

The default CSS3 defined for the <dl> tag is shown here for reference purposes only. It keeps the data in the description list spaced very close together with minimal spacing around the description list block of data pairs/groups:

dl { display: block;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0; }

Let’s use the <dl> tag along with the <dt> and <dd> tags to define a data array for Italian exotic car brands and models in our content design example section. This example is shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head>
 <title>Exotic and Domestic Cars</title>
</head>
<body>
 <section >
  <h1>Italian Exotic Car Brand Description List</h1>
  <dl>              
   <dt>Ferrari</dt><dd>LaFerrari</dd>
   <dt>Bugatti</dt><dd>Chiron</dd>
   <dt>Maserati</dt><dd>GranCabrio</dd>
   <dt>Lamborghini</dt><dd>Gallardo</dd>
  </dl>              
 </section>
</body>
</html>

Next, let’s take a look at the definition term <dt> tag.

The DT Tag: Defining Each Description Term Child Element

The <dt> tag defines

the description term for each key-value data pair, as you saw in the previous section. Default CSS3 defined for this <dt> tag is shown here (for reference purposes only):

dt { display: block; }

Next, let’s take a look at

the definition data <dd> tag.

The DD Tag: Defining Each Description Data Child Element

The <dd> tag holds description

data in a description list. Inside of a <dd> tag you can put paragraphs, line breaks, images, links, other lists, and similar text-based content. You can see how the tag is used in the preceding example. The default CSS for the <dd> tag is shown here for reference purposes only:

dd { display: block; margin-left: 40px; }

Next, let’s look at another way to arrange data, in a tabular format, when we look at the HTML table tags in the next chapter.

Summary

This chapter described list tag support in HTML5 and prior versions, including the <li>, <ul>, <ol>, <dl>, <dt>, and <dd> tags. In the next chapter, you look at the HTML5 tags that support the publishing of table-based content within HTML5 documents and applications.

Comments are closed.

loading...