Cheat Sheet completa de HTML
Esta cheat sheet de HTML es tu guía de referencia rápida para dominar el lenguaje de marcado más fundamental de la web. Desde estructura básica hasta elementos semánticos modernos, aquí encontrarás todo lo esencial con ejemplos claros y prácticos.
Estructura básica
Todo documento HTML debe tener una estructura básica que define la página y sus metadatos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción de la página">
<meta name="keywords" content="html, web, desarrollo">
<meta name="author" content="Tu nombre">
<title>Título de la página</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Contenido de la página -->
<script src="script.js"></script>
</body>
</html>Elementos clave:
<!DOCTYPE html>- Define el tipo de documento como HTML5<html lang="es">- Elemento raíz con idioma especificado<head>- Metadatos que no se muestran en la página<body>- Contenido visible de la página
Metaetiquetas
Las metaetiquetas proporcionan información sobre el documento para navegadores y motores de búsqueda.
<!-- META BÁSICOS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción clara y concisa de la página">
<meta name="keywords" content="palabra1, palabra2, palabra3">
<meta name="author" content="Nombre del autor">
<!-- META PARA SEO -->
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<link rel="canonical" href="https://ejemplo.com/pagina">
<!-- META PARA REDES SOCIALES (Open Graph) -->
<meta property="og:title" content="Título para redes sociales">
<meta property="og:description" content="Descripción para compartir">
<meta property="og:image" content="https://ejemplo.com/imagen.jpg">
<meta property="og:url" content="https://ejemplo.com">
<meta property="og:type" content="website">
<!-- META PARA TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título para Twitter">
<meta name="twitter:description" content="Descripción para Twitter">
<meta name="twitter:image" content="https://ejemplo.com/imagen.jpg">
<!-- META PARA MÓVILES -->
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">Encabezados y texto
Los encabezados estructuran el contenido jerárquicamente, mientras las etiquetas de texto dan formato y significado.
<!-- ENCABEZADOS (H1-H6) -->
<h1>Encabezado principal (solo uno por página)</h1>
<h2>Encabezado de sección</h2>
<h3>Encabezado de subsección</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
<!-- PÁRRAFOS Y TEXTO -->
<p>Este es un párrafo normal de texto.</p>
<!-- FORMATO DE TEXTO -->
<strong>Texto importante (negrita semántica)</strong>
<b>Texto en negrita (solo visual)</b>
<em>Texto enfatizado (cursiva semántica)</em>
<i>Texto en cursiva (solo visual)</i>
<mark>Texto destacado</mark>
<small>Texto pequeño</small>
<del>Texto eliminado</del>
<ins>Texto insertado</ins>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<!-- CITAS -->
<blockquote cite="https://fuente.com">
Cita larga que se muestra en bloque separado.
</blockquote>
<q cite="https://fuente.com">Cita corta integrada en el texto.</q>
<cite>Título de una obra o fuente</cite>
<!-- CÓDIGO -->
<code>console.log('Código inline')</code>
<pre>
Texto preformateado
que mantiene espacios
y saltos de línea
</pre>
<kbd>Ctrl + C</kbd> <!-- Teclas del teclado -->
<samp>Salida de ejemplo</samp> <!-- Salida de programa -->
<var>variable</var> <!-- Variables -->
<!-- ABREVIACIONES -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- DIRECCIÓN -->
<address>
Escrito por <a href="mailto:autor@ejemplo.com">Autor</a><br>
Calle Falsa 123, Ciudad
</address>Enlaces y navegación
Los enlaces conectan páginas y recursos, siendo fundamentales para la navegación web.
<!-- ENLACES BÁSICOS -->
<a href="https://ejemplo.com">Enlace externo</a>
<a href="pagina.html">Enlace interno</a>
<a href="../carpeta/archivo.html">Enlace relativo</a>
<a href="/">Enlace a la raíz del sitio</a>
<!-- ENLACES CON ATRIBUTOS -->
<a href="https://ejemplo.com" target="_blank" rel="noopener">
Abrir en nueva pestaña
</a>
<a href="https://ejemplo.com" title="Descripción del enlace">
Enlace con tooltip
</a>
<a href="https://ejemplo.com" download="archivo.pdf">
Descargar archivo
</a>
<!-- ENLACES A SECCIONES -->
<a href="#seccion1">Ir a sección 1</a>
<a href="#top">Ir arriba</a>
<!-- ENLACES DE CONTACTO -->
<a href="mailto:correo@ejemplo.com">Enviar email</a>
<a href="mailto:correo@ejemplo.com?subject=Asunto&body=Mensaje">
Email con asunto y cuerpo
</a>
<a href="tel:+34123456789">Llamar teléfono</a>
<a href="sms:+34123456789">Enviar SMS</a>
<!-- NAVEGACIÓN -->
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-nosotros">Sobre nosotros</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<!-- BREADCRUMBS -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/categoria">Categoría</a></li>
<li aria-current="page">Página actual</li>
</ol>
</nav>Listas
Las listas organizan información de manera estructurada y accesible.
<!-- LISTA DESORDENADA -->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>
Elemento con sublista
<ul>
<li>Sub-elemento 1</li>
<li>Sub-elemento 2</li>
</ul>
</li>
<li>Elemento 4</li>
</ul>
<!-- LISTA ORDENADA -->
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
<li>Tercer paso</li>
</ol>
<!-- LISTA ORDENADA CON ATRIBUTOS -->
<ol start="5" type="A">
<li>Elemento A (5)</li>
<li>Elemento B (6)</li>
<li>Elemento C (7)</li>
</ol>
<!-- TIPOS DE NUMERACIÓN -->
<ol type="1">Números: 1, 2, 3...</ol>
<ol type="A">Mayúsculas: A, B, C...</ol>
<ol type="a">Minúsculas: a, b, c...</ol>
<ol type="I">Romanos mayúsculas: I, II, III...</ol>
<ol type="i">Romanos minúsculas: i, ii, iii...</ol>
<!-- LISTA ORDENADA INVERSA -->
<ol reversed>
<li>Último elemento</li>
<li>Penúltimo elemento</li>
<li>Primer elemento</li>
</ol>
<!-- LISTA DE DEFINICIONES -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Lenguaje de programación para web</dd>
<dd>También conocido como JS</dd>
</dl>Imágenes y multimedia
Los elementos multimedia enriquecen el contenido con imágenes, audio y video.
<!-- IMÁGENES BÁSICAS -->
<img src="imagen.jpg" alt="Descripción de la imagen">
<img src="imagen.jpg"
alt="Descripción detallada"
width="300"
height="200"
title="Tooltip de la imagen">
<!-- IMÁGENES RESPONSIVAS -->
<img src="imagen-pequena.jpg"
srcset="imagen-pequena.jpg 480w,
imagen-mediana.jpg 768w,
imagen-grande.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
25vw"
alt="Imagen responsiva">
<!-- ELEMENTO PICTURE -->
<picture>
<source media="(min-width: 768px)" srcset="imagen-desktop.jpg">
<source media="(min-width: 480px)" srcset="imagen-tablet.jpg">
<img src="imagen-movil.jpg" alt="Imagen adaptable">
</picture>
<!-- FORMATOS MODERNOS CON FALLBACK -->
<picture>
<source srcset="imagen.webp" type="image/webp">
<source srcset="imagen.avif" type="image/avif">
<img src="imagen.jpg" alt="Imagen con formatos modernos">
</picture>
<!-- FIGURA CON CAPTION -->
<figure>
<img src="grafico.jpg" alt="Gráfico de ventas 2024">
<figcaption>
Fig. 1 - Evolución de ventas durante 2024
</figcaption>
</figure>
<!-- AUDIO -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Tu navegador no soporta audio HTML5.
</audio>
<!-- AUDIO CON OPCIONES -->
<audio controls autoplay loop muted>
<source src="musica.mp3" type="audio/mpeg">
</audio>
<!-- VIDEO -->
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track kind="subtitles" src="subtitulos-es.vtt" srclang="es" label="Español">
<track kind="subtitles" src="subtitulos-en.vtt" srclang="en" label="English">
Tu navegador no soporta video HTML5.
</video>
<!-- VIDEO CON POSTER Y OPCIONES -->
<video controls
poster="miniatura.jpg"
width="100%"
height="auto"
preload="metadata">
<source src="video.mp4" type="video/mp4">
</video>
<!-- EMBED PARA CONTENIDO EXTERNO -->
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Título del video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>Tablas
Las tablas presentan datos tabulares de forma estructurada y accesible.
<!-- TABLA BÁSICA -->
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>Ana</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
<!-- TABLA COMPLETA CON TODOS LOS ELEMENTOS -->
<table>
<caption>Ventas por trimestre 2024</caption>
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="4" style="background-color: #e0e0e0;">
</colgroup>
<thead>
<tr>
<th scope="col">Producto</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptops</th>
<td>150</td>
<td>200</td>
<td>180</td>
<td>220</td>
</tr>
<tr>
<th scope="row">Móviles</th>
<td>300</td>
<td>350</td>
<td>280</td>
<td>400</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>450</td>
<td>550</td>
<td>460</td>
<td>620</td>
</tr>
</tfoot>
</table>
<!-- CELDAS COMBINADAS -->
<table>
<tr>
<th>Nombre</th>
<th colspan="2">Contacto</th>
</tr>
<tr>
<td>Juan</td>
<td>Email</td>
<td>Teléfono</td>
</tr>
<tr>
<td rowspan="2">Ana</td>
<td>ana@email.com</td>
<td>123-456-789</td>
</tr>
<tr>
<td>ana2@email.com</td>
<td>987-654-321</td>
</tr>
</table>
<!-- TABLA RESPONSIVA -->
<div class="table-container">
<table>
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Stock</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Producto">Laptop Gaming</td>
<td data-label="Precio">$1,299</td>
<td data-label="Stock">15</td>
<td data-label="Acciones">
<button>Editar</button>
<button>Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>Formularios
Los formularios permiten la interacción del usuario y el envío de datos al servidor.
<!-- FORMULARIO BÁSICO -->
<form action="/procesar" method="POST" enctype="multipart/form-data">
<!-- CAMPOS DE TEXTO -->
<div class="form-group">
<label for="nombre">Nombre completo:</label>
<input type="text"
id="nombre"
name="nombre"
required
placeholder="Ingresa tu nombre"
maxlength="50">
</div>
<!-- EMAIL -->
<div class="form-group">
<label for="email">Email:</label>
<input type="email"
id="email"
name="email"
required
placeholder="tu@email.com">
</div>
<!-- CONTRASEÑA -->
<div class="form-group">
<label for="password">Contraseña:</label>
<input type="password"
id="password"
name="password"
required
minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
<small>Mínimo 8 caracteres, incluye mayúscula, minúscula y número</small>
</div>
<!-- NÚMERO -->
<div class="form-group">
<label for="edad">Edad:</label>
<input type="number"
id="edad"
name="edad"
min="18"
max="99"
step="1">
</div>
<!-- FECHA -->
<div class="form-group">
<label for="nacimiento">Fecha de nacimiento:</label>
<input type="date"
id="nacimiento"
name="nacimiento"
min="1950-01-01"
max="2024-12-31">
</div>
<!-- TELÉFONO -->
<div class="form-group">
<label for="telefono">Teléfono:</label>
<input type="tel"
id="telefono"
name="telefono"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
placeholder="123-456-789">
</div>
<!-- URL -->
<div class="form-group">
<label for="website">Sitio web:</label>
<input type="url"
id="website"
name="website"
placeholder="https://ejemplo.com">
</div>
<!-- RADIO BUTTONS -->
<fieldset>
<legend>Género:</legend>
<div>
<input type="radio" id="masculino" name="genero" value="M">
<label for="masculino">Masculino</label>
</div>
<div>
<input type="radio" id="femenino" name="genero" value="F">
<label for="femenino">Femenino</label>
</div>
<div>
<input type="radio" id="otro" name="genero" value="O">
<label for="otro">Otro</label>
</div>
</fieldset>
<!-- CHECKBOXES -->
<fieldset>
<legend>Intereses:</legend>
<div>
<input type="checkbox" id="programacion" name="intereses" value="programacion">
<label for="programacion">Programación</label>
</div>
<div>
<input type="checkbox" id="diseno" name="intereses" value="diseno">
<label for="diseno">Diseño</label>
</div>
<div>
<input type="checkbox" id="marketing" name="intereses" value="marketing">
<label for="marketing">Marketing</label>
</div>
</fieldset>
<!-- SELECT -->
<div class="form-group">
<label for="pais">País:</label>
<select id="pais" name="pais" required>
<option value="">Selecciona un país</option>
<option value="ES">España</option>
<option value="MX">México</option>
<option value="AR">Argentina</option>
<option value="CO">Colombia</option>
</select>
</div>
<!-- SELECT MÚLTIPLE -->
<div class="form-group">
<label for="habilidades">Habilidades:</label>
<select id="habilidades" name="habilidades" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
</select>
</div>
<!-- TEXTAREA -->
<div class="form-group">
<label for="comentarios">Comentarios:</label>
<textarea id="comentarios"
name="comentarios"
rows="4"
cols="50"
placeholder="Escribe tus comentarios aquí..."
maxlength="500"></textarea>
</div>
<!-- ARCHIVO -->
<div class="form-group">
<label for="archivo">Subir CV:</label>
<input type="file"
id="archivo"
name="archivo"
accept=".pdf,.doc,.docx"
multiple>
</div>
<!-- RANGE -->
<div class="form-group">
<label for="experiencia">Años de experiencia:</label>
<input type="range"
id="experiencia"
name="experiencia"
min="0"
max="20"
step="1"
value="5"
oninput="this.nextElementSibling.textContent = this.value">
<output>5</output>
</div>
<!-- COLOR -->
<div class="form-group">
<label for="color-favorito">Color favorito:</label>
<input type="color"
id="color-favorito"
name="color-favorito"
value="#ff0000">
</div>
<!-- BOTONES -->
<div class="form-actions">
<button type="submit">Enviar formulario</button>
<button type="reset">Limpiar</button>
<button type="button" onclick="validarFormulario()">Validar</button>
</div>
</form>
<!-- VALIDACIÓN HTML5 -->
<form novalidate>
<input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}">
<input type="submit" value="Enviar">
</form>HTML semántico
El HTML semántico utiliza elementos que describen claramente su significado y propósito.
<!-- ESTRUCTURA SEMÁNTICA COMPLETA -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página con HTML Semántico</title>
</head>
<body>
<!-- HEADER PRINCIPAL -->
<header role="banner">
<h1>Nombre del Sitio</h1>
<nav role="navigation" aria-label="Navegación principal">
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre">Sobre nosotros</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- CONTENIDO PRINCIPAL -->
<main role="main">
<!-- ARTÍCULO PRINCIPAL -->
<article>
<header>
<h2>Título del artículo</h2>
<p>
Publicado el <time datetime="2024-03-15">15 de marzo de 2024</time>
por <address>Autor del artículo</address>
</p>
</header>
<p>Contenido del artículo...</p>
<section>
<h3>Sección dentro del artículo</h3>
<p>Contenido de la sección...</p>
</section>
<footer>
<p>Tags:
<a href="/tag/html" rel="tag">HTML</a>,
<a href="/tag/semantica" rel="tag">Semántica</a>
</p>
</footer>
</article>
<!-- SECCIÓN INDEPENDIENTE -->
<section id="servicios">
<h2>Nuestros Servicios</h2>
<article>
<h3>Desarrollo Web</h3>
<p>Descripción del servicio...</p>
</article>
<article>
<h3>Diseño UX/UI</h3>
<p>Descripción del servicio...</p>
</article>
</section>
</main>
<!-- BARRA LATERAL -->
<aside role="complementary">
<section>
<h3>Artículos relacionados</h3>
<ul>
<li><a href="/articulo1">Artículo 1</a></li>
<li><a href="/articulo2">Artículo 2</a></li>
</ul>
</section>
<section>
<h3>Newsletter</h3>
<form>
<label for="newsletter-email">Email:</label>
<input type="email" id="newsletter-email" required>
<button type="submit">Suscribirse</button>
</form>
</section>
</aside>
<!-- PIE DE PÁGINA -->
<footer role="contentinfo">
<section>
<h3>Información de contacto</h3>
<address>
<p>Calle Falsa 123, Ciudad</p>
<p>Teléfono: <a href="tel:+34123456789">123 456 789</a></p>
<p>Email: <a href="mailto:info@ejemplo.com">info@ejemplo.com</a></p>
</address>
</section>
<section>
<h3>Enlaces legales</h3>
<nav>
<ul>
<li><a href="/privacidad">Política de privacidad</a></li>
<li><a href="/terminos">Términos de uso</a></li>
<li><a href="/cookies">Política de cookies</a></li>
</ul>
</nav>
</section>
<p><small>© 2024 Empresa. Todos los derechos reservados.</small></p>
</footer>
</body>
</html>
<!-- ELEMENTOS SEMÁNTICOS ADICIONALES -->
<!-- DETALLES COLAPSABLES -->
<details>
<summary>Mostrar más información</summary>
<p>Contenido adicional que se muestra al expandir.</p>
</details>
<!-- MARCAR CONTENIDO -->
<p>
Busca la palabra <mark>importante</mark> en este texto.
</p>
<!-- PROGRESO Y MEDIDOR -->
<label for="progreso">Progreso del proyecto:</label>
<progress id="progreso" value="75" max="100">75%</progress>
<label for="medidor">Nivel de batería:</label>
<meter id="medidor" value="0.8" min="0" max="1" optimum="0.8">80%</meter>
<!-- TEXTO BIDIRECCIONAL -->
<p>Este texto es <bdi>العربية</bdi> en árabe.</p>
<p><bdo dir="rtl">Este texto se lee de derecha a izquierda</bdo></p>
<!-- ELEMENTO DE SALIDA -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="25"> =
<output name="result" for="a b">75</output>
</form>Atributos globales
Los atributos globales pueden usarse en cualquier elemento HTML y proporcionan funcionalidad universal.
<!-- ATRIBUTOS DE IDENTIFICACIÓN -->
<div id="elemento-unico">Elemento con ID único</div>
<div class="clase-css otra-clase">Elemento con clases CSS</div>
<!-- DATOS PERSONALIZADOS -->
<div data-producto-id="123"
data-precio="29.99"
data-categoria="electronicos">
Producto con datos personalizados
</div>
<!-- ACCESIBILIDAD -->
<button aria-label="Cerrar ventana modal"
aria-describedby="descripcion-boton"
tabindex="0">
✕
</button>
<p id="descripcion-boton">Este botón cierra la ventana actual</p>
<img src="grafico.jpg"
alt="Gráfico de ventas"
role="img"
aria-labelledby="titulo-grafico">
<h3 id="titulo-grafico">Evolución de ventas 2024</h3>
<!-- IDIOMA Y DIRECCIÓN -->
<p lang="en">This paragraph is in English</p>
<p lang="fr">Ce paragraphe est en français</p>
<div dir="rtl">نص باللغة العربية</div>
<!-- EDICIÓN Y CONTENIDO -->
<div contenteditable="true">
Este texto se puede editar directamente
</div>
<p spellcheck="false">Testo con verificasion ortografica desabilitada</p>
<div translate="no">
Este contenido no debe traducirse automáticamente
</div>
<!-- OCULTAMIENTO -->
<div hidden>Este contenido está oculto</div>
<!-- ARRASTRE -->
<div draggable="true">Este elemento se puede arrastrar</div>
<!-- TÍTULO Y ESTILOS INLINE -->
<span title="Información adicional al pasar el cursor"
style="color: red; font-weight: bold;">
Texto con tooltip y estilo
</span>
<!-- ORDEN DE TABULACIÓN -->
<input type="text" tabindex="1" placeholder="Primero">
<input type="text" tabindex="3" placeholder="Tercero">
<input type="text" tabindex="2" placeholder="Segundo">
<!-- CONTEXTO DE ENTRADA -->
<input type="text"
inputmode="numeric"
autocomplete="tel"
placeholder="Teléfono">
<input type="text"
autocomplete="email"
placeholder="Email">
<!-- ATRIBUTOS BOOLEANOS -->
<input type="checkbox" checked>
<input type="text" readonly>
<input type="submit" disabled>
<video controls autoplay muted loop></video>
<!-- VALIDACIÓN PERSONALIZADA -->
<input type="text"
pattern="[A-Za-z]{3,}"
title="Mínimo 3 letras"
required>
<!-- AGRUPACIÓN DE FORMULARIO -->
<form id="mi-formulario">
<input type="text" name="nombre">
</form>
<input type="email" form="mi-formulario" name="email">Elementos interactivos
Los elementos interactivos mejoran la experiencia del usuario con funcionalidad dinámica.
<!-- DETALLES Y RESUMEN -->
<details open>
<summary>Información del producto</summary>
<div>
<h4>Especificaciones técnicas</h4>
<ul>
<li>Procesador: Intel i7</li>
<li>Memoria: 16GB RAM</li>
<li>Almacenamiento: 512GB SSD</li>
</ul>
</div>
</details>
<!-- ACORDEÓN CON MÚLTIPLES SECCIONES -->
<div class="acordeon">
<details>
<summary>¿Qué es HTML?</summary>
<p>HTML es el lenguaje de marcado para crear páginas web.</p>
</details>
<details>
<summary>¿Cómo funciona CSS?</summary>
<p>CSS define el estilo y la presentación del HTML.</p>
</details>
<details>
<summary>¿Para qué sirve JavaScript?</summary>
<p>JavaScript añade interactividad a las páginas web.</p>
</details>
</div>
<!-- DIÁLOGO MODAL -->
<dialog id="mi-modal">
<form method="dialog">
<h3>Confirmar acción</h3>
<p>¿Estás seguro de que quieres continuar?</p>
<div>
<button type="submit" value="si">Sí, continuar</button>
<button type="submit" value="no">Cancelar</button>
</div>
</form>
</dialog>
<button onclick="document.getElementById('mi-modal').showModal()">
Abrir modal
</button>
<!-- MENÚ CONTEXTUAL -->
<div contextmenu="menu-opciones">
Haz clic derecho para ver el menú
</div>
<menu type="context" id="menu-opciones">
<menuitem label="Copiar" onclick="copiar()"></menuitem>
<menuitem label="Pegar" onclick="pegar()"></menuitem>
<hr>
<menuitem label="Eliminar" onclick="eliminar()"></menuitem>
</menu>
<!-- BOTONES AVANZADOS -->
<button type="button"
onclick="toggle()"
aria-pressed="false"
aria-label="Activar modo oscuro">
🌙 Modo oscuro
</button>
<!-- ELEMENTOS CON ESTADO -->
<input type="checkbox"
id="notificaciones"
onchange="toggleNotifications(this.checked)">
<label for="notificaciones">Recibir notificaciones</label>
<!-- CAMPO DE BÚSQUEDA -->
<form role="search">
<input type="search"
placeholder="Buscar en el sitio..."
list="sugerencias"
autocomplete="off">
<datalist id="sugerencias">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Accesibilidad">
</datalist>
<button type="submit" aria-label="Buscar">🔍</button>
</form>
<!-- PROGRESO INTERACTIVO -->
<div>
<label for="subida">Progreso de subida:</label>
<progress id="subida" value="0" max="100">0%</progress>
<button onclick="simularSubida()">Iniciar subida</button>
</div>
<!-- NAVEGACIÓN CON TABS -->
<div role="tablist">
<button role="tab"
aria-selected="true"
aria-controls="panel1"
id="tab1">
Pestaña 1
</button>
<button role="tab"
aria-selected="false"
aria-controls="panel2"
id="tab2">
Pestaña 2
</button>
</div>
<div role="tabpanel"
id="panel1"
aria-labelledby="tab1">
Contenido de la pestaña 1
</div>
<div role="tabpanel"
id="panel2"
aria-labelledby="tab2"
hidden>
Contenido de la pestaña 2
</div>Accesibilidad
La accesibilidad garantiza que el contenido sea usable por personas con diferentes capacidades.
<!-- ESTRUCTURA SEMÁNTICA PARA LECTORES DE PANTALLA -->
<header role="banner">
<nav role="navigation" aria-label="Navegación principal">
<ul>
<li><a href="#main" class="skip-link">Saltar al contenido</a></li>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
</ul>
</nav>
</header>
<main role="main" id="main">
<h1>Título principal</h1>
<!-- LANDMARKS -->
<section aria-labelledby="productos-titulo">
<h2 id="productos-titulo">Nuestros Productos</h2>
<p>Catálogo de productos disponibles...</p>
</section>
</main>
<!-- IMÁGENES ACCESIBLES -->
<img src="grafico-ventas.jpg"
alt="Gráfico de barras que muestra un aumento del 25% en ventas durante el último trimestre"
longdesc="descripcion-grafico.html">
<!-- Imagen decorativa -->
<img src="decoracion.jpg" alt="">
<!-- ENLACES DESCRIPTIVOS -->
<a href="/manual.pdf"
aria-describedby="pdf-info">
Descargar manual de usuario
</a>
<span id="pdf-info" class="sr-only">Archivo PDF, 2.5MB</span>
<!-- FORMULARIOS ACCESIBLES -->
<form>
<fieldset>
<legend>Información personal</legend>
<div class="form-group">
<label for="nombre-completo">
Nombre completo <span aria-label="obligatorio">*</span>
</label>
<input type="text"
id="nombre-completo"
name="nombre"
required
aria-describedby="nombre-ayuda nombre-error">
<div id="nombre-ayuda" class="help-text">
Ingresa tu nombre y apellidos
</div>
<div id="nombre-error" class="error-message" aria-live="polite">
<!-- Mensajes de error aparecen aquí -->
</div>
</div>
<div class="form-group">
<label for="fecha-nacimiento">Fecha de nacimiento</label>
<input type="date"
id="fecha-nacimiento"
name="fecha_nacimiento"
aria-describedby="fecha-formato">
<div id="fecha-formato" class="help-text">
Formato: DD/MM/AAAA
</div>
</div>
</fieldset>
</form>
<!-- BOTONES Y CONTROLES -->
<button aria-expanded="false"
aria-controls="menu-desplegable"
onclick="toggleMenu()">
Menú
<span aria-hidden="true">▼</span>
</button>
<ul id="menu-desplegable" hidden>
<li><a href="/opcion1">Opción 1</a></li>
<li><a href="/opcion2">Opción 2</a></li>
</ul>
<!-- LIVE REGIONS -->
<div aria-live="polite"
aria-atomic="true"
id="mensajes-estado">
<!-- Mensajes de estado aparecen aquí -->
</div>
<div aria-live="assertive"
id="alertas-importantes">
<!-- Alertas críticas aparecen aquí -->
</div>
<!-- TABLAS ACCESIBLES -->
<table role="table">
<caption>
Ventas mensuales por región
<details>
<summary>Descripción de la tabla</summary>
<p>Esta tabla muestra las ventas de cada región organizadas por mes...</p>
</details>
</caption>
<thead>
<tr>
<th scope="col" id="mes">Mes</th>
<th scope="col" id="norte">Región Norte</th>
<th scope="col" id="sur">Región Sur</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" headers="mes">Enero</th>
<td headers="enero norte">$15,000</td>
<td headers="enero sur">$12,000</td>
</tr>
</tbody>
</table>
<!-- CONTENIDO OCULTO PARA LECTORES DE PANTALLA -->
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
</style>
<button>
<span class="sr-only">Agregar producto </span>
<span>Laptop Gaming</span>
<span class="sr-only"> al carrito</span>
🛒
</button>
<!-- NAVEGACIÓN POR TECLADO -->
<div role="application"
tabindex="0"
onkeydown="handleKeyDown(event)"
aria-label="Reproductor de música">
<button tabindex="-1" aria-label="Reproducir">▶️</button>
<button tabindex="-1" aria-label="Pausar">⏸️</button>
<button tabindex="-1" aria-label="Siguiente">⏭️</button>
</div>Mejores prácticas
Directrices esenciales para escribir HTML de alta calidad, mantenible y accesible.
<!-- ✅ ESTRUCTURA CORRECTA -->
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Meta charset siempre primero -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO básico -->
<title>Título descriptivo (50-60 caracteres)</title>
<meta name="description" content="Descripción clara (150-160 caracteres)">
<!-- CSS antes que JavaScript cuando sea posible -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenido aquí -->
<!-- JavaScript al final del body -->
<script src="scripts.js"></script>
</body>
</html>
<!-- ✅ SEMÁNTICA CORRECTA -->
<!-- BIEN: Usar elementos por su significado -->
<article>
<header>
<h1>Título del artículo</h1>
<time datetime="2024-03-15">15 de marzo de 2024</time>
</header>
<p>Contenido del artículo...</p>
</article>
<!-- MAL: Usar divs para todo -->
<div class="article">
<div class="header">
<div class="title">Título del artículo</div>
<div class="date">15 de marzo de 2024</div>
</div>
<div class="content">Contenido del artículo...</div>
</div>
<!-- ✅ JERARQUÍA DE ENCABEZADOS -->
<!-- BIEN: Jerarquía lógica -->
<h1>Título principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>
<h3>Otra subsección</h3>
<h2>Otra sección</h2>
<!-- MAL: Saltar niveles -->
<h1>Título principal</h1>
<h4>Título pequeño</h4> <!-- ❌ Salta del h1 al h4 -->
<!-- ✅ ATRIBUTOS ALT EN IMÁGENES -->
<!-- BIEN: Alt descriptivo -->
<img src="perro-corriendo.jpg" alt="Perro golden retriever corriendo en el parque">
<!-- BIEN: Alt vacío para imágenes decorativas -->
<img src="decoracion.jpg" alt="">
<!-- MAL: Alt genérico o faltante -->
<img src="imagen1.jpg" alt="imagen"> <!-- ❌ No descriptivo -->
<img src="imagen2.jpg"> <!-- ❌ Sin alt -->
<!-- ✅ FORMULARIOS ACCESIBLES -->
<!-- BIEN: Labels asociadas correctamente -->
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<!-- MAL: Labels no asociadas -->
<label>Correo electrónico:</label>
<input type="email" name="email"> <!-- ❌ Sin id asociada -->
<!-- ✅ ENLACES DESCRIPTIVOS -->
<!-- BIEN: Texto descriptivo -->
<a href="/manual.pdf">Descargar manual de usuario (PDF, 2MB)</a>
<!-- MAL: Texto genérico -->
<a href="/manual.pdf">Haz clic aquí</a> <!-- ❌ No descriptivo -->
<!-- ✅ VALIDACIÓN Y LIMPIEZA -->
<!-- BIEN: HTML válido -->
<p>Párrafo correctamente cerrado.</p>
<img src="imagen.jpg" alt="Descripción">
<!-- MAL: HTML inválido -->
<p>Párrafo sin cerrar
<img src="imagen.jpg"> <!-- ❌ Sin alt y mal formado -->
<!-- ✅ PERFORMANCE -->
<!-- BIEN: Optimización de imágenes -->
<picture>
<source srcset="imagen.webp" type="image/webp">
<source srcset="imagen.avif" type="image/avif">
<img src="imagen.jpg"
alt="Descripción"
width="400"
height="300"
loading="lazy">
</picture>
<!-- BIEN: Precargar recursos críticos -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<!-- ✅ SEGURIDAD -->
<!-- BIEN: Enlaces externos seguros -->
<a href="https://ejemplo.com"
target="_blank"
rel="noopener noreferrer">
Enlace externo
</a>
<!-- BIEN: Validación de entrada -->
<input type="email"
pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}"
required
title="Ingresa un email válido">
<!-- ✅ CÓDIGO LIMPIO -->
<!-- BIEN: Indentación consistente y comentarios útiles -->
<article>
<header>
<h1>Título</h1>
<!-- Información del autor -->
<address>Por: Autor</address>
</header>
<section>
<!-- Contenido principal -->
<p>Texto del artículo...</p>
</section>
</article>
<!-- ✅ RESPONSIVE DESIGN -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BIEN: Imágenes responsivas -->
<img src="imagen-small.jpg"
srcset="imagen-small.jpg 480w,
imagen-medium.jpg 768w,
imagen-large.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Imagen responsiva">
<!-- ✅ TESTING Y VALIDACIÓN -->
<!-- Usar herramientas de validación: -->
<!-- - W3C Markup Validator -->
<!-- - WAVE Web Accessibility Evaluator -->
<!-- - Lighthouse (Chrome DevTools) -->
<!-- - axe DevTools -->🎯 Resumen
Esta cheat sheet de HTML cubre todos los elementos fundamentales para crear páginas web modernas y accesibles:
- Estructura básica - DOCTYPE, head, body y metaetiquetas esenciales
- Contenido - Encabezados, texto, listas y elementos semánticos
- Multimedia - Imágenes, audio, video con soporte responsivo
- Interactividad - Formularios completos, botones y elementos interactivos
- Accesibilidad - ARIA, navegación por teclado y lectores de pantalla
- Mejores prácticas - Código limpio, performance y seguridad
¡HTML es la base de toda la web. Domina estos elementos y podrás crear sitios web robustos, accesibles y bien estructurados!