Chuleta de HTML
Resumen de consulta rápida con las etiquetas y atributos de HTML5 que más vas a usar. Cada apartado enlaza a la lección donde se explica con calma.
Estructura básica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi página</title>
</head>
<body>
<h1>Hola, mundo</h1>
</body>
</html>| Código | Qué hace |
|---|---|
<!DOCTYPE html> | Declara HTML5; siempre en la primera línea |
<html lang="es"> | Elemento raíz; lang indica el idioma |
<head> | Información sobre la página (no se ve) |
<body> | Todo el contenido visible |
<p>Texto</p> | Elemento: etiqueta de apertura, contenido y cierre |
<br>, <img>, <input> | Elementos vacíos: sin etiqueta de cierre |
<a href="/"> | Atributo: nombre="valor" en la etiqueta de apertura |
<input disabled> | Atributo booleano: basta con escribirlo |
<!-- comentario --> | Comentario; el navegador lo ignora |
Más en: ¿Qué es HTML?, Estructura básica, Etiquetas y atributos
El head y metadatos
| Código | Qué hace |
|---|---|
<meta charset="utf-8"> | Codificación: tildes y eñes sin símbolos raros |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Adapta la página al ancho del móvil |
<title> | Texto de la pestaña y título en Google |
<meta name="description" content="..."> | Resumen que puede mostrar Google |
<link rel="stylesheet" href="estilos.css"> | Enlaza una hoja de estilos |
<link rel="icon" href="favicon.svg"> | Icono de la pestaña (favicon) |
<script src="app.js" defer></script> | Carga JavaScript sin bloquear la página |
<style> | CSS escrito dentro del propio HTML |
<meta property="og:title" content="..."> | Título al compartir en redes (Open Graph) |
<link rel="canonical" href="..."> | URL principal de la página (SEO) |
<base href="..."> | URL base para todas las rutas relativas |
Más en: El head y metadatos
Atributos globales
| Código | Qué hace |
|---|---|
id="menu" | Identificador único en la página |
class="boton activo" | Una o varias clases para CSS y JS |
style="color: red" | CSS en línea (úsalo poco) |
title="Más info" | Texto de ayuda al pasar el ratón |
lang="en" | Idioma de ese elemento |
hidden | Oculta el elemento |
data-precio="20" | Dato propio; en JS: elemento.dataset.precio |
tabindex="0" | Hace enfocable un elemento con el teclado |
contenteditable | Permite editar el texto en el navegador |
dir="rtl" | Dirección del texto (derecha a izquierda) |
translate="no" | Pide que no se traduzca el contenido |
Más en: Atributos globales
Textos, bloque y en línea
| Código | Qué hace |
|---|---|
<h1> … <h6> | Títulos por nivel; un solo h1 por página |
<p> | Párrafo |
<br> | Salto de línea dentro de un texto |
<hr> | Separación temática entre bloques |
<strong> | Importancia (negrita) |
<em> | Énfasis (cursiva) |
<b>, <i> | Negrita o cursiva sin significado especial |
<mark> | Texto resaltado |
<small> | Letra pequeña, avisos legales |
<del>, <ins> | Texto eliminado y añadido |
<sub>, <sup> | Subíndice (H2O) y superíndice |
<code>, <pre> | Código en línea y texto preformateado |
<kbd> | Tecla o atajo de teclado |
<blockquote cite="...">, <q> | Cita en bloque y cita corta |
<abbr title="..."> | Abreviatura con su significado |
<time datetime="2026-10-01"> | Fecha legible por máquinas |
<div> | Contenedor de bloque genérico |
<span> | Contenedor en línea genérico |
Los elementos de bloque (div, p, h1, ul…) ocupan todo el ancho y empiezan en línea nueva. Los en línea (span, a, strong, img…) solo ocupan lo que su contenido.
Más en: Títulos y párrafos, Bloque y en línea
Enlaces y rutas
| Código | Qué hace |
|---|---|
<a href="https://ejemplo.com"> | Enlace a otra web (ruta absoluta) |
<a href="contacto.html"> | Enlace a un archivo de la misma carpeta |
<a href="#precios"> | Salta al elemento con id="precios" |
<a href="otra.html#precios"> | Salta a una sección de otra página |
target="_blank" | Abre en una pestaña nueva |
rel="noopener noreferrer" | Protege al abrir enlaces externos en pestaña nueva |
<a href="mailto:hola@ejemplo.com"> | Abre el correo |
<a href="tel:+34600000000"> | Llama por teléfono (móvil) |
<a href="menu.pdf" download> | Descarga el archivo |
img/logo.png | Ruta relativa: carpeta img junto al archivo actual |
../index.html | Sube una carpeta |
./estilos.css | Carpeta actual (igual que estilos.css) |
/css/estilos.css | Ruta desde la raíz del sitio |
Imágenes y multimedia
| Código | Qué hace |
|---|---|
<img src="foto.jpg" alt="Descripción"> | Imagen; alt es obligatorio |
alt="" | Imagen decorativa: los lectores de pantalla la saltan |
width="800" height="600" | Tamaño real; evita saltos al cargar |
loading="lazy" | Carga la imagen solo al acercarse a ella |
<figure> + <figcaption> | Imagen (o código, gráfico) con pie de foto |
srcset="foto-800.jpg 800w, foto-1600.jpg 1600w" | Varias resoluciones; el navegador elige |
sizes="(max-width: 600px) 100vw, 50vw" | Ancho que ocupará la imagen en pantalla |
<picture> + <source> | Otra imagen u otro formato según el caso |
<video src="v.mp4" controls> | Vídeo con controles |
<audio src="a.mp3" controls> | Audio con controles |
autoplay muted loop | Reproducción automática (exige muted) y en bucle |
poster="portada.jpg" | Imagen del vídeo antes de reproducirlo |
<track kind="subtitles" src="es.vtt" srclang="es"> | Subtítulos |
<iframe src="..." title="Mapa"> | Inserta otra página (mapa, vídeo de YouTube) |
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Sala de escalada" width="800" height="533">
</picture>Más en: Imágenes, Imágenes responsive, Audio, vídeo e iframes
Listas
| Código | Qué hace |
|---|---|
<ul> | Lista sin orden (viñetas) |
<ol> | Lista ordenada (números) |
<li> | Cada elemento de la lista |
<ol type="a"> | Numeración con letras (1, a, A, i, I) |
<ol start="5"> | Empieza a contar en 5 |
<ol reversed> | Cuenta hacia atrás |
<dl>, <dt>, <dd> | Lista de descripciones: término y definición |
<ul>
<li>Frutas
<ul>
<li>Manzana</li>
</ul>
</li>
</ul>Más en: Listas
Tablas
| Código | Qué hace |
|---|---|
<table> | Tabla |
<caption> | Título de la tabla |
<thead>, <tbody>, <tfoot> | Cabecera, cuerpo y pie |
<tr> | Fila |
<th> | Celda de cabecera |
<td> | Celda de datos |
scope="col" / scope="row" | Indica si el th es de columna o de fila |
colspan="2" | La celda ocupa dos columnas |
rowspan="3" | La celda ocupa tres filas |
<table>
<caption>Notas</caption>
<thead>
<tr><th scope="col">Alumno</th><th scope="col">Nota</th></tr>
</thead>
<tbody>
<tr><td>Lucía</td><td>8,5</td></tr>
</tbody>
</table>Más en: Tablas
Formularios
| Código | Qué hace |
|---|---|
<form action="/enviar" method="post"> | Formulario: a dónde y cómo se envía |
<label for="email"> | Texto asociado al campo con ese id |
<input type="text" name="nombre"> | Campo de texto; name es la clave al enviar |
type="email", "tel", "url" | Texto con teclado y formato adaptados |
type="password" | Oculta lo que se escribe |
type="number", "range" | Número o deslizador (min, max, step) |
type="date", "time" | Selector de fecha u hora |
type="checkbox" | Casilla de verificación |
type="radio" | Opción única (mismo name en el grupo) |
type="file" | Subir archivos (accept, multiple) |
type="color", "search", "hidden" | Color, búsqueda y dato oculto |
<textarea rows="4"> | Texto de varias líneas |
<select> + <option value="..."> | Lista desplegable |
<optgroup label="..."> | Agrupa opciones de un select |
<datalist> | Sugerencias para un input (atributo list) |
<fieldset> + <legend> | Agrupa campos con un título |
<button type="submit"> | Envía el formulario |
<button type="button"> | Botón que no envía (para JS) |
<button type="reset"> | Vacía el formulario |
placeholder="..." | Texto de ejemplo dentro del campo |
value="..." | Valor inicial |
checked, selected | Casilla u opción marcada al cargar |
readonly, disabled | Solo lectura; desactivado (no se envía) |
autocomplete="email" | Ayuda al navegador a autorrellenar |
<form action="/suscribir" method="post">
<label for="email">Correo</label>
<input type="email" id="email" name="email" required>
<button type="submit">Suscribirme</button>
</form>Más en: Formularios
Validar formularios
| Código | Qué hace |
|---|---|
required | Campo obligatorio |
minlength="8", maxlength="20" | Longitud mínima y máxima del texto |
min="1", max="10" | Valor mínimo y máximo (números y fechas) |
step="0.5" | Incremento permitido |
pattern="[0-9]{5}" | Expresión regular que debe cumplir (código postal) |
type="email" / "url" | Valida el formato automáticamente |
novalidate | En el form: desactiva la validación del navegador |
formnovalidate | En un botón: envía sin validar |
aria-describedby="ayuda-cp" | Asocia el campo con su texto de ayuda |
Recuerda: la validación HTML es comodidad para el usuario; el servidor siempre debe validar de nuevo.
Más en: Validar formularios
HTML semántico
| Código | Qué hace |
|---|---|
<header> | Cabecera de la página o de una sección |
<nav> | Menú de navegación principal |
<main> | Contenido principal; uno por página |
<section> | Sección temática con su título |
<article> | Contenido independiente (noticia, tarjeta, post) |
<aside> | Contenido secundario o lateral |
<footer> | Pie de página o de sección |
<address> | Datos de contacto |
<search> | Zona de búsqueda (reciente; puedes usar <form role="search">) |
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>Más en: HTML semántico
details, dialog, SVG y canvas
| Código | Qué hace |
|---|---|
<details> + <summary> | Bloque desplegable sin JavaScript |
<details open> | Aparece ya abierto |
<details name="faq"> | Acordeón: solo uno abierto del grupo |
<dialog> | Ventana modal o cuadro de diálogo |
dialog.showModal() / dialog.close() | Abre como modal y cierra (JavaScript) |
<form method="dialog"> | Cierra el diálogo al enviarlo |
<svg viewBox="0 0 100 100"> | Gráfico vectorial que escala sin perder calidad |
<circle>, <rect>, <path> | Formas básicas de SVG |
<canvas id="lienzo"> | Lienzo para dibujar con JavaScript |
<progress value="70" max="100"> | Barra de progreso |
<meter value="0.6"> | Medida dentro de un rango |
<details>
<summary>¿Hace falta experiencia?</summary>
<p>No, empezamos desde cero.</p>
</details>Más en: details y dialog, SVG y canvas
Accesibilidad
| Código | Qué hace |
|---|---|
alt="..." | Describe la imagen a quien no puede verla |
<label for="..."> | Todo campo necesita su etiqueta |
<button> en vez de <div onclick> | Enfocable y usable con teclado |
aria-label="Cerrar" | Nombre accesible si no hay texto visible |
aria-labelledby="id" | Usa otro elemento como nombre |
aria-hidden="true" | Oculta a lectores de pantalla (iconos decorativos) |
aria-expanded="false" | Indica si un menú está abierto |
aria-live="polite" | Anuncia cambios de contenido |
aria-current="page" | Marca el enlace de la página actual |
role="alert" | Mensaje importante que se anuncia al momento |
<a href="#contenido">Saltar al contenido</a> | Enlace para saltar el menú con teclado |
Primera regla de ARIA: si existe un elemento HTML nativo que ya hace lo que necesitas, úsalo en lugar de ARIA.
Más en: Accesibilidad
Caracteres especiales y buenas prácticas
| Código | Qué hace |
|---|---|
< > | Símbolos < y > |
& | Símbolo & |
" | Comillas dobles dentro de un atributo |
| Espacio que no se parte (10 km) |
© | Símbolo de copyright |
€ | Símbolo del euro |
→ | Carácter por su número (flecha a la derecha) |
| Minúsculas y comillas dobles | <img src="a.jpg">, no <IMG SRC=a.jpg> |
| Sangría de 2 espacios | Cada nivel anidado, un poco más a la derecha |
| Cierra en orden inverso | <p><strong>...</strong></p> |
| Nombres de archivo sin espacios | sobre-nosotros.html, no Sobre Nosotros.html |
| HTML para contenido, CSS para aspecto | No uses <br> ni <h3> para dar estilo |
| Valida tu código | Validador del W3C: validator.w3.org |
Más en: Caracteres especiales, Buenas prácticas, Proyecto: tu web
HTML · devschool.es/chuletas/html/