Aprende la estructura completa de un documento HTML desde DOCTYPE hasta el cierre. Guía detallada con ejemplos prácticos, mejores prácticas y técnicas avanzadas.
La estructura de un documento HTML es la base fundamental sobre la cual se construye toda página web. Comprender esta estructura no solo es esencial para escribir código HTML válido, sino también para crear sitios web accesibles, optimizados para SEO y compatibles con todos los navegadores. En esta guía completa, exploraremos cada componente de la estructura HTML, desde la declaración DOCTYPE hasta el elemento de cierre, con ejemplos prácticos y mejores prácticas.
Un documento HTML bien estructurado sigue un patrón específico que los navegadores esperan encontrar. Aquí está la estructura básica completa:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción de la página">
<title>Título de la Página</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Encabezado Principal</h1>
<nav>
<!-- Navegación -->
</nav>
</header>
<main>
<section>
<!-- Contenido principal -->
</section>
</main>
<footer>
<!-- Pie de página -->
</footer>
<script src="script.js"></script>
</body>
</html>
Analicemos cada componente en detalle.
La declaración DOCTYPE (Document Type Declaration) le dice al navegador qué versión de HTML está utilizando el documento. Es la primera línea de cualquier documento HTML y debe aparecer antes de cualquier otro elemento.
<!DOCTYPE html>
HTML5 (Actual - Recomendado):
<!DOCTYPE html>
HTML 4.01 Strict (Obsoleto):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Strict (Obsoleto):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- ✅ Con DOCTYPE correcto -->
<!DOCTYPE html>
<html>
<head>
<title>Página Moderna</title>
</head>
<body>
<h1>Funciona correctamente</h1>
</body>
</html>
<!-- ❌ Sin DOCTYPE (modo quirks) -->
<html>
<head>
<title>Página Problemática</title>
</head>
<body>
<h1>Puede tener problemas de renderizado</h1>
</body>
</html>
El elemento <html> es el contenedor raíz de todo el documento:
<html lang="es">
<!-- Todo el contenido va aquí -->
</html>
El atributo lang especifica el idioma principal del documento:
<!-- Español -->
<html lang="es">
<!-- Inglés -->
<html lang="en">
<!-- Francés -->
<html lang="fr">
<!-- Alemán -->
<html lang="de">
<!-- Múltiples idiomas (poco común) -->
<html lang="es-ES">
Para idiomas que se leen de derecha a izquierda:
<!-- Árabe -->
<html lang="ar" dir="rtl">
<!-- Hebreo -->
<html lang="he" dir="rtl">
<!-- Idiomas de izquierda a derecha (por defecto) -->
<html lang="es" dir="ltr">
La sección <head> contiene metadatos sobre el documento que no se muestran directamente al usuario pero son cruciales para el navegador, motores de búsqueda y otras herramientas.
<head>
<!-- Codificación de caracteres (DEBE ser lo primero) -->
<meta charset="UTF-8">
<!-- Configuración de viewport para dispositivos móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título de la página (aparece en la pestaña del navegador) -->
<title>Título Descriptivo de la Página</title>
<!-- Descripción para motores de búsqueda -->
<meta name="description" content="Descripción concisa y atractiva de la página">
<!-- Palabras clave (menos importante hoy en día) -->
<meta name="keywords" content="html, estructura, desarrollo web">
<!-- Autor del documento -->
<meta name="author" content="Tu Nombre">
<!-- Configuración de robots de búsqueda -->
<meta name="robots" content="index, follow">
<!-- Open Graph para redes sociales -->
<meta property="og:title" content="Título para Redes Sociales">
<meta property="og:description" content="Descripción para redes sociales">
<meta property="og:image" content="https://ejemplo.com/imagen.jpg">
<meta property="og:url" content="https://ejemplo.com/pagina">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título para Twitter">
<meta name="twitter:description" content="Descripción para Twitter">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Hojas de estilo CSS -->
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap">
<!-- Precargar recursos importantes -->
<link rel="preload" href="fuente-importante.woff2" as="font" type="font/woff2" crossorigin>
<!-- Scripts que deben cargarse en el head -->
<script src="script-critico.js"></script>
</head>
<!-- SIEMPRE debe ser el primer elemento en head -->
<meta charset="UTF-8">
<!-- Otras codificaciones (menos comunes) -->
<meta charset="ISO-8859-1">
<meta charset="UTF-16">
<!-- Configuración estándar para sitios responsivos -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Configuraciones avanzadas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<!-- Para aplicaciones web que no deben hacer zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Buena descripción (150-160 caracteres) -->
<meta name="description" content="Aprende la estructura completa de documentos HTML con ejemplos prácticos, mejores prácticas y técnicas avanzadas para desarrolladores web.">
<!-- ❌ Descripción muy corta -->
<meta name="description" content="HTML tutorial">
<!-- ❌ Descripción muy larga -->
<meta name="description" content="Esta es una descripción extremadamente larga que excede los límites recomendados y probablemente será truncada por los motores de búsqueda, lo cual no es ideal para SEO...">
<!-- CSS externo -->
<link rel="stylesheet" href="estilos.css">
<!-- CSS con media queries -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
<!-- Fuentes web -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Favicon básico -->
<link rel="icon" href="/favicon.ico">
<!-- Favicons modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Manifest para PWA -->
<link rel="manifest" href="/site.webmanifest">
La sección <body> contiene todo el contenido visible de la página web. Aquí es donde se estructura el contenido usando elementos semánticos.
<body>
<!-- Encabezado de la página -->
<header>
<div class="container">
<div class="logo">
<img src="logo.png" alt="Logo de la Empresa">
</div>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<!-- Contenido principal -->
<main>
<!-- Sección hero -->
<section class="hero">
<div class="container">
<h1>Bienvenido a Nuestro Sitio Web</h1>
<p>Descripción atractiva de lo que ofrecemos</p>
<a href="#servicios" class="btn-cta">Ver Servicios</a>
</div>
</section>
<!-- Sección de servicios -->
<section id="servicios" class="servicios">
<div class="container">
<h2>Nuestros Servicios</h2>
<div class="servicios-grid">
<article class="servicio">
<h3>Desarrollo Web</h3>
<p>Creamos sitios web modernos y responsivos</p>
</article>
<article class="servicio">
<h3>Diseño UX/UI</h3>
<p>Diseñamos experiencias de usuario excepcionales</p>
</article>
<article class="servicio">
<h3>SEO</h3>
<p>Optimizamos tu sitio para motores de búsqueda</p>
</article>
</div>
</div>
</section>
<!-- Sección acerca de -->
<section id="acerca" class="acerca">
<div class="container">
<h2>Acerca de Nosotros</h2>
<p>Información sobre la empresa...</p>
</div>
</section>
</main>
<!-- Barra lateral (si es necesaria) -->
<aside class="sidebar">
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
</ul>
</aside>
<!-- Pie de página -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Contacto</h4>
<p>Email: contacto@ejemplo.com</p>
<p>Teléfono: +34 123 456 789</p>
</div>
<div class="footer-section">
<h4>Enlaces Rápidos</h4>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Síguenos</h4>
<div class="social-links">
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="Twitter">Twitter</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Mi Empresa. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<!-- Scripts al final del body para mejor rendimiento -->
<script src="script.js"></script>
</body>
<!-- Header de página -->
<header class="site-header">
<div class="container">
<h1>Nombre del Sitio</h1>
<nav>
<!-- Navegación principal -->
</nav>
</div>
</header>
<!-- Header de artículo -->
<article>
<header>
<h2>Título del Artículo</h2>
<p>Por <span class="author">Juan Pérez</span></p>
<time datetime="2025-09-03">3 de septiembre, 2025</time>
</header>
<!-- Contenido del artículo -->
</article>
<!-- Navegación principal -->
<nav class="main-navigation">
<ul>
<li><a href="/" aria-current="page">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
<!-- Navegación de breadcrumbs -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li aria-current="page">Smartphone XYZ</li>
</ol>
</nav>
<!-- Navegación de paginación -->
<nav aria-label="Paginación">
<ul>
<li><a href="?page=1" aria-label="Página anterior">‹ Anterior</a></li>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2" aria-current="page">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=3" aria-label="Página siguiente">Siguiente ›</a></li>
</ul>
</nav>
<!-- Solo debe haber un elemento main por página -->
<main>
<h1>Contenido Principal de la Página</h1>
<section class="intro">
<h2>Introducción</h2>
<p>Contenido introductorio...</p>
</section>
<section class="content">
<h2>Contenido Principal</h2>
<p>El contenido más importante de la página...</p>
</section>
</main>
<!-- Secciones temáticas -->
<main>
<section class="hero">
<h1>Bienvenido</h1>
<p>Mensaje de bienvenida...</p>
</section>
<section class="features">
<h2>Características</h2>
<div class="feature-grid">
<!-- Características -->
</div>
</section>
<section class="testimonials">
<h2>Testimonios</h2>
<div class="testimonial-list">
<!-- Testimonios -->
</div>
</section>
</main>
<!-- Artículo de blog -->
<article class="blog-post">
<header>
<h1>Título del Artículo</h1>
<p class="meta">
Por <span class="author">María García</span> el
<time datetime="2025-09-03">3 de septiembre, 2025</time>
</p>
</header>
<div class="content">
<p>Contenido del artículo...</p>
<section>
<h2>Subtítulo</h2>
<p>Más contenido...</p>
</section>
</div>
<footer>
<p>Etiquetas:
<a href="/tag/html">HTML</a>,
<a href="/tag/css">CSS</a>
</p>
</footer>
</article>
<!-- Múltiples artículos en una lista -->
<main>
<h1>Blog</h1>
<article class="post-preview">
<h2><a href="/post-1">Primer Artículo</a></h2>
<p>Resumen del primer artículo...</p>
<time datetime="2025-09-01">1 de septiembre, 2025</time>
</article>
<article class="post-preview">
<h2><a href="/post-2">Segundo Artículo</a></h2>
<p>Resumen del segundo artículo...</p>
<time datetime="2025-09-02">2 de septiembre, 2025</time>
</article>
</main>
<!-- Barra lateral con contenido relacionado -->
<aside class="sidebar">
<section class="widget">
<h3>Artículos Populares</h3>
<ul>
<li><a href="#">Artículo Popular 1</a></li>
<li><a href="#">Artículo Popular 2</a></li>
<li><a href="#">Artículo Popular 3</a></li>
</ul>
</section>
<section class="widget">
<h3>Categorías</h3>
<ul>
<li><a href="/categoria/html">HTML (15)</a></li>
<li><a href="/categoria/css">CSS (12)</a></li>
<li><a href="/categoria/javascript">JavaScript (8)</a></li>
</ul>
</section>
</aside>
<!-- Aside dentro de un artículo -->
<article>
<h1>Título del Artículo</h1>
<p>Contenido principal del artículo...</p>
<aside class="callout">
<h4>Nota Importante</h4>
<p>Información adicional relevante al artículo.</p>
</aside>
<p>Más contenido del artículo...</p>
</article>
<!-- Footer de página -->
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<section class="footer-section">
<h4>Acerca de Nosotros</h4>
<p>Descripción breve de la empresa...</p>
</section>
<section class="footer-section">
<h4>Enlaces Útiles</h4>
<ul>
<li><a href="/privacidad">Política de Privacidad</a></li>
<li><a href="/terminos">Términos de Uso</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</section>
<section class="footer-section">
<h4>Contacto</h4>
<address>
<p>123 Calle Principal<br>
Ciudad, CP 12345<br>
<a href="tel:+34123456789">+34 123 456 789</a><br>
<a href="mailto:info@ejemplo.com">info@ejemplo.com</a></p>
</address>
</section>
</div>
<div class="footer-bottom">
<p>© 2025 Mi Empresa. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<!-- Footer de artículo -->
<article>
<header>
<h1>Título del Artículo</h1>
</header>
<div class="content">
<p>Contenido del artículo...</p>
</div>
<footer>
<p>Publicado el <time datetime="2025-09-03">3 de septiembre, 2025</time></p>
<p>Etiquetas:
<a href="/tag/html" rel="tag">HTML</a>,
<a href="/tag/tutorial" rel="tag">Tutorial</a>
</p>
<p>Compartir:
<a href="#" aria-label="Compartir en Facebook">Facebook</a>
<a href="#" aria-label="Compartir en Twitter">Twitter</a>
</p>
</footer>
</article>
<!-- ✅ Correcto: Jerarquía lógica -->
<h1>Título Principal de la Página</h1>
<h2>Sección Principal</h2>
<h3>Subsección</h3>
<h4>Detalle Específico</h4>
<h2>Otra Sección Principal</h2>
<h3>Otra Subsección</h3>
<!-- ❌ Incorrecto: Saltar niveles -->
<h1>Título Principal</h1>
<h4>Esto salta niveles</h4>
<h2>Esto está fuera de orden</h2>
<!-- ✅ Correcto: Uso semántico apropiado -->
<article class="product">
<header>
<h2>Nombre del Producto</h2>
<p class="price">$99.99</p>
</header>
<div class="description">
<p>Descripción del producto...</p>
</div>
<footer>
<button type="button">Agregar al Carrito</button>
</footer>
</article>
<!-- ❌ Incorrecto: Uso no semántico -->
<div class="product">
<div class="product-header">
<div class="product-title">Nombre del Producto</div>
<div class="price">$99.99</div>
</div>
<div class="description">
<div>Descripción del producto...</div>
</div>
<div class="product-footer">
<div class="button">Agregar al Carrito</div>
</div>
</div>
<!-- Estructura accesible -->
<main>
<h1>Página de Contacto</h1>
<form>
<fieldset>
<legend>Información Personal</legend>
<div class="form-group">
<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" name="nombre" required
aria-describedby="nombre-ayuda">
<div id="nombre-ayuda">Ingresa tu nombre y apellidos</div>
</div>
<div class="form-group">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
</div>
</fieldset>
<fieldset>
<legend>Mensaje</legend>
<div class="form-group">
<label for="mensaje">Tu mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="5" required></textarea>
</div>
</fieldset>
<button type="submit">Enviar Mensaje</button>
</form>
</main>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título optimizado para SEO -->
<title>Servicios de Desarrollo Web | Mi Empresa - Expertos en HTML, CSS y JavaScript</title>
<!-- Meta descripción atractiva -->
<meta name="description" content="Ofrecemos servicios profesionales de desarrollo web con HTML5, CSS3 y JavaScript. Sitios web responsivos, rápidos y optimizados para SEO.">
<!-- Datos estructurados -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Mi Empresa",
"url": "https://www.miempresa.com",
"description": "Empresa de desarrollo web especializada en sitios modernos y responsivos"
}
</script>
</head>
<body>
<header>
<h1>Mi Empresa - Desarrollo Web Profesional</h1>
<nav aria-label="Navegación principal">
<!-- Navegación -->
</nav>
</header>
<main>
<section>
<h2>Nuestros Servicios de Desarrollo Web</h2>
<!-- Contenido optimizado con palabras clave relevantes -->
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Empresa - Soluciones Web Innovadoras</title>
<meta name="description" content="Creamos sitios web modernos y aplicaciones que impulsan tu negocio. Especialistas en desarrollo web, diseño UX/UI y marketing digital.">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="logo">
<img src="logo.svg" alt="Mi Empresa">
</div>
<nav class="main-nav">
<ul>
<li><a href="/" aria-current="page">Inicio</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Transformamos Ideas en Experiencias Digitales</h1>
<p>Creamos sitios web y aplicaciones que conectan con tu audiencia y hacen crecer tu negocio.</p>
<a href="/contacto" class="cta-button">Comenzar Proyecto</a>
</div>
</section>
<section class="services-preview">
<div class="container">
<h2>Nuestros Servicios</h2>
<div class="services-grid">
<article class="service-card">
<h3>Desarrollo Web</h3>
<p>Sitios web modernos, rápidos y responsivos</p>
</article>
<article class="service-card">
<h3>Diseño UX/UI</h3>
<p>Experiencias de usuario intuitivas y atractivas</p>
</article>
<article class="service-card">
<h3>E-commerce</h3>
<p>Tiendas online que convierten visitantes en clientes</p>
</article>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2025 Mi Empresa. Todos los derechos reservados.</p>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">