Texto, imágenes, enlaces y listas

HTML proporciona seis niveles de encabezados. Utilícelos para crear un esquema del documento, no para cambiar el tamaño del texto. <h1> es el título de la página (una vez por página), <h2> se utiliza para las secciones principales, <h3> para las subsecciones y así sucesivamente.

El elemento <p> contiene un párrafo de texto. El navegador añade automáticamente espacio arriba y abajo. Utilice <br> con moderación, solo para saltos de línea significativos, como en una dirección o un poema, no para separar párrafos.

Utilice elementos en línea para dar significado al texto: <strong> para texto importante (negrita), <em> para enfatizar (cursiva), <code> para fragmentos de código, <mark> para texto resaltado y <small> para la letra pequeña.

El elemento <img> inserta una imagen. El atributo src proporciona la URL y alt el texto alternativo para los lectores de pantalla y cuando la imagen no se puede cargar. Incluya siempre un valor alt significativo.

El texto alternativo debe transmitir el contenido y el propósito de la imagen. Las imágenes decorativas (separadores, iconos utilizados únicamente como decoración) deben usar alt="" (cadena vacía) para que los lectores de pantalla las omitan. No escriba nunca alt="imagen de"; simplemente describa lo que muestra.

El elemento <a>(ancla) crea hipervínculos. El atributo href establece la URL de destino. El texto del enlace debe describir el destino; no escriba nunca «haga clic aquí».

Al abrir enlaces en una pestaña nueva con target="_blank", añada siempre rel="noopener noreferrer". Sin ello, la página abierta puede acceder al objeto window de la página que la abrió, una vulnerabilidad de seguridad conocida como reverse tabnapping.

Utilice <ul> (lista no ordenada) cuando el orden de los elementos no importe: características, ingredientes o enlaces de navegación. Cada elemento es un <li>. El navegador muestra viñetas de forma predeterminada, pero casi siempre las personalizará con CSS.

Utilice <ol> (lista ordenada) cuando el orden sea importante: pasos de un tutorial, clasificaciones o instrucciones. Los elementos se numeran automáticamente. Utilice los atributos start y reversed para controlar la numeración.

<dl> (lista de descripción) agrupa términos y sus definiciones o descripciones. Utilícela para glosarios, metadatos (autor/fecha) y pares clave-valor. <dt> es el término y <dd> es la descripción.

Las listas pueden anidarse para representar jerarquías. Coloque la lista <ul> o <ol> secundaria dentro del elemento <li> principal. No las anide únicamente para crear sangría; utilice CSS en su lugar.

¿Qué atributo proporciona una descripción textual de una imagen para los lectores de pantalla?

Utilice elementos de encabezado para la estructura del documento, p para los párrafos, img con texto alt significativo para las imágenes, a con texto de enlace descriptivo para la navegación y ul/ol/dl para el contenido en forma de lista. La semántica hace que el HTML sea accesible y legible para las máquinas.