📄 Cheat Sheet HTML

Las etiquetas más importantes — qué son y para qué sirven

▶ 1. Estructura básica
<!DOCTYPE html> vacía Declara el tipo de documento. Siempre va en la línea 1. Le dice al navegador que es HTML5.
<html> Elemento raíz. Envuelve absolutamente todo el documento.
<head> Zona invisible. Contiene metadatos, títulos, links a CSS y scripts.
<body> Todo lo que el usuario ve y toca en la página va aquí.
▶ 2. Metadatos (dentro del <head>)
<title> Texto que aparece en la pestaña del navegador.
<meta> vacía Configuración extra: charset, viewport, descripción SEO. Ej: charset="UTF-8".
<link> vacía Conecta archivos externos, principalmente hojas de estilos CSS.
<style> Escribir CSS directamente dentro del HTML (interno).
<script> Escribir o conectar archivos JavaScript.
▶ 3. Semántica — Organización
<header> Encabezado de la página o sección (logo, título, nav).
<nav> Menú de navegación principal del sitio.
<main> Contenido principal y único de la página. Solo uno por página.
<section> Agrupa contenido relacionado por tema dentro de main.
<article> Contenido independiente: post, noticia, tarjeta. Funciona solo.
<aside> Contenido lateral o secundario: banners, datos extra.
<footer> Pie de página: legales, redes sociales, copyright.
<div> ★ clave Contenedor genérico de bloque. Sin significado propio. Para agrupar y aplicar CSS.
<span> Contenedor genérico en línea. Para aplicar estilos a texto puntual.
▶ 4. Texto
<h1> … <h6> ★ clave Títulos de jerarquía. H1 = más importante (uno por página), H6 = el menor.
<p> ★ clave Párrafo de texto normal. Agrega espacio arriba y abajo automáticamente.
<strong> Negrita con significado de importancia semántica.
<em> Cursiva con énfasis semántico.
<br> vacía Salto de línea simple dentro del texto. No crea párrafo.
<hr> vacía Línea horizontal separadora de contenido.
<blockquote> Cita larga o extracto de otra fuente. Tiene indentación visual propia.
▶ 5. Multimedia y enlaces
<a> ★ clave Enlace / hipervínculo. Atributo href define el destino. Puede abrir nueva pestaña con target="_blank".
<img> vacía ★ clave Muestra una imagen. Atributos obligatorios: src (ruta) y alt (texto alternativo).
<video> Reproduce un video directamente en la página. Atributos: src, controls, autoplay.
<audio> Reproduce audio. Mismos atributos que video.
<iframe> Incrusta otra página web, mapa de Google Maps o video de YouTube dentro de la tuya.
▶ 6. Listas
<ul> Lista desordenada (puntos/viñetas). Los hijos son <li>.
<ol> Lista ordenada (1, 2, 3…). Los hijos son <li>.
<li> ★ clave Cada ítem de una lista ul o ol.
▶ 7. Tablas
<table> Contenedor principal que envuelve toda la tabla.
<tr> Fila (table row). Dentro van <th> o <td>.
<th> Celda de encabezado. Texto en negrita y centrado por defecto.
<td> Celda de datos normal.
▶ 8. Formularios
<form> Envuelve todos los campos del formulario. Atributo action define a dónde envía.
<input> vacía ★ clave Campo de entrada. El type define qué es: text, email, password, checkbox, radio, submit…
<label> Etiqueta descriptiva de un input. Con for="id" lo vincula.
<textarea> Caja de texto multilínea. Para comentarios o mensajes largos.
<select> Menú desplegable. Sus hijos son <option>.
<option> Cada opción dentro de un <select>.
<button> ★ clave Botón clickeable. type="submit" envía el form. Puede contener texto o íconos.