Texto

Estructura el texto de forma semántica utilizando las etiquetas de HTML.

Contenido

Idioma de la página
Encabezados
Párrafos
Listas
Abreviaciones
Citas
Comprobación

Idioma de la página

En primer lugar, indica el idioma principal de la página. Indicar el idioma ayuda a las aplicaciones de síntesis de voz, traducción y corrección de textos a presentar la información de forma correcta.

Para identificar el idioma de la página utilizamos el atributo lang en el elemento html:

<html lang="es">

Para indicar cambios de idioma usamos el atributo lang en el elemento que contiene el texto:

<p>El lenguaje <abbr lang="en" title="Hypertext Markup
Language">HTML</abbr> se utiliza para estructurar páginas web.</p>

Nota: Los códigos de los idiomas siguen el estándar ISO 639

Encabezados

Utiliza encabezados para identificar las secciones de un documento e indicar su importancia relativa.

En HTML existen seis niveles de encabezado (h1 - h6). Los encabezados deben anidarse respetando el orden jerárquico y sin saltarse niveles al descender. Es decir, después de un h2 podría ir otro h2 o un h3, pero no un h4.

Ejemplo: Encabezados

Encabezado nivel 1

Encabezado nivel 2

Encabezado nivel 3

Encabezado nivel 4

Encabezado nivel 5

Encabezado nivel 6

<h1>Encabezado nivel 1</h1>
<h2>Encabezado nivel 2</h2>
<h3>Encabezado nivel 3</h3>
<h4>Encabezado nivel 4</h4>
<h5>Encabezado nivel 5</h5>
<h6>Encabezado nivel 6</h6>

Nota: Utiliza encabezados claros y descriptivos. Los usuarios de lectores de pantalla utilizan a menudo los encabezados para navegar dentro de una página web.

Párrafos

Los párrafos nos permiten dividir el texto en fragmentos temáticos, facilitando así su lectura.

Es recomendable limitar cada párrafo a una única idea principal, para facilitar la comprensión del texto.

Ejemplo: Párrafo

Evita el uso de párrafos vacíos para crear saltos de línea, los lectores de pantalla los pueden leer como “en blanco”.

<p>Evita el uso de párrafos vacíos para crear saltos de línea,
los lectores de pantalla los pueden leer como “en blanco”.</p>

Listas

Las listas se utilizan para mostrar un conjunto de elementos consecutivos.

Lista no ordenada

La lista no ordenada (ul) se utiliza cuando los elementos no tienen un orden específico.

Ejemplo: Lista no ordenada

Peras
Manzanas
Melones
Sandías

<ul>
  <li>Peras</li>
  <li>Manzanas</li>
  <li>Melones</li>
  <li>Sandías</li>
</ul>

Lista ordenada

La lista ordenada (ol) indica que los elementos siguen un orden progresivo o una secuencia.

Ejemplo: Lista ordenada

Encender el ordenador
Abrir el navegador
Ir a la web de búsqueda
Teclear el término a buscar

<ol>
  <li>Encender el ordenador</li>
  <li>Abrir el navegador</li>
  <li>Ir a la web de búsqueda</li>
  <li>Teclear el término a buscar</li>
</ol>

Lista descriptiva

La lista descriptiva (dl) sirve para mostrar grupos de términos (dt) y descripciones (dd).

Ejemplo: Lista descriptiva

HTML: Lenguaje de marcado para la elaboración de páginas web.
CSS: Lenguaje usado para definir y crear la presentación de páginas web.
YAML: Formato de serialización de datos legible por humanos.

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para la elaboración de páginas web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje usado para definir y crear la presentación de páginas web.</dd>
  <dt>YAML</dt>
  <dd>Formato de serialización de datos legible por humanos.</dd>
</dl>

Abreviaciones

Las abreviaciones incluyen tanto abreviaturas como siglas.

El elemento HTML para indicar una abreviación es abbr. Y para indicar la descripción completa incluimos el atributo title.

Ejemplo: Abreviación

El PIB es el valor total de bienes y servicios producidos por un país durante un período determinado.

<p>El <abbr title="Producto Interior Bruto">PIB</abbr>
es el valor total de bienes y servicios producidos por un país
durante un período determinado.</p>

Aunque debido a las diferentes formas de interpretar el atributo title por parte de los navegadores y lectores de pantalla, se recomienda incluir la descripción completa de la abreviación la primera vez que aparece en la página.

Ejemplo: Abreviación con descripción

El Producto Interior Bruto (PIB) es el valor total de bienes y servicios producidos por un país durante un período determinado.

<p>El Producto Interior Bruto (<abbr>PIB</abbr>) es el valor total
de bienes y servicios producidos por un país durante un período
determinado.</p>

Citas

Las citas pueden ser en línea, cuando aparecen dentro de un párrafo, o en bloque, cuando forman un párrafo.

Cita en línea

Ejemplo: Cita en línea

El poeta dijo: En muchas ocasiones la lectura de un libro ha hecho la fortuna de un hombre, decidiendo el curso de su vida.

<p>El poeta dijo: <q>En muchas ocasiones la lectura de un libro
ha hecho la fortuna de un hombre, decidiendo el curso de su vida.</q></p>

Cita en bloque

Ejemplo: Cita en bloque

El cuerpo humano es el carruaje; el yo, el hombre que lo conduce; el pensamiento son las riendas, y los sentimientos los caballos.

<blockquote>
  <p>El cuerpo humano es el carruaje; el yo,
  el hombre que lo conduce; el pensamiento son las riendas,
  y los sentimientos los caballos.</p>
</blockquote>

Comprobación

Para comprobar el idioma, tanto de la página en general como de los posibles cambios, usamos el inspector de código.

Para comprobar la estructura de encabezados podemos usar la extensión:

Para el resto de elementos (listas, abreviaciones, citas) usamos el inspector de código y comprobamos si el contenido está correctamente etiquetado.