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>