▶ 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 lang="es">
Elemento raíz. Envuelve absolutamente todo el
documento. El atributo lang ayuda al SEO y
lectores de pantalla.
<head>
Zona invisible. Contiene metadatos, título, links
a CSS y scripts. El usuario no lo ve.
<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 y
en resultados de Google.
<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 con rel="stylesheet".
<style>
Escribir CSS directamente dentro del HTML (CSS
interno).
<script>
Escribir o conectar archivos JavaScript.
Recomendado al final del body o con defer.
▶ 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 fuera de contexto.
<aside>
Contenido lateral o secundario: banners, datos
extra, sidebar.
<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. Agrega margen automático arriba
y abajo.
<strong>
Texto en negrita con énfasis semántico
(importancia).
<em>
Texto en cursiva con énfasis semántico (énfasis de
pronunciación).
<br> vacía
Salto de línea. Usar con moderación, no para
crear espaciado.
<hr> vacía
Línea horizontal divisoria. Separador temático
entre secciones.
<blockquote>
Cita en bloque. Contenido citado de otra fuente.
Agrega indentación.
<code>
Fragmento de código inline. Muestra en fuente
monoespaciada.
<pre>
Texto preformateado. Respeta espacios y saltos de
línea tal cual.
▶ 5. Multimedia y Enlaces
<a> clave
Enlace. Atributo href define el destino.
target="_blank" abre en nueva pestaña (usar con
rel="noopener").
<img> vacía
clave
Imagen. src = URL, alt = texto
alternativo (obligatorio para accesibilidad).
<video>
Video embebido. Usa atributos: src,
controls, autoplay,
loop, muted.
<audio>
Audio embebido. Mismos atributos que video.
controls muestra el reproductor.
<iframe>
Incrusta contenido externo: YouTube, Google Maps, etc. Atributo
src = URL a cargar.
<figure>
Contenedor semántico para media (imagen, diagrama, bloque de
código).
<figcaption>
Pie/descripción de un <figure>. Va como
primer o último hijo.
▶ 6. Listas
<ul>
Lista desordenada (viñetas/puntos). Sus hijos
directos son <li>.
<ol>
Lista ordenada (numerada). Atributo
start define el número inicial.
<li> clave
Ítem de lista. Va siempre dentro de <ul> o
<ol>.
<dl>
Lista de definiciones. Para glosarios y pares
término-descripción.
<dt>
Término a definir. Va dentro de <dl>.
<dd>
Definición del término. Va después del <dt>
correspondiente.
▶ 7. Formularios
<form>
Contenedor del formulario. Atributos: action (URL
destino) y method (GET/POST).
<input> vacía
clave
Campo de entrada. type: text, email, password,
number, checkbox, radio, file, submit, date.
<label> clave
Etiqueta descriptiva de un input. Usa for + el
id del input para asociarlos.
<textarea>
Campo de texto multilínea. Atributos útiles:
rows, cols,
placeholder.
<select>
Menú desplegable. Sus hijos son <option>.
Con multiple permite selección múltiple.
<option>
Opción dentro de un <select>. Atributo
value = el dato enviado al servidor.
<button> clave
type="submit" envía el form.
type="button" solo dispara eventos JS.
<fieldset>
Agrupa campos relacionados. Agrega un borde
visual al grupo.
<legend>
Título del <fieldset>. Siempre va como
primer hijo.
▶ 8. Atributos Importantes
id clave
Identificador único en toda la página. Para CSS
con #id y JS con getElementById.
class clave
Asigna una o varias clases CSS. Múltiples clases
separadas por espacios.
href
URL destino en <a> y <link>. Puede
ser URL absoluta, ruta relativa o #id.
src
URL del recurso en <img>, <script>,
<video> y <audio>.
alt
Texto alternativo para <img>. Obligatorio
para accesibilidad y SEO.
type
Tipo de <input> o <button>. Define el
comportamiento y la validación.
placeholder
Texto de ayuda en inputs vacíos. Desaparece al
empezar a escribir.
disabled
Desactiva el elemento. No recibe clics ni
interacciones. Solo necesita su nombre.
required
Campo obligatorio en formularios. El form no se
envía si está vacío.
target="_blank"
En <a>: abre en nueva pestaña. Combinar
siempre con rel="noopener noreferrer".
data-*
Atributo personalizado. Guarda datos extra. Ej:
data-id="42". Accesible con JS.