Texto

Estructura el texto de forma semántica e indica el idioma.

Encabezados

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

Existen seis niveles de encabezado (h1 - h6).

Ejemplo

Encabezado nivel 1

Encabezado nivel 2

Encabezado nivel 3

Encabezado nivel 4

Encabezado nivel 5

Encabezado nivel 6

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

Los encabezados deben anidarse respetando el orden jerárquico y sin saltarse niveles.

El texto del encabezado debe ser claro y descriptivo.

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

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

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

Lista no ordenada

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

Ejemplo
  • Peras
  • Manzanas
  • Melones
  • Sandías
HTML
<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
  1. Encender el ordenador
  2. Abrir el navegador
  3. Ir a la web de búsqueda
  4. Teclear el término a buscar
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 (dt) y descripciones (dd).

Ejemplo
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.
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, por ejemplo: pág. (página) como siglas, por ejemplo: ONU (Organización de las Naciones Unidas).

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

Ejemplo

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

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

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

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>

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

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

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

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

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>

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

Identificamos el idioma mediante el atributo lang.

Identifica el idioma de la página añadiendo el atributo lang a la etiqueta html.

HTML
<html lang="es">

Marca los cambios de idioma usando el atributo lang en el elemento que engloba al texto.

HTML
<p>El lenguaje (<abbr lang="en" title="Hypertext Markup
Language">HTML</abbr>)...</p>

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

Criterios de conformidad WCAG 2.1