tumundoweb
1. Qué es el HTML semántico (y por qué importa)
HTML semántico significa usar cada etiqueta para lo que significa, no por cómo se ve. <header> es encabezado, <nav> navegación, <article> contenido independiente. Google y los lectores de pantalla usan esas pistas para entender tu página.
💡 Regla de oro: si puedes reemplazar un
<div> por una etiqueta con significado sin romper nada, hazlo.2. Estructura base que siempre funciona
Copia esta plantilla. Es la que usamos en este mismo sitio:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mi página · MiSitio</title>
<meta name="description" content="Qué ofrece esta página en 150 caracteres">
</head>
<body>
<header><nav>...</nav></header>
<main>
<article>
<h1>Título único por página</h1>
<section>...</section>
</article>
</main>
<footer>...</footer>
</body>
</html>| Etiqueta | Úsala para | No la uses para |
|---|---|---|
h1–h3 | Jerarquía real del contenido (un solo h1) | Hacer texto grande (eso es CSS) |
article | Pieza que tendría sentido sola (post, tarjeta) | Envolver cualquier div |
section | Bloque temático con su encabezado | Estilizar sin tema propio |
figure | Imagen + pie (figcaption) | Imágenes decorativas |
3. Los 5 errores que vemos en el 90% de webs
- Varios h1 por página. Solo uno. El resto h2/h3 en orden.
- Divitis: todo con divs. Cambia a header/main/footer/nav.
- Imágenes sin alt.
alt=""si es decorativa, descriptivo si aporta. - Botones con div o a. Si hace una acción usa
<button>. - Sin lang ni viewport. Rompe traducción y móvil.
4. Formularios accesibles en 3 pasos
<form>
<label for="email">Tu email</label>
<input id="email" name="email" type="email" required autocomplete="email">
<button>Suscribirme</button>
</form>Cada input necesita su label conectado por for/id, tipo correcto (email, tel) y atributo required cuando aplique. Eso activa el teclado correcto en móvil y la validación gratis del navegador.
5. Checklist final ✅
- Un solo h1, jerarquía sin saltos
- lang="es", viewport y title únicos
- Imágenes con alt correcto
- Formulario con labels conectados
- Valida en validator.w3.org sin errores
6. Preguntas frecuentes
¿Puedo usar divs a veces?
Sí. Div para agrupar sin significado y span para texto en línea siguen siendo válidos.
¿El HTML afecta al SEO?
Mucho. Una jerarquía clara ayuda a Google a extraer títulos, FAQs y fragmentos destacados.
