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 lang="es">
...
</html>
Para indicar cambios de idioma usamos el atributo lang en el elemento que contiene el texto:
<p>
El lenguaje HTML (<span lang="en">Hypertext Markup Language</span>) 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. El texto del encabezado debe ser claro y descriptivo.
En HTML existen seis niveles de encabezado (<h1> - <h6>). Los encabezados deben anidarse respetando el orden jerárquico y sin saltarse niveles al descender.
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
Todas las secciones deberían tener un encabezado. Si en una sección no es necesario porque el contenido es evidente, entonces puedes ocultarlo visualmente mediante CSS, pero que siga siendo accesible para las tecnologías de asistencia.
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.
<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.
<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.
<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.
<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.
<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 se utiliza para citas breves, normalmente dentro de un párrafo.
<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.
<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>