Estructura de documento HTML

Estructura básica de un documento HTML

Para que los navegadores puedan interpretar correctamente una página web, es necesario que el documento HTML esté correctamente estructurado. Esto significa que debe seguir un formato específico, con etiquetas esenciales y buenas prácticas que faciliten su lectura y procesamiento. Generalmente, el contenido se organiza en tres partes principales.

División general del documento

Un archivo HTML comienza con una declaración que define el tipo de documento. Luego, se abre la etiqueta <html>, dentro de la cual se incluyen dos áreas clave: la cabecera (<head>) y el cuerpo del documento (<body>). Esta estructura asegura que el contenido esté separado de los metadatos y que el navegador pueda procesarlo adecuadamente.

¿Qué es el DOCTYPE y por qué es importante?

La primera línea en un documento HTML debe contener la declaración <!DOCTYPE html>. Esta línea le indica al navegador que se trata de un documento en formato HTML5. Aunque el navegador puede intentar renderizar la página incluso si esta declaración no está presente, omitirla puede provocar que el navegador utilice un modo de compatibilidad antigua (quirks mode), lo que puede afectar la visualización y el comportamiento de ciertos elementos HTML y estilos CSS.

En versiones anteriores del estándar HTML, como HTML4 o XHTML, el DOCTYPE era más extenso y complicado, por ejemplo:

htmlCopiarEditar<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Sin embargo, con HTML5, se simplificó esta declaración para facilitar su uso.

La sección <head>: Información no visible de la página

Dentro de la etiqueta <head> se incluyen datos que no se muestran directamente en el cuerpo de la página. Aquí se colocan los llamados metadatos, que brindan información adicional sobre el documento, como:

  • El título del sitio web, que se muestra en la pestaña del navegador.
  • La descripción del sitio, útil para buscadores como Google.
  • El ícono del sitio (favicon), visible junto al título en la pestaña.
  • Enlaces a hojas de estilo CSS o archivos JavaScript externos.

Aunque esta sección no afecta directamente al contenido visible, cumple un papel esencial en la optimización, visualización y funcionalidad del sitio web.

La etiqueta <body>: el contenido que ve el usuario

La parte visible del sitio web se encuentra dentro de la etiqueta <body>. Aquí es donde se colocan los textos, imágenes, botones, enlaces, formularios y cualquier otro elemento que forma parte de la interfaz de usuario. Esta sección se coloca justo después del cierre de la cabecera </head>.

Ejemplo de estructura HTML mínima

A continuación, se muestra un esquema básico de cómo debe estructurarse un documento HTML bien formado:

htmlCopiarEditar<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body>
  <!-- Contenido visible de la página -->
</body>
</html>

En muchos editores de código como Visual Studio Code, existe una funcionalidad llamada Emmet que permite generar esta estructura rápidamente. Basta con escribir ! y presionar Enter para autocompletar esta plantilla base.