Free stock photo of background, code, coder, communication

Grouping and Content structure in HTML

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

TABLE OF CONTENTS

BASIC CONTENT GROUPING

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

PARAGRAPHS

The idea of a paragraph has been borrowed by HTML from previous ways of writing documents, so we are not adding anything new by saying that a paragraph is a group of one or more sentences that form a unit and support a central idea. With this definition in mind, we are somehow clear about what to put inside a paragraph. The only thing that remains to be known is that the elementp is responsible for marking a paragraph in HTML.

With that being said, let's start with our first example. Here we will create a simple paragraph, following the sequence: an opening tag, content, and closing tag.

Tengo esa nostalgia de domingo por llover...

I have that nostalgia for Sunday for raining ...

Declaring a paragraph is a very simple process and since this is not the first paragraph we inserted in these tutorials, we can say that we are ready to proceed to the next topic.

LISTS

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

SORTED AND UNORDERED LISTS

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

But these two types of lists differ not only in the items they use. Semantically speaking, ordered lists give importance to the order in which the items are declared, while for unordered lists the order is irrelevant. In the following example, we will create two lists, one ordered and the other unordered.

Recursos: <ul> <li>Revistas viejas</li> <li>Hoja blanca</li> <li>Tijeras</li> <li>Pegamento</li> <li>Lápiz</li> </ul> Procedimiento: <ol> <li>Corta figuras de las revistas que creas que identifican tu imagen del mundo.</li> <li>Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.</li> <li>Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.</li> </ol>

Resources:

Old magazines
White sheet
Scissors
Glue
Pencil

Process:

Cut out pictures from magazines that you think identify your image of the world.
Glue them onto the paper, leaving room at the bottom to write what you think.
Make a description of the images and how they represent your image of the world.

DESCRIPTIONS LISTS

A description list, previously known as a definition list, is a structure consisting of names and values, which are usually related to some kind. The association of names and values in the description lists is arbitrary and can consist of a name being associated with one or more values and vice versa. This association depends exclusively on the order and position of the items, with the values always associated with the last name that precedes them.

In previous versions of the standard, this type of list was known as a definition list. HTML 5, due to the widespread use that authors made of it to associate name/value pairs of all kinds, has changed its name and purpose to the more general list of descriptions.

In the example below, we have a small art glossary where each term has a definition that corresponds to it. In this structure, the term "miniature" receives two definitions, while the terms "myth" and "legend" both share the same definition.

<dl> <dt>Mural</dt> <dd>Pintura de grandes dimensiones sobre una pared.</dd> <dt>Medio</dt> <dd>Material usado por artistas que habitualmente implica la técnica para su utilización.</dd> <dt>Miniatura</dt> <dd>Una pintura pequeña ejecutada con gran detalle.</dd> <dd>Retrato pequeño, fotografía o letra decorativa en un manuscrito ilustrado.</dd> <dt>Mito</dt> <dt>Leyenda</dt> <dd>Historia tradicional que explica aspectos del mundo natural o ideas sociales y culturales.</dd> </dl>

Mural: Large painting on a wall.
Means, medium material used by artists that usually involves the technique for their use.
miniature small painting executed in great detail.: A small portrait, photograph, or decorative handwriting in an illustrated manuscript.
Myth
Legend: Traditional history that explains aspects of the natural world or social and cultural ideas.

NESTED LISTS

HTML lists can be nested in multiple configurations. The idea of nested lists can be summarized in two rules: any item of ordered or unordered lists ( li) can contain a list; and any value in a list of descriptions ( dd) can contain a list. With this scheme, you can do almost any type of combination.

In the following example, we will 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 that contains the list.

<ol> <li>Recoje los siguientes ítems: <ul> <li>Llave</li> <li>Martillo</li> <li>Tijeras</li> </ul> </li> <li>Procede al siguiente cuarto.</li> </ol>

Collect the following items:
- Key
- Hammer
- Scissors
Proceed to the next room.

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

<dl> <dt>Recursos</dt> <dd> <ul> <li>Revistas viejas</li> <li>Hoja blanca</li> <li>Tijeras</li> <li>Pegamento</li> <li>Lápiz</li> </ul> </dd> <dt>Procedimiento</dt> <dd> <ol> <li>Corta figuras de las revistas que creas que identifican tu imagen del mundo.</li> <li>Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.</li> <li>Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.</li> </ol> </dd> </dl>

Resources

Old magazines
White sheet
Scissors
Glue
Pencil

Process

Cut out pictures from magazines that you think identify your image of the world.
Glue them onto the paper, leaving room at the bottom to write what you think.
Make a description of the images and how they represent your image of the world.

Must Read, HTML Articles