Estructura del Documento HTML
Introducción
Un documento HTML debe estar correctamente estructurado para que el navegador pueda interpretarlo sin errores y mostrar el contenido de manera adecuada. Para lograr esto, es fundamental seguir una organización clara y utilizar las etiquetas HTML esenciales, además de considerar ciertas prácticas recomendadas que mejoran la accesibilidad y el rendimiento del sitio web.
En términos generales, la estructura de un documento HTML se puede dividir en tres secciones principales, cada una con un propósito específico que contribuye al correcto funcionamiento y presentación de la página.
Estructura de la Página
Como se observa en la gráfica anterior, la primera etiqueta (<!DOCTYPE html>) indica el tipo de documento y especifica que se trata de una página web basada en HTML5. A continuación, se encuentra la etiqueta <html>, la cual actúa como el contenedor principal de todo el contenido de la página. Dentro de esta, se distinguen dos secciones fundamentales: la cabecera del documento (<head>), que incluye metadatos, enlaces a hojas de estilo y scripts, y el cuerpo del documento (<body>), donde se define el contenido visible de la página web.
<!DOCTYPE html>
<html>
<head>
<!-- metadatos y enlaces a recursos esenciales para la
configuración y presentación de una página web. -->
</head>
<body>
<!-- Contenido visible de la página -->
</body>
</html>
Tipo de Documento
El !DOCTYPE o tipo de documento es una declaración especial que se escribe en la primera línea de un documento HTML. Su función es informar al navegador sobre la versión de HTML que se está utilizando, permitiéndole interpretar correctamente el código.
Es una declaración obligatoria, aunque, en su ausencia, la página web podría seguir visualizándose en la mayoría de los navegadores. Sin embargo, esto podría generar pequeños inconvenientes, como inconsistencias en la representación de los estilos o el uso del modo quirks, que altera la forma en que se procesan ciertos elementos del diseño.
Para garantizar una correcta interpretación del código y evitar posibles problemas de compatibilidad, es recomendable incluir siempre la declaración !DOCTYPE antes de cualquier otro contenido en el documento HTML. En el caso de HTML5, se debe utilizar la siguiente sintaxis en la primera línea del archivo:
<!DOCTYPE html>
Antes de renderizar una página web, los navegadores primero analizan la línea que especifica el tipo de documento. Esto les permite ajustarse correctamente al estándar correspondiente y procesar el contenido de manera óptima.
Si no se define el tipo de documento en un archivo HTML, el navegador opera en lo que se conoce como Quirks Mode (modo peculiar o modo no estándar). En este estado, se habilita un modo de compatibilidad con versiones antiguas, lo que puede alterar la interpretación de diversas etiquetas HTML y propiedades CSS, generando posibles inconsistencias en la visualización de la página.
Encabezado
La etiqueta <head> constituye una de las secciones esenciales dentro de un documento HTML, ya que alberga metadatos e información crucial tanto para el navegador como para los motores de búsqueda. Aunque su contenido no se muestra directamente en la página, desempeña un rol fundamental en la adecuada interpretación y operatividad del sitio web.
Algunos ejemplos de metadatos de un documento HTML podrían ser los siguientes:
- Codificación de la página: Define la codificación de caracteres para que el navegador interprete correctamente caracteres especiales como tildes y eñes.
- Título de la página web: Aparece en la pestaña del navegador, esta etiqueta es obligatoria.
- Descripción de la página: Aparece en los resultados de búsqueda (Google, Yahoo, Bing, etc.).
- Miniatura/preview de la página: Aparece al poner enlace en redes sociales
- Icono de la página: Aparece en la pestaña del navegador, también se llama Favicon.
También es el espacio adecuado para incorporar etiquetas que vinculen el documento actual con archivos externos, como hojas de estilo .css o scripts de JavaScript .js, manteniendo así una estructura organizada y separada.
Cuerpo de Página
La etiqueta <body> en HTML define la sección del documento donde se incorpora todo el contenido visual e interactivo de una página web, incluyendo texto, imágenes, videos, enlaces, botones, formularios y otros elementos multimedia. Forma parte de la estructura esencial de un archivo HTML y se ubica inmediatamente después de la etiqueta <head>, asegurando que la información estructurada en el encabezado se procese antes de renderizar el contenido visible en el navegador.
Características y Función de <body>
- Contiene todo el contenido visible: Todo lo que se muestra en la página, incluyendo texto, imágenes, videos, enlaces, botones y formularios, se encuentra dentro de
<body>. - Debe ser único: Solo puede haber un
<body>por documento HTML. - Permite atributos globales: Se pueden aplicar atributos como id, class, style, entre otros.
- Puede incluir eventos de JavaScript: Se pueden manejar eventos como onload, onunload, etc.
Atributos Comunes de <body>
La etiqueta <body> puede incluir diversos atributos que permiten modificar su comportamiento o apariencia. Aunque en HTML5 se recomienda aplicar estilos mediante CSS y manejar eventos con JavaScript, aún es posible utilizar ciertos atributos directamente en <body>.
Atributos Globales
Estos atributos pueden aplicarse a cualquier elemento HTML, incluyendo <body>.
-
id: Asigna un identificador único al<body>, útil para aplicar estilos o manipularlo con JavaScript. -
class: Permite asignar una o más clases CSS para aplicar estilos específicos. -
style: Define estilos CSS en línea para modificar la apariencia del cuerpo de la página. -
title: Muestra un texto emergente cuando el usuario pasa el cursor sobre la pestaña del navegador, mostrando el contenido completo cuando el título es demasiado largo para ser visualizado en el espacio disponible de la pestaña. -
lang: Especifica el idioma principal del contenido dentro del<body>, complementando el atributo en<html>.
Atributos de Eventos en JavaScript
La etiqueta <body> también permite manejar eventos de carga, interacción y cierre de la página mediante atributos de eventos de JavaScript.
-
onload: Se ejecuta cuando la página se ha cargado completamente. -
onunload: Se activa cuando el usuario abandona la página o la recarga. -
onresize: Se dispara cuando la ventana del navegador cambia de tamaño. -
onhashchange: Se ejecuta cuando cambia la parte de la URL después del #. -
onbeforeunload: Permite mostrar una advertencia antes de que el usuario cierre o recargue la página.
Ejemplos de Uso
- Aplicación de estilos con style:
<body style="background-color: lightblue; color: black;"> <h1>Ejemplo de estilos en línea</h1> </body> - Uso del evento onload para mostrar un mensaje al cargar la página:
<body onload="alert('Bienvenido a mi página web')"> <h1>Página de ejemplo</h1> </body> - Advertencia antes de salir de la página con onbeforeunload:
<body onbeforeunload="return confirm('¿Seguro que quieres salir de la página?');"> <h1>Contenido de la página</h1> </body>