Estructura Básica de HTML
Todo documento web comienza con una estructura bien definida. En este artículo desglosamos cada componente, añadimos ejemplos listos para copiar y comparamos HTML4 con HTML5.
1. Anatomía de un documento HTML
Un archivo HTML estándar se compone de los siguientes bloques:
<!DOCTYPE ...>: declara el tipo de documento.<html>: raíz del árbol DOM.<head>: metadatos, enlaces a CSS, scripts, etc.<body>: contenido visible para el usuario.
A continuación, el esqueleto mínimo para HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
</body>
</html>2. HTML4 vs HTML5: Principales diferencias
HTML4 (1997)
- Doctype largo y complejo.
- Sin etiquetas semánticas (
<header>,<section>). - Compatibilidad limitada con dispositivos móviles.
- Uso obligatorio de
xmlnsen<html>para XHTML.
HTML5 (2014)
- Doctype simplificado:
<!DOCTYPE html>. - Etiquetas semánticas que mejoran SEO y accesibilidad.
- Soporte nativo de multimedia (
<video>,<audio>). - API modernas:
Canvas,Web Workers,Web Components.
3. Ejemplos prácticos de estructura HTML
3.1 Página simple con cabecera y pie de página
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<header class="bg-primary text-white p-3">
<h1 class="h3 mb-0">Bienvenido a mi sitio</h1>
</header>
<main class="container my-4">
<section>
<h2>Acerca de mí</h2>
<p>Soy desarrollador web con pasión por HTML, CSS y JavaScript.</p>
</section>
</main>
<footer class="bg-light text-center py-3">
© 2025 Mi Nombre. Todos los derechos reservados.
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>3.2 Uso de etiquetas semánticas y accesibilidad
<main role="main" class="container">
<article>
<header>
<h1>Título del artículo</h1>
</header>
<section aria-labelledby="intro">
<h2 id="intro">Introducción</h2>
<p>Texto introductorio con buen contraste y tamaño legible.</p>
</section>
<footer>
<p>Publicado el 13 de noviembre de 2025</p>
</footer>
</article>
</main>4. Buenas prácticas, seguridad y rendimiento
- Declarar el idioma: siempre use
lang="es"(u otro idioma) en la etiqueta<html>para mejorar accesibilidad y SEO. - Meta viewport: esencial para dispositivos móviles (
width=device-width, initial-scale=1). - Encabezados jerárquicos:
<h1>solo una vez por página, luego<h2>,<h3>… - Escapar contenido dinámico: prevenga XSS usando funciones de escape en el servidor (p. ej.,
htmlspecialchars()en PHP). - Minimizar el HTML: elimine comentarios y espacios en producción; herramientas como
html-minifierpueden automatizarlo. - Lazy‑loading de imágenes: añada
loading="lazy"para ahorrar ancho de banda. - Integridad de scripts: use
integrityycrossoriginen<script>externos para evitar manipulación.
5. Solución de problemas comunes
| Problema | Causa típica | Solución |
|---|---|---|
| El CSS no se aplica | Ruta incorrecta o <link> fuera del <head> | Verifique la URL y coloque el enlace dentro de <head>. |
| Los caracteres especiales aparecen como símbolos | Codificación incorrecta | Asegúrese de usar <meta charset="UTF-8"> y que el archivo esté guardado en UTF‑8. |
| La página no se muestra en móviles | Falta de viewport o uso de unidades fijas | Agregue la meta etiqueta viewport y use unidades relativas (rem, vw). |
Estructura Básica de HTML: Guía Completa con Ejemplos Prácticos