Chuleta de HTML y CSS: con buscador, imprimible y con demos | We.Inc
Busca todas las etiquetas HTML y propiedades CSS habituales en una sola hoja: layout semántico, texto, formularios, multimedia, selectores, unidades, layout y estilo visual, con mini demos en vivo y un formato apto para imprimir.
Chuleta de HTML y CSS
Esta hoja recoge las etiquetas HTML y las propiedades CSS que se usan en casi todos los sitios web, agrupadas por función: configuración del documento, layout semántico, texto, listas, multimedia, formularios, selectores, unidades, layout y estilo visual. Escribe en el filtro para encontrar una, abre una mini demo para verla funcionar o pulsa Imprimir para obtener una copia limpia en papel.
Qué contiene la hoja
Parte
Entradas
HTML
CSS
Con demo en vivo
Filtra por palabra clave o cambia entre HTML y CSS, y la lista se reduce mientras escribes. Las entradas con demo abren una pequeña vista previa aislada. El formato de impresión oculta los controles y mantiene la tabla de cada grupo junta en la página.
Escribe una etiqueta, una propiedad o una tarea, por ejemplo table, sticky o email, en el cuadro de filtro.
Limita a HTML o CSS con los botones, o deja ambos activados.
Pulsa Mostrar demo en una entrada para verla renderizada, y Copiar para llevarte la sintaxis.
Pulsa Imprimir para obtener una copia en papel o PDF sin los elementos de la página.
Recurre a un elemento semántico antes que a un div. header, nav, main y footer dan a los lectores de pantalla puntos de referencia sin coste.
Cada control de formulario necesita una etiqueta. El texto placeholder desaparece cuando la gente escribe y no la sustituye.
Empieza cada hoja de estilos con box-sizing: border-box en todo. Así los anchos significan lo que esperas.
Usa rem para tamaños de letra y espaciados que deban seguir la configuración de texto del lector, y px para bordes finos.
Preguntas frecuentes
¿Cuántas etiquetas HTML hay?
El HTML Living Standard define bastante más de cien elementos, pero las páginas del día a día usan unas pocas decenas. Esta hoja cubre los que encontrarás en casi cualquier sitio; MDN mantiene la referencia completa de elementos.
¿Qué diferencia hay entre una etiqueta y un elemento?
Una etiqueta es el marcado que escribes, como <p> o </p>. Un elemento es todo lo que el navegador construye a partir de ella: la etiqueta de apertura, su contenido y la de cierre. Los elementos vacíos como <img> y <br> no tienen etiqueta de cierre.
¿Puedo imprimir esta chuleta?
Sí. El botón Imprimir abre el diálogo de impresión del navegador con un formato que quita el filtro, los botones y las demos y conserva las tablas de sintaxis. Elige Guardar como PDF para tener una copia digital.
¿Aprendo primero CSS o un framework como Tailwind?
Aprende primero las propiedades CSS. Los frameworks de utilidades son atajos para ellas, así que saber que p-4 significa padding: 1rem facilita el framework, y al depurar en las herramientas de desarrollo siempre verás el CSS subyacente.
Cómo se reparten el trabajo HTML y CSS
HTML dice qué es cada parte del contenido: un encabezado, una lista, un campo de formulario, un bloque de navegación. CSS dice cómo se ve y dónde va. Mantenerlos separados permite que una sola hoja de estilos cambie el aspecto de cientos de páginas y que el marcado siga siendo legible para buscadores y tecnologías de apoyo.
Cuando no sepas qué elemento usar, pregúntate cómo se llamaría ese contenido en un documento impreso. Una lista de pasos es un ol, un conjunto de datos es un dl o una table, una nota al margen es un aside.
Cómo leer las reglas CSS
Una regla es un selector seguido de llaves que contienen pares de propiedad y valor separados por punto y coma. Cuando dos reglas apuntan al mismo elemento, gana el selector más específico; si empatan, gana el que aparece más tarde en la hoja de estilos.
Todo junto en una página pequeña
Marcado semántico más unas pocas líneas de CSS
Una cabecera, contenido principal con un formulario y un pie, con estilos hechos con un puñado de propiedades de la hoja.
Primera línea de toda página; activa el modo estándar
Elemento raíz; lang define el idioma de la página
Metadatos, título, enlaces a CSS y scripts
Charset, viewport, descripción y etiquetas para redes sociales
Conecta hojas de estilos, iconos y precargas
Carga JavaScript; defer lo ejecuta tras el análisis
Introducción o barra superior de una página o sección
Un bloque de enlaces de navegación principales
El contenido principal único; uno por página
Un grupo temático de contenido, normalmente con encabezado
Contenido autónomo, como una entrada o la tarjeta de un producto
Contenido relacionado pero secundario, como una barra lateral
Información de cierre: contacto, avisos legales, enlaces
Widget desplegable nativo, sin necesidad de script
Un cuadro de diálogo modal o no modal
Encabezados en orden; lo habitual es un h1 por página
Un párrafo
Importancia y énfasis, en negrita y cursiva por defecto
Texto resaltado
Código en línea y bloques preformateados
Una cita extensa
Abreviatura con su forma completa
Una fecha u hora legible por máquinas
Salto de línea dentro del texto; separación temática entre bloques
Listas no ordenadas y ordenadas
Lista de descripciones con pares de nombre y valor
Datos tabulares con título, cabecera y cuerpo
Celda de encabezado; scope la vincula a su columna o fila
Un enlace; añade target y rel para pestañas nuevas
Una imagen; se esperan alt, width y height
Dirección de arte y formatos alternativos
Contenido multimedia autónomo con pie
Vídeo incrustado
Incrusta otra página
Gráficos vectoriales en línea
Envuelve los campos y los envía
Da nombre a un control; al hacer clic se enfoca el control
Texto, correo, número, fecha, casilla, opción y más
Lista desplegable
Campo de texto de varias líneas
Un botón; define type para evitar envíos accidentales
Agrupa controles relacionados bajo un título
Comprobaciones integradas antes del envío
Selectores de nombre de elemento, clase e ID
Cualquier profundidad frente a solo hijos directos
Hermano siguiente, o cualquier hermano posterior
Coincide según la presencia o el valor de un atributo
Estados de puntero encima y de foco del teclado
Elige elementos por su posición
Coincidencia con el padre y agrupación de selectores
Contenido generado antes o después de un elemento
Píxel CSS absoluto
Relativo al tamaño de letra raíz / al tamaño de letra del elemento
Relativo al padre (la dimensión depende de la propiedad)
Unidades de viewport; dvh tiene en cuenta las barras de herramientas móviles
Ancho del glifo 0, útil para la longitud de línea
Parte del espacio libre en un grid
Valor fluido entre un mínimo y un máximo
El ancho incluye relleno y borde
Espacio fuera y dentro del borde
Cómo participa la caja en el layout
Filas o columnas en una dimensión
Filas y columnas en dos dimensiones
Saca una caja del flujo normal o la fija dentro de él
Orden de apilamiento de los elementos posicionados
Qué pasa con el contenido que no cabe
Estilos para un tamaño de pantalla o una preferencia
Color del texto y fondo
Grosor, tamaño, interlineado y familia en una línea
Contorno y esquinas redondeadas
Sombra alrededor de la caja
Transparencia de todo el elemento
Mover, rotar, escalar o inclinar sin afectar al layout
Anima los cambios entre estados
Propiedades personalizadas (variables CSS)
Documento
Layout semántico
Texto
Listas y tablas
Multimedia y enlaces
Formularios
Selectores
Unidades
Caja y layout
Visual
Copiar
Ocultar demo
Mostrar demo
Demo: {name}
La chuleta
Imprimir
Filtro
p. ej. form, sticky, rem
Lenguaje
Todos
{n} de {total} entradas
Chuleta de {group}
Etiqueta o propiedad
Sintaxis
Qué hace
Acciones
No hay coincidencias. Prueba con una palabra más corta.