Declaración de tipo de documento HTML5
Estructura · Patrón / sintaxis<!DOCTYPE html>Cheatsheet de HTML
Busca por código, tarea o categoría en español o inglés. Copia un fragmento y adáptalo al contexto indicado.
Mostrando 71 de 71 elementos
Los patrones HTML van en la parte correspondiente de un documento. Adapta las URL, el texto y los atributos; las etiquetas sueltas y alternativas son referencias de sintaxis, no documentos completos. Los controles de formulario necesitan etiquetas y un endpoint real o JavaScript para procesar los envíos.
Elemento raíz; declara el idioma del documento
Estructura · Patrón / sintaxis<html lang="es">Usa el código de idioma que corresponda al contenido, como en o es.
Contenedor de metadatos del documento
Estructura · Patrón / sintaxis<head>Cuerpo del documento (contenido visible)
Estructura · Patrón / sintaxis<body>Contenedor genérico de bloque
Estructura · Patrón / sintaxis<div>Contenedor genérico en línea
Estructura · Patrón / sintaxis<span>Enlazar hoja de estilos externa
Estructura · Patrón / sintaxis<link rel="stylesheet" href="style.css">Enlazar script externo (diferido)
Estructura · Patrón / sintaxis<script src="app.js" defer></script>Plantilla HTML reutilizable (no renderizada)
Estructura · Patrón / sintaxis<template>Seis niveles semánticos de encabezado
Texto · Patrón / sintaxis<h1> to <h6>h1 es el nivel más alto y h6 el más bajo; usa CSS para cambiar el tamaño visual.
Párrafo
Texto · Patrón / sintaxis<p>Hipervínculo
Texto · Patrón / sintaxis<a href="url">Enlace que abre en nueva pestaña (seguro)
Texto · Patrón / sintaxis<a href="url" target="_blank" rel="noopener">Importancia fuerte / atención estilística
Texto · Patrón / sintaxis<strong> / <b>strong marca importancia; b llama la atención sin añadir importancia. Elige según el significado, no por la apariencia en negrita.
Énfasis / voz o término diferenciado
Texto · Patrón / sintaxis<em> / <i>em marca énfasis; i señala texto diferenciado sin ese énfasis. Elige según el significado, no por la apariencia en cursiva.
Salto de línea
Texto · Patrón / sintaxis<br>Línea horizontal / separador temático
Texto · Patrón / sintaxis<hr>Lista desordenada
Texto · Patrón / sintaxis<ul>
<li>Item</li>
</ul>Lista ordenada
Texto · Patrón / sintaxis<ol>
<li>Item</li>
</ol>Cita en bloque
Texto · Patrón / sintaxis<blockquote>Código en línea / texto preformateado
Texto · Patrón / sintaxis<code> / <pre>Texto resaltado
Texto · Patrón / sintaxis<mark>Abreviatura con tooltip
Texto · Patrón / sintaxis<abbr title="Full Text">FT</abbr>Elemento de formulario
Formularios · Patrón / sintaxis<form action="/submit" method="POST">Campo de texto
Formularios · Patrón / sintaxis<input type="text" name="q" placeholder="Search">Campo de email con validación
Formularios · Patrón / sintaxis<input type="email" required>Campo de contraseña (enmascarado)
Formularios · Patrón / sintaxis<input type="password">Campo numérico con rango
Formularios · Patrón / sintaxis<input type="number" min="0" max="100" step="1">Campo de casilla de verificación
Formularios · Patrón / sintaxis<input type="checkbox" checked>Botón de radio (agrupado por nombre)
Formularios · Patrón / sintaxis<input type="radio" name="group" value="a">Seleccionar varios archivos de imagen
Formularios · Patrón / sintaxis<input type="file" accept="image/*" multiple>accept es una sugerencia para el selector, no una validación. Este control selecciona archivos; hace falta enviar un formulario o usar JavaScript para subirlos o procesarlos.
Documento con formulario de contacto accesible
Formularios · Ejemplo completo<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacto</title>
</head>
<body>
<main>
<h1>Contacto</h1>
<form action="/contact" method="post">
<label for="email">Correo electrónico</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<button type="submit">Enviar</button>
</form>
</main>
</body>
</html>Sustituye /contact por un endpoint real. Este ejemplo no recibe ni almacena envíos.
Control deslizante
Formularios · Patrón / sintaxis<input type="range" min="0" max="100">Selector de fecha
Formularios · Patrón / sintaxis<input type="date">Selector de color
Formularios · Patrón / sintaxis<input type="color">Campo de texto multilínea
Formularios · Patrón / sintaxis<textarea rows="4" cols="50"></textarea>Menú desplegable
Formularios · Patrón / sintaxis<select>
<option value="a">A</option>
</select>Etiqueta vinculada al campo por id
Formularios · Patrón / sintaxis<label for="email">Email</label>Botón de enviar
Formularios · Patrón / sintaxis<button type="submit">Send</button>Agrupar elementos de formulario
Formularios · Patrón / sintaxis<fieldset>
<legend>Title</legend>
</fieldset>Sugerencias de autocompletado
Formularios · Patrón / sintaxis<datalist id="opts">
<option value="A">
</datalist>Imagen con carga diferida
Medios · Patrón / sintaxis<img src="img.jpg" alt="Description" loading="lazy">Imagen responsiva con formatos
Medios · Patrón / sintaxis<picture>
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="">
</picture>Vídeo con controles
Medios · Patrón / sintaxis<video src="vid.mp4" controls autoplay muted></video>Reproductor de audio
Medios · Patrón / sintaxis<audio src="audio.mp3" controls></audio>Marco embebido (vídeo, mapas)
Medios · Patrón / sintaxis<iframe src="url" title="Embed"></iframe>Superficie de dibujo para JS
Medios · Patrón / sintaxis<canvas id="c" width="300" height="150"></canvas>Contenedor de gráficos vectoriales escalables
Medios · Patrón / sintaxis<svg viewBox="0 0 100 100">Estructura completa de tabla
Tablas · Patrón / sintaxis<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>John</td></tr>
</tbody>
</table>Encabezado que abarca 2 columnas
Tablas · Patrón / sintaxis<th colspan="2">Celda que abarca 3 filas
Tablas · Patrón / sintaxis<td rowspan="3">Título de tabla (accesibilidad)
Tablas · Patrón / sintaxis<caption>Table Title</caption>Encabezado de página o sección
Semántico · Patrón / sintaxis<header>Enlaces de navegación
Semántico · Patrón / sintaxis<nav>Contenido principal (uno por página)
Semántico · Patrón / sintaxis<main>Contenido independiente
Semántico · Patrón / sintaxis<article>Agrupación temática de contenido
Semántico · Patrón / sintaxis<section>Barra lateral / contenido tangencial
Semántico · Patrón / sintaxis<aside>Pie de página o sección
Semántico · Patrón / sintaxis<footer>Figura con leyenda
Semántico · Patrón / sintaxis<figure>
<img src="" alt="">
<figcaption>Caption</figcaption>
</figure>Detalles desplegables
Semántico · Patrón / sintaxis<details>
<summary>Click to expand</summary>
Hidden content
</details>Diálogo abierto sin modalidad
Semántico · Patrón / sintaxis<dialog open>Non-modal content</dialog>El atributo open muestra un diálogo no modal. Usa showModal() en JavaScript cuando necesites un diálogo modal.
Fecha/hora legible por máquina
Semántico · Patrón / sintaxis<time datetime="2025-01-15">Jan 15</time>Codificación de caracteres
Meta · Patrón / sintaxis<meta charset="UTF-8">Viewport responsivo
Meta · Patrón / sintaxis<meta name="viewport" content="width=device-width, initial-scale=1.0">Descripción SEO
Meta · Patrón / sintaxis<meta name="description" content="Page description">Título Open Graph (redes sociales)
Meta · Patrón / sintaxis<meta property="og:title" content="Title">Directivas para motores de búsqueda
Meta · Patrón / sintaxis<meta name="robots" content="index, follow">Favicon
Meta · Patrón / sintaxis<link rel="icon" href="favicon.ico">URL canónica (evitar duplicados)
Meta · Patrón / sintaxis<link rel="canonical" href="url">Título del documento (mostrado en pestaña)
Meta · Patrón / sintaxis<title>Page Title</title>Guía rápida de HTML — Etiquetas, formularios, elementos semánticos y atributos
Busca patrones HTML por tarea o categoría, cópialos y adáptalos. La mayoría de las entradas muestran sintaxis para un documento existente; el ejemplo completo de formulario incluye estructura, declaración de idioma, etiquetas y un botón de envío. Su URL action es un marcador: necesitas un endpoint o JavaScript para procesar los envíos. El campo de archivos permite seleccionarlos; no los sube por sí solo.
HTML con nombres accesibles y semántica clara
Declara en lang el idioma del contenido para que la tecnología de apoyo pueda elegir la pronunciación adecuada. Asocia cada etiqueta de formulario a su control con valores for e id coincidentes. Describe el propósito de las imágenes informativas y usa alt="" en las puramente decorativas. Si falta alt, un lector de pantalla puede anunciar el nombre del archivo u otra alternativa. Usa los niveles de encabezado para la estructura y CSS para la apariencia. Indica el tipo del botón: type="button" para una acción independiente o type="submit" para enviar un formulario. Un diálogo con open no es modal; showModal() de JavaScript lo abre como modal.
- Etiquetas y patrones agrupados por tarea
- 7 categorías desde estructura hasta metadatos
- Controles habituales y un ejemplo con etiquetas
- Elementos semánticos y atributos de idioma
- Filtros y copia accesibles por teclado
- Resultado de copia y documentación contextual
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·