Texto

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

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

<html lang="es">
  ...
</html>

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

HTML

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

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. El texto del encabezado debe ser claro y descriptivo.

En HTML existen seis niveles de encabezado (<h1> - <h6>). Los encabezados deben seguir un orden jerárquico sin saltarse niveles al descender.

El encabezado <h1> debe describir el tema principal de la página y, por lo general, se recomienda usarlo solo una vez.

Cada sección de una página suele tener un encabezado <h2>, y las subsecciones <h3> y siguientes.

HTML

<h1>Título principal</h1>
...
<h2>Título nivel 2</h2>
...
<h3>Título nivel 3</h3>
...
<h3>Título nivel 3</h3>
...
<h2>Título nivel 2</h2>
...
<h3>Título nivel 3</h3>
...

Si el contenido ya es evidente y no se necesita mostrar el encabezado, este puede ocultarse visualmente con CSS, manteniéndolo accesible para las tecnologías de asistencia.

Los usuarios de lectores de pantalla utilizan con frecuencia los encabezados para desplazarse por el contenido de una página.

Puedes comprobar la estructura de encabezados con una extensión de navegador como HeadingsMap.

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.

HTML

<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 relacionados de forma consecutiva. Agrupar elementos en listas facilita su lectura y organización.

Lista no ordenada

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

HTML

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

Lista ordenada

La lista ordenada (<ol>) se utiliza cuando el orden de los elementos es importante, como en instrucciones paso a paso o clasificaciones.

HTML

<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 y descripciones.

HTML

<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>.

Se recomienda incluir la descripción completa de la abreviación la primera vez que aparece en la página.

HTML

<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>

El elemento abbr admite el atributo title para incluir el texto ampliado de la abreviatura, aunque debido a las diferentes formas de interpretar este atributo por parte de navegadores y lectores de pantalla, es preferible no utilizarlo.

Citas

Las citas pueden ser en línea o en bloque.

El elemento <q> se utiliza para citas breves, normalmente dentro de un párrafo.

HTML

<p>
  El filósofo dijo:
  <q>La conquista propia es la más grande de las victorias.</q>
</p>

El elemento <blockquote> se utiliza para citas en bloque independiente.

HTML

<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>