Content grouping and structure

This tutorial will cover use and properties of some basic elements designed to format and structure content in HTML documents.

Basic content grouping

Among the many ways that HTML provides to group content in a document, here we'll talk about two of the most basic and regularly used: paragraphs and lists.

Paragraphs

The idea of paragraph has been borrowed by HTML from previous ways of writing documents, so we're not going to add anything new by saying that a paragraph is a group of one or more sentences that form a unit and support one main idea. With this definition in mind we have somehow clear what to put inside a paragraph. The only thing left to know is that the p element is the responsible for marking a paragraph in HTML.

Having said this, let's begin with our first example. Here we'll create a simple paragraph, following the sequence: opening tag, content and closing tag.

<p>There's a shadow hanging over me...</p>

There's a shadow hanging over me...

Declaring a paragraph is a very simple process and as this isn't the first paragraph we insert in these tutorials, we're ready to proceed with the next subject.

Lists

HTML provides mechanisms to include three different types of lists in a document. These are: ordered lists (ol), unordered lists (ul) and description lists (dl).

Ordered and unordered lists

The structure of ordered and unordered lists is basically the same, and consists of a container with list items. The only thing that changes in these two types of lists is the container element, which is ol for ordered lists and ul for unordered lists. Items, by the way, are inserted with the li element.

But these two list types aren't just different because of the elements they utilize. Semantically speaking, ordered lists give weight to the order in which the items are declared, while for unordered lists the order is irrelevant. In the following example we'll create two lists, one ordered and the other unordered.

<p>Resources:</p>
<ul>
  <li>Old magazines</li>
  <li>White paper</li>
  <li>Scissors</li>
  <li>Glue</li>
  <li>Pencil</li>
</ul>
<p>Procedure:</p>
<ol>
  <li>Cut figures from the magazines that you think identify your image of the world.</li>
  <li>Paste them in the paper with glue, leaving space at the bottom to write your thoughts.</li>
  <li>Write down a description about the images and how they represent your image of the world.</li>
</ol>

Resources:

  • Old magazines
  • White paper
  • Scissors
  • Glue
  • Pencil

Procedure:

  1. Cut figures from the magazines that you think identify your image of the world.
  2. Paste them in the paper with glue, leaving space at the bottom to write your thoughts.
  3. Write down a description about the images and how they represent your image of the world.

Description lists

A description list, formerly known as definition list, is a structure consisting of names and values, that usually keep some kind of relationship. The association of names and values in description lists is arbitrary and may consist of one name being associated to one or more values and viceversa. This association depends exclusively on order and position of items, being values always associated to the last name preciding them.

In previous versions of the standard, this type of list was known as definition list. HTML5, because of the extended use that authors made of it to associate name/value pairs of all kinds, has changed its name and purpose to the more general description list.

In the following example we have a small art glossary where every term has a corresponding definition. In this structure, the term "miniature" gets two definitions, while the terms "myth" and "legend" share both the same definition.

<dl>
  <dt>Mural</dt>
  <dd>A large painting on a wall.</dd>
  <dt>Medium</dt>
  <dd>A material used by artists that often implies the technique for using it.</dd>
  <dt>Miniature</dt>
  <dd>A small painting executed with great detail.</dd>
  <dd>A small portrait, picture or decorative letter on an illuminated manuscript.</dd>
  <dt>Myth</dt>
  <dt>Legend</dt>
  <dd>A traditional story explaining aspects of the natural world or cultural and social ideas.</dd>
</dl>
Mural
A large painting on a wall.
Medium
A material used by artists that often implies the technique for using it.
Miniature
A small painting executed with great detail.
A small portrait, picture or decorative letter on an illuminated manuscript.
Myth
Legend
A traditional story explaining aspects of the natural world or cultural and social ideas.

Lists nesting

HTML lists can be nested in multiple configurations. The idea of lists nesting can be resumed in two rules: any item in ordered and unordered lists (li) can contain a list; and any value in a description list (dd) can contain a list. With this scheme you can make almost any kind of combination.

In the next example we'll create an ordered list with two items, where the first of these items will contain an unordered list. Pay close attention to the opening and closing tags of the item containing the list.

<ol>
  <li>Collect the following items:
    <ul>
      <li>Key</li>
      <li>Hammer</li>
      <li>Scissors</li>
    </ul>
  </li>
  <li>Proceed to the next room.</li>
</ol>
  1. Collect the following items:
    • Key
    • Hammer
    • Scissors
  2. Proceed to the next room.

And before changing the subject, we'll reform the first lists example. The idea will be to create a main description list with two names ("resources" and "procedure") and their corresponging values which are, in turn, lists.

<dl>
  <dt>Resources</dt>
  <dd>
    <ul>
      <li>Old magazines</li>
      <li>White paper</li>
      <li>Scissors</li>
      <li>Glue</li>
      <li>Pencil</li>
    </ul>
  </dd>
  <dt>Procedure</dt>
  <dd>
    <ol>
      <li>Cut figures from the magazines that you think identify your image of the world.</li>
      <li>Paste them in the paper with glue, leaving space at the bottom to write your thoughts.</li>
      <li>Write down a description about the images and how they represent your image of the world.</li>
    </ol>
  </dd>
</dl>
Resources
  • Old magazines
  • White paper
  • Scissors
  • Glue
  • Pencil
Procedure
  1. Cut figures from the magazines that you think identify your image of the world.
  2. Paste them in the paper with glue, leaving space at the bottom to write your thoughts.
  3. Write down a description about the images and how they represent your image of the world.

123Next