HTML Cheatsheet
Referencia rapida de HTML5: etiquetas, atributos, formularios, multimedia, tablas, entidades y meta tags. Imprimi esta pagina y tenela a mano.
Estructura del Documento
| Etiqueta / Codigo | Descripción |
|---|---|
| <!DOCTYPE html> | Declara el documento como HTML5 |
| <html lang="es"> | Elemento raiz, lang para accesibilidad y SEO |
| <head> | Metadatos, titulo, links a CSS, scripts |
| <meta charset="UTF-8"> | Codificacion de caracteres |
| <meta name="viewport" ...> | Viewport responsive para mobile |
| <title>...</title> | Titulo de la pestana del navegador (SEO) |
| <link rel="stylesheet" href="..."> | Vincular hoja de estilos CSS |
| <script src="..." defer></script> | JavaScript externo (defer o async) |
| <body> | Contenido visible de la pagina |
Texto y Tipografia
| Etiqueta | Descripción |
|---|---|
| <h1> ... <h6> | Titulos de nivel 1 (mayor) a 6 (menor) |
| <p> | Parrafo de texto |
| <strong> | Texto con importancia (negrita semántica) |
| <em> | Enfasis (cursiva semántica) |
| <b> | Negrita sin enfasis semantico |
| <i> | Cursiva sin enfasis semantico |
| <u> | Subrayado (no confundir con link) |
| <s> | Tachado (contenido no relevante) |
| <del> / <ins> | Borrado / Insertado |
| <mark> | Texto resaltado |
| <small> | Texto pequeno (letras pequenas, copyright) |
| <abbr title="..."> | Abreviatura con expansion |
| <blockquote cite="..."> | Cita en bloque |
| <q> | Cita en linea |
| <code> | Fragmento de código en línea |
| <pre> | Texto preformateado (conserva espacios) |
| <br> | Salto de linea |
| <hr> | Linea separadora horizontal |
| <span> | Contenedor inline generico |
| <sub> / <sup> | Subindice / Superindice |
Links & Imagenes
| Etiqueta / Atributo | Descripción |
|---|---|
| <a href="url"> | Link a otra pagina o recurso |
| <a href="#id"> | Link interno (ancla al mismo documento) |
| <a href="mailto:..."> | Link de email |
| <a href="tel:..."> | Link de telefono |
| target="_blank" | Abrir en nueva pestana |
| rel="noopener noreferrer" | Seguridad con target="_blank" |
| download | Forzar descarga del enlace |
| <img src="..." alt="..."> | Imagen (alt obligatorio) |
| loading="lazy" | Lazy loading nativo (fuera de viewport) |
| loading="eager" | Carga inmediata (default para <img>) |
| width / height | Dimensiones (previene layout shift) |
| fetchpriority="high" | Prioridad de carga (above the fold) |
| <figure> | Contenedor semantico para imagen + caption |
| <figcaption> | Descripcion de una figure |
Imagenes Responsivas
| Elemento / Atributo | Descripción |
|---|---|
| <picture> | Contenedor para multiples fuentes de imagen |
| <source srcset="..." type="..."> | Fuente alternativa con formato condicional |
| <source media="(max-width: 768px)"> | Art direction: imagen diferente segun viewport |
| <img srcset="sm.jpg 400w, lg.jpg 800w"> | Descriptores de ancho para srcset |
| sizes="(max-width: 600px) 100vw, 50vw" | Regla de tamano para elegir srcset |
| <img srcset="1x.jpg 1x, 2x.jpg 2x"> | Descriptores de densidad de pixeles |
| <source> <img> | <img> como fallback dentro de <picture> |
Listas
| Etiqueta | Descripción |
|---|---|
| <ul> | Lista desordenada (bullets) |
| <ol> | Lista ordenada (numeros) |
| <ol type="A"> | Tipo: A (letras), a, I (romano), i, 1 (num) |
| <ol start="5"> | Comenzar numeracion desde 5 |
| <ol reversed> | Numeracion inversa |
| <li> | Item de lista |
| <dl> | Lista de definiciones |
| <dt> | Termino a definir |
| <dd> | Definicion del termino |
Elementos Semanticos
| Etiqueta | Descripción |
|---|---|
| <header> | Cabecera de la pagina o seccion |
| <nav> | Bloque de navegacion principal |
| <main> | Contenido principal (solo uno por pagina) |
| <section> | Seccion tematica del contenido |
| <article> | Contenido independiente y auto-contenido |
| <aside> | Contenido lateral o complementario |
| <footer> | Pie de la pagina o seccion |
| <details> | Acordeon expandible nativo |
| <summary> | Encabezado visible de <details> |
| <time datetime="2026-06-10"> | Fecha/hora legible + formato maquina |
| <address> | Info de contacto del autor/owner |
| <search> | Contenedor de busqueda (nuevo) |
Formularios
| Etiqueta / Atributo | Descripción |
|---|---|
| <form action="..." method="POST"> | Formulario (action = URL destino) |
| <label for="id"> | Etiqueta accesible asociada a un input |
| <fieldset> | Agrupa campos relacionados |
| <legend> | Titulo de un fieldset |
| <input> | Campo de entrada (self-closing) |
| <textarea rows="4" cols="50"> | Area de texto multilinea |
| <select> / <optgroup> / <option> | Menu desplegable con grupos |
| <datalist id="..."> | Sugerencias autocompletar para input |
| <output> | Resultado de calculo/formulario |
| <button type="submit"> | Boton (type: submit, reset, button) |
Tipos de Input
| type | Descripción |
|---|---|
| text | Texto de una sola linea (default) |
| Email con validación automática | |
| password | Texto oculto (puntos) |
| number | Solo numeros (min, max, step) |
| tel | Telefono |
| url | URL con validación automática |
| search | Campo de busqueda (con clear button) |
| date | Selector de fecha |
| time | Selector de hora |
| datetime-local | Fecha y hora local |
| month | Selector de mes y anio |
| week | Selector de semana |
| range | Slider (min, max, step) |
| color | Selector de color (hex) |
| file | Selector de archivo (accept, multiple) |
| checkbox | Casilla de verificacion |
| radio | Seleccion unica (mismo name = grupo) |
| hidden | Campo oculto (envia datos sin mostrarse) |
| submit | Boton para enviar el form |
| reset | Boton para limpiar el form |
Validación de Formularios
| Atributo | Descripción |
|---|---|
| required | Campo obligatorio |
| minlength="3" | Longitud minima del texto |
| maxlength="100" | Longitud maxima del texto |
| min="0" / max="100" | Valor numerico minimo / maximo |
| step="5" | Intervalo permitido (numeros, date) |
| pattern="[A-Za-z]{3}" | Regex de validación |
| multiple | Permitir multiples valores (file, email) |
| autocomplete="off" | Desactivar autocompletado |
| placeholder="..." | Texto de ayuda (NO reemplaza label) |
| autofocus | Enfocar automáticamente al cargar |
| disabled | Desactivar campo (no se envia) |
| readonly | Solo lectura (si se envia) |
| form="formId" | Asociar campo a un form externo |
| novalidate | Deshabilitar validación nativa del form |
Tablas
| Etiqueta | Descripción |
|---|---|
| <table> | Contenedor de la tabla |
| <thead> | Grupo de filas de encabezado |
| <tbody> | Grupo de filas de datos |
| <tfoot> | Grupo de filas de pie |
| <tr> | Fila de tabla |
| <th> | Celda de encabezado (scope, abbr) |
| <td> | Celda de datos |
| colspan="2" | Expandir celda en 2 columnas |
| rowspan="3" | Expandir celda en 3 filas |
| <caption> | Titulo/descripción de la tabla |
| <colgroup> / <col> | Agrupar y estilizar columnas |
Multimedia & Embebido
| Etiqueta / Atributo | Descripción |
|---|---|
| <video src="..." controls> | Reproductor de video |
| <video poster="img.jpg"> | Imagen de preview antes de reproducir |
| <video autoplay muted loop> | Auto-play con mute y loop (requiere muted) |
| <source src="..." type="video/mp4"> | Fuente alternativa dentro de video/audio |
| <audio src="..." controls> | Reproductor de audio |
| <video> tracks <text> | Subtitulos: <track src="..." kind="subtitles"> |
| <iframe src="..."> | Embeber contenido externo |
| <iframe loading="lazy" ...> | Lazy loading nativo para iframes |
| <iframe sandbox allow="..."> | Restringir permisos del iframe |
| <embed src="..."> | Embeber plugin/contenido externo |
| <object data="..."> | Embeber recurso multimedia (con fallback) |
SVG & Canvas
| Etiqueta / Atributo | Descripción |
|---|---|
| <svg viewBox="0 0 100 100"> | Contenedor SVG con sistema de coordenadas |
| <circle cx="50" cy="50" r="40"/> | Circulo |
| <rect x="0" y="0" width="80" height="60"/> | Rectangulo |
| <line x1="0" y1="0" x2="100" y2="100"/> | Linea |
| <polyline points="..."/> | Polilinea (puntos conectados) |
| <polygon points="..."/> | Poligono cerrado |
| <path d="M10 10 H 90 V 90"/> | Ruta generica (M, L, H, V, C, Z...) |
| <ellipse cx="50" cy="50" rx="40" ry="20"/> | Elipse |
| <text x="10" y="20">Hola</text> | Texto dentro de SVG |
| <g> | Grupo de elementos (transform, estilos) |
| <defs> / <use href="#id"> | Definir y reutilizar elementos SVG |
| <canvas id="..." width="..." height="..."> | Lienzo para dibujo con JS (Canvas 2D/WebGL) |
Atributos Globales
| Atributo | Descripción |
|---|---|
| id="unico" | Identificador unico en el documento |
| class="clase1 clase2" | Clase(s) CSS (multiples con espacios) |
| style="color: red" | Estilo inline (evitar, usar CSS) |
| data-*="valor" | Dato personalizado (accesible via JS: dataset) |
| hidden | Ocultar elemento semanticamente |
| tabindex="0" | Orden de tabulacion (0 = natural, -1 = focus via JS) |
| title="tooltip" | Tooltip al hacer hover |
| draggable="true" | Hacer arrastrable |
| contenteditable | Editable por el usuario |
| role="..." | Rol ARIA semantico |
| aria-label="..." | Etiqueta accesible para screen readers |
| aria-labelledby="id" | Referencia a elemento como etiqueta |
| aria-hidden="true" | Ocultar de screen readers |
| aria-expanded="true/false" | Estado expandido/colapsado |
| aria-describedby="id" | Descripción accesible (ej: error en form) |
Meta Tags (SEO & Social)
| Meta Tag | Descripción |
|---|---|
| <meta name="description" content="..."> | Descripción del sitio (max 160 chars) |
| <meta name="robots" content="noindex"> | Control de indexacion (index, noindex, follow, nofollow) |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Viewport para responsive |
| <meta name="author" content="..."> | Autor del documento |
| <meta name="theme-color" content="#hex"> | Color de la barra del browser (mobile) |
| <meta property="og:title" content="..."> | Titulo para compartir (Facebook, LinkedIn) |
| <meta property="og:description" content="..."> | Descripción para compartir |
| <meta property="og:image" content="url"> | Imagen preview al compartir |
| <meta property="og:url" content="url"> | URL canonica del recurso |
| <meta property="og:type" content="website"> | Tipo de contenido |
| <meta name="twitter:card" content="summary_large_image"> | Tipo de card Twitter (summary, summary_large_image) |
| <link rel="canonical" href="url"> | URL canonica (evita contenido duplicado) |
| <link rel="icon" type="image/svg+xml" href="..."> | Favicon del sitio |
Contenedores & Otros
| Etiqueta | Descripción |
|---|---|
| <div> | Contenedor block generico |
| <span> | Contenedor inline generico |
| <template> | Contenido HTML inactivo (clonar via JS) |
| <slot> | Slot para Web Components |
| <dialog> | Dialogo/modal nativo (open, showModal()) |
| <progress max="100" value="60"> | Barra de progreso |
| <meter min="0" max="100" value="75"> | Medida escalar (dentro de rango) |
| <map> / <area> | Imagen con zonas clickeables (image map) |
| <ruby> / <rt> / <rp> | Anotaciones ruby (pronunciacion CJK) |
| <bdi> | Aislamiento bidireccional de texto |
| <wbr> | Punto de salto de linea sugerido |
Entidades HTML Comunes
| Entidad | Caracter | Descripción |
|---|---|---|
| & | & | Ampersand |
| < | < | Menor que |
| > | > | Mayor que |
| " | " | Comillas dobles |
| ' | ' | Comilla simple (apostrofe) |
| | Espacio no rompible | |
| © | © | Simbolo de copyright |
| ® | ® | Simbolo de registro |
| ™ | ™ | Simbolo de marca registrada |
| € | € | Euro |
| £ | £ | Libra esterlina |
| ¥ | ¥ | Yen japonés |
| – | – | Guión corto (en-dash) |
| — | — | Guión largo (em-dash) |
| « / » | « » | Comillas angulares |
| á é í ó ú | á é í ó ú | Vocales con tilde (español) |
| ñ | ñ | Eñe |
| ü | ü | U con dieresis |
| ▶ | ▶ | Punto/codigo decimal (ejemplo) |
Atributos de Eventos (inline)
Los atributos de evento (prefijo on) permiten ejecutar código JavaScript directamente desde el HTML cuando ocurre una acción del usuario o del navegador. Su valor es un string con código JS que se ejecuta en el momento exacto del evento. Casi cualquier elemento HTML puede recibir eventos de mouse y teclado, mientras que otros son específicos de ciertos tags (ej: onsubmit solo en <form>, onload en <img>/<body>/<script>, onchange en inputs y selects).
En proyectos reales, el enfoque moderno es usar element.addEventListener('evento', fn) desde JavaScript (separación de responsabilidades). Los atributos inline siguen siendo útiles para prototipos rápidos, ejemplos educativos y casos puntuales como <body onload="init()"> o onerror en imágenes de fallback.
| Atributo | Descripción | Tags comunes |
|---|---|---|
| onclick="fn()" | Click del mouse (o tap en mobile) | Cualquier elemento visible |
| ondblclick="fn()" | Doble click rapido | Cualquier elemento visible |
| oninput="fn()" | Se dispara en cada cambio del valor (tiempo real) | <input>, <textarea> |
| onchange="fn()" | Se dispara al perder foco si el valor cambio | <input>, <select>, <textarea> |
| onsubmit="fn()" | Al enviar el formulario (antes del envío) | <form> |
| onfocus / onblur | Elemento gana / pierde el foco | <input>, <select>, <textarea>, <a>, <button> |
| onkeydown / onkeyup | Tecla presionada / soltada | Elementos con foco (inputs, <body>) |
| onkeypress | Tecla presionada (deprecado, usar onkeydown) | Elementos con foco |
| onmouseover / onmouseout | Mouse entra / sale del elemento | Cualquier elemento visible |
| onmousemove | Mouse se mueve dentro del elemento | Cualquier elemento visible |
| onload="fn()" | Recurso terminó de cargar | <body>, <img>, <script>, <iframe> |
| onerror="fn()" | Error al cargar recurso (ideal para img fallback) | <img>, <script>, <video>, <audio> |
| onscroll="fn()" | Se hizo scroll en el elemento | Elementos con overflow: auto/scroll, <body> |
| onresize="fn()" | Ventana fue redimensionada | <body> |
| ondragstart / ondrag / ondrop | Drag & drop nativo | Elementos con draggable="true" |
| oncontextmenu="fn()" | Click derecho (menú contextual) | Cualquier elemento (return false para deshabilitar) |
| ontouchstart / ontouchend | Touch start / touch end (mobile) | Cualquier elemento visible en móvil |
Inline vs addEventListener
Los atributos inline ejecutan código en el scope global y solo permiten un handler por evento. Con addEventListener podés registrar múltiples handlers, usar opciones avanzadas ({ once: true, passive: true, capture: true }), y eliminar listeners con removeEventListener. La separación HTML/JS también mejora la mantenibilidad y facilita el testing. Regla práctica: si el handler necesita más de una línea de JS, usá addEventListener.