Hoja de Trucos de HTML
Última actualización
Estructura del documento
Cada página HTML comienza con este esqueleto.
| Elemento | Qué hace |
|---|---|
<!DOCTYPE html> | Declara el documento como HTML5 (primera línea) |
<html lang="en"> | Elemento raíz; lang establece el idioma |
<head> | Metadatos: título, enlaces, scripts; no se muestra en la página |
<meta charset="UTF-8"> | Codificación de caracteres (inclúyela siempre) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Escalado responsivo en móvil |
<title> | Título de la página que aparece en la pestaña del navegador y en los resultados de búsqueda |
<body> | Aquí va todo lo visible en la página |
Texto y encabezados
| Elemento | Qué hace |
|---|---|
<h1> … <h6> | Encabezados, <h1> el más importante (uno por página) |
<p> | Párrafo de texto |
<br> | Salto de línea (sin etiqueta de cierre) |
<hr> | Separador temático / línea horizontal |
<strong> | Texto importante (negrita) |
<em> | Texto enfatizado (cursiva) |
<span> | Contenedor en línea para dar estilo a un fragmento de texto |
<code> | Código en línea |
<pre> | Texto preformateado (conserva los espacios en blanco) |
<blockquote> | Bloque de texto citado |
Enlaces e imágenes
| Elemento | Sintaxis |
|---|---|
| Enlace | <a href="https://coddy.tech">Coddy</a> |
| Abrir en una pestaña nueva | <a href="..." target="_blank" rel="noopener"> |
| Ancla (saltar a un id) | <a href="#section">Jump</a> |
| Imagen | <img src="cat.png" alt="A cat" width="200"> |
| Imagen responsiva | <img src="..." srcset="..." sizes="..."> |
| Figura con leyenda | <figure><img ...><figcaption>…</figcaption></figure> |
Listas
| Elemento | Qué hace |
|---|---|
<ul> | Lista no ordenada (con viñetas) |
<ol> | Lista ordenada (numerada) |
<li> | Elemento de lista (dentro de <ul> o <ol>) |
<dl> | Lista de descripciones |
<dt> / <dd> | Término de la descripción / detalle de la descripción |
Tablas
| Elemento | Qué hace |
|---|---|
<table> | Contenedor de tabla |
<thead> / <tbody> / <tfoot> | Grupos de encabezado, cuerpo y pie de la tabla |
<tr> | Fila de la tabla |
<th> | Celda de encabezado (negrita, centrada) |
<td> | Celda de datos |
colspan / rowspan | Combina celdas entre columnas / filas |
Formularios y campos de entrada
Los componentes básicos de cualquier formulario que recopila datos.
| Elemento | Sintaxis / propósito |
|---|---|
| Formulario | <form action="/submit" method="post"> |
| Campo de texto | <input type="text" name="q" placeholder="Search"> |
| Correo / contraseña | <input type="email">, <input type="password"> |
| Casilla / botón de opción | <input type="checkbox">, <input type="radio"> |
| Número / fecha | <input type="number">, <input type="date"> |
| Etiqueta | <label for="q">Search</label> |
| Multilínea | <textarea rows="4"></textarea> |
| Desplegable | <select><option>One</option></select> |
| Botón | <button type="submit">Send</button> |
| Campo obligatorio | <input required> |
Etiquetas semánticas y de maquetación
Usa estas en lugar de <div>s genéricos para que los navegadores, los lectores de pantalla y los motores de búsqueda entiendan tu página.
| Elemento | Qué marca |
|---|---|
<header> | Parte superior de una página o sección (logo, navegación) |
<nav> | Enlaces de navegación |
<main> | El contenido principal (uno por página) |
<section> | Una agrupación temática de contenido |
<article> | Contenido independiente (publicación, tarjeta) |
<aside> | Barra lateral / contenido tangencial |
<footer> | Parte inferior de una página o sección |
<div> | Contenedor de bloque genérico (sin significado) |
Atributos globales comunes
| Atributo | Qué hace |
|---|---|
id | Identificador único de un elemento |
class | Uno o más nombres de clase (para CSS / JS) |
style | CSS en línea (úsalo con moderación) |
title | Texto de información sobre herramientas al pasar el cursor |
data-* | Atributo de datos personalizado, p. ej. data-id="42" |
hidden | Oculta el elemento |
Cada etiqueta y atributo de HTML que necesitas, agrupados según lo que hacen. Esta hoja de trucos de HTML cubre el esqueleto de la página, el texto y los enlaces, las imágenes y el contenido multimedia, las listas, las tablas, los formularios y las etiquetas semánticas que dan significado a tu marcado.
Todo es HTML5 estándar y funciona en todos los navegadores modernos. Copia una etiqueta o abre el playground de HTML para editarla con una vista previa en vivo, sin necesidad de configuración.
Preguntas frecuentes sobre la hoja de trucos de HTML
¿Esta hoja de trucos de HTML es gratis?
Sí. Esta hoja de trucos de HTML es de uso gratuito y sin registro. Guárdala en favoritos y vuelve cuando necesites consultar una etiqueta o un atributo.
¿Cuál es la diferencia entre <section> y <div>?
<section> es una etiqueta semántica: le indica a los navegadores y a los lectores de pantalla que su contenido es un grupo temático con significado, y normalmente tiene un encabezado. <div> no tiene significado y es solo un contenedor genérico para dar estilo o ejecutar scripts. Recurre a una etiqueta semántica (<section>, <article>, <nav>) cuando encaje, y usa <div> solo cuando ninguna sirva.¿Todas las etiquetas HTML necesitan una etiqueta de cierre?
La mayoría sí (
<p>...</p>), pero unos pocos elementos "vacíos" no la necesitan porque no pueden contener nada: <img>, <br>, <hr>, <input>, <meta> y <link>. En HTML5 puedes escribirlos con o sin la barra final.¿Puedo practicar HTML en línea?
Sí. Abre el playground de HTML para escribir HTML en tu navegador con una vista previa en vivo, sin instalar nada. Cuando quieras estructura, el curso interactivo y gratuito de HTML de Coddy te enseña etiquetas, formularios y maquetación paso a paso.
¿Esta hoja de trucos es buena para principiantes?
Sí. Comienza con el esqueleto de la página y las etiquetas del día a día que usarás primero, y luego pasa a los formularios y al marcado semántico, de modo que puedes usar las secciones de arriba desde el primer día.
Recursos relacionados
Más hojas de referencia
