<!DOCTYPE html> Declaración de tipo de documento HTML5
<html lang="en"> Elemento raíz con idioma
<head> Contenedor de metadatos del documento
<body> Cuerpo del documento (contenido visible)
<div> Contenedor genérico de bloque
<span> Contenedor genérico en línea
<link rel="stylesheet" href="style.css"> Enlazar hoja de estilos externa
<script src="app.js" defer></script> Enlazar script externo (diferido)
<template> Plantilla HTML reutilizable (no renderizada)
<h1> to <h6> Niveles de encabezado 1 (mayor) a 6
<p> Párrafo
<a href="url"> Hipervínculo
<a href="url" target="_blank" rel="noopener"> Enlace que abre en nueva pestaña (seguro)
<strong> / <b> Negrita / importancia fuerte
<em> / <i> Cursiva / énfasis
<br> Salto de línea
<hr> Línea horizontal / separador temático
<ul>
<li>Item</li>
</ul> Lista desordenada
<ol>
<li>Item</li>
</ol> Lista ordenada
<blockquote> Cita en bloque
<code> / <pre> Código en línea / texto preformateado
<mark> Texto resaltado
<abbr title="Full Text">FT</abbr> Abreviatura con tooltip
<form action="/submit" method="POST"> Elemento de formulario
<input type="text" name="q" placeholder="Search"> Campo de texto
<input type="email" required> Campo de email con validación
<input type="password"> Campo de contraseña (enmascarado)
<input type="number" min="0" max="100" step="1"> Campo numérico con rango
<input type="checkbox" checked> Campo de casilla de verificación
<input type="radio" name="group" value="a"> Botón de radio (agrupado por nombre)
<input type="file" accept="image/*" multiple> Subida de archivos (imágenes, múltiple)
<input type="range" min="0" max="100"> Control deslizante
<input type="date"> Selector de fecha
<input type="color"> Selector de color
<textarea rows="4" cols="50"></textarea> Campo de texto multilínea
<select>
<option value="a">A</option>
</select> Menú desplegable
<label for="email">Email</label> Etiqueta vinculada al campo por id
<button type="submit">Send</button> Botón de enviar
<fieldset>
<legend>Title</legend>
</fieldset> Agrupar elementos de formulario
<datalist id="opts">
<option value="A">
</datalist> Sugerencias de autocompletado
<img src="img.jpg" alt="Description" loading="lazy"> Imagen con carga diferida
<picture>
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="">
</picture> Imagen responsiva con formatos
<video src="vid.mp4" controls autoplay muted></video> Vídeo con controles
<audio src="audio.mp3" controls></audio> Reproductor de audio
<iframe src="url" title="Embed"></iframe> Marco embebido (vídeo, mapas)
<canvas id="c" width="300" height="150"></canvas> Superficie de dibujo para JS
<svg viewBox="0 0 100 100"> Contenedor de gráficos vectoriales escalables
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>John</td></tr>
</tbody>
</table> Estructura completa de tabla
<th colspan="2"> Encabezado que abarca 2 columnas
<td rowspan="3"> Celda que abarca 3 filas
<caption>Table Title</caption> Título de tabla (accesibilidad)
<header> Encabezado de página o sección
<nav> Enlaces de navegación
<main> Contenido principal (uno por página)
<article> Contenido independiente
<section> Agrupación temática de contenido
<aside> Barra lateral / contenido tangencial
<footer> Pie de página o sección
<figure>
<img src="" alt="">
<figcaption>Caption</figcaption>
</figure> Figura con leyenda
<details>
<summary>Click to expand</summary>
Hidden content
</details> Detalles desplegables
<dialog open>Modal content</dialog> Diálogo / elemento modal
<time datetime="2025-01-15">Jan 15</time> Fecha/hora legible por máquina
<meta charset="UTF-8"> Codificación de caracteres
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Viewport responsivo
<meta name="description" content="Page description"> Descripción SEO
<meta property="og:title" content="Title"> Título Open Graph (redes sociales)
<meta name="robots" content="index, follow"> Directivas para motores de búsqueda
<link rel="icon" href="favicon.ico"> Favicon
<link rel="canonical" href="url"> URL canónica (evitar duplicados)
<title>Page Title</title> Título del documento (mostrado en pestaña)
Cheat Sheet de HTML — Etiquetas, Formularios, Elementos Semánticos y Atributos
HTML lleva siendo el marcado de la web desde que Tim Berners-Lee publicó el primer borrador en 1991, y aunque ha pasado de una docena de etiquetas a varios cientos, la mayoría de las páginas se apoya todavía en un núcleo pequeño: estructura, texto, enlaces, formularios, multimedia, tablas y una capa fina de semántica encima. La chuleta de abajo cubre más de 65 de esas etiquetas agrupadas por función. La mayoría de los líos en marcado real no vienen de olvidar una etiqueta. Vienen de rarezas que parecen normales pero muerden. Un `<button>` dentro de un `<form>` sin atributo `type` explícito asume `type="submit"` y envía el formulario al primer Enter. El elemento `<html>` no trae el atributo `lang` por defecto, lo que rompe en silencio lectores de pantalla y traductores. Una `<img>` sin valor `alt` resulta invisible para quien usa lector de pantalla u otra tecnología de apoyo. Estos son los fragmentos que se acaban consultando al depurar precisamente eso: el atributo de formulario que controla el envío, el meta que arregla el zoom móvil, el elemento semántico que reemplaza un `<div>` vacío de significado.
Trampas habituales en HTML
Hay un puñado de patrones que merecen estar en la primera pantalla de cualquier documento HTML. `<meta charset="UTF-8">` y el meta viewport van dentro del `<head>` antes de que renderice nada, porque un navegador que adivine mal la codificación destrozará tildes y emojis de un modo que parece pérdida de datos y es puro marcado. La etiqueta `<label for="id">` emparejada con un input es la única línea que vuelve usable un formulario con lector de pantalla o táctil en móvil; las etiquetas no son decoración. El atributo `rel="noopener"` en cada enlace `target="_blank"` impide que la página abierta acceda a la ventana original, un valor seguro que la especificación tardó años en adoptar. Y `<main>`, `<article>`, `<nav>`, `<header>`, `<footer>` aportan significado real al buscador y al árbol de accesibilidad, cosa que un `<div>` no hace. La chuleta agrupa todo esto en estructura, texto, formularios, multimedia, tablas, marcas semánticas y meta, así la sección correcta queda a un clic.
- Más de 65 etiquetas y elementos HTML
- 7 categorías desde estructura hasta meta
- Todos los tipos de campos de formulario
- Elementos semánticos de HTML5
- Copia al portapapeles con un clic
- Buenas prácticas de accesibilidad
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·