La estructura del documento

Este tutorial estudia la organización de la información en un documento HTML, analizando su estructura básica, cómo está dividida y qué tipo de contenido corresponde a cada sección.

La estructura básica

Antes de que puedas comenzar a agregar contenido a tu documento, hay una estructura básica que necesitas implementar en tu archivo. Esta estructura no solo es requerida para que tu documento se ajuste al estándar sino que también te permitirá brindar información útil acerca de tu documento. La estructura básica de cualquier documento HTML se compone de las siguientes secciones o elementos:

La declaración !DOCTYPE

Todo documento HTML debe comenzar con una declaración que identifica su tipo. Esta es una medida muy útil que informa de antemano a los navgadores, qué tipo de documento están a punto de procesar, permtiéndoles ajustar sus mecanismos de procesamiento en consecuencia.

La declaración DTD es insertada mediante una etiqueta especial (!DOCTYPE) que toma una forma particular para cada tipo de documento. Esta declaración sólo puede estar presente al comienzo del documento. El siguiente ejemplo muestra la DTD para un documento HTML5:

<!DOCTYPE html>

A menos que estés escribiendo documentos para un escenario muy particular, esta es la declaración que usarás. Con la llegada y establecimiento de HTML5 como el estándar para la web, otras DTDs han perdido importancia y han pasado al olvido. Para ver otras DTDs dirígete a la referencia de la declaración !DOCTYPE.

El contenedor principal: el elemento html

Después de haber colocado la DTD justo en la cima de tu documento, es tiempo de crear el contenedor principal: un espacio donde caerá todo el documento (con la excepción de la DTD). Este contenedor es insertado con el elemento html, y además de actuar como contenedor, brinda una buena oportudad de definir el lenguaje utilizado por defecto en el documento, a través del atributo global lang.

Declarar el lenguaje utilizado en el documento es de particular importancia para usuarios que dependen de sintetizadores de voz, ya que brinda información clave para la determinación de la pronunciación correcta.

El siguiente ejemplo muestra la estructura del contenedor principal (incluido el lenguaje utilizado en el documento) e indica dónde deben ser ubicados los elementos del documento.

<html>
  ...Elementos del documento...
</html>

El contenido de este elemento puede, a su vez, ser dividido en dos secciones: el encabezado (head) y el cuerpo (body).

El encabezado del documento

La sección del encabezado (head) es un contenedor para metadatos acerca del documento. Estos metadatos pueden ser clasificados en cinco categorías de acuerdo al elemento que utilizan.

  • El título del documento: describe brevemente el tema tratado en el documento. Éste item es requerido y se inserta con el elemento title.
  • Declaraciones de estilo: agrupa declaraciones de estilo usadas para establecer atributos presentacionales para los elementos del documento. Se inserta con el elemento style.
  • Scripts del lado cliente: inserta programas que proveen funcionalidades e interactividad. Se declara con el elemento script.
  • Declaraciones meta: definen atributos y valores personalizados. Se insertan con el elemento meta.
  • Información relacional: indica recursos que, de alguna manera, están relacionados con el documento. Es insertada con el elemento link.

El siguiente ejemplo muestra la declaración del bloque de encabezado (head) de un documento con algunos de los elementos descriptos previamente.

<head>
  <title>Eppur si muove</title>
  <meta name="keywords" content="Galileo Galilei, heliocentrismo, geocentrismo">
  <meta name="description" content="Este documento trata brevemente los trabajos de Galileo Galilei acerca del Heliocentrismo...">
  <meta name="Author" content="Mark Rottenberg">
  <style>
    table {
      width: 100%;
      border-color: black;
    }
  </style>
  <script>
    result = 0;
    function increment(amount) {
      result += amount;
    }
  </script>
  <link rel="index" href="../index.html">
  <link rel="alternate" media="print" href="version-para-impresora.html">
</head>

Podría ser beneficioso considerar que la información declarada en este bloque será cargada, dado el orden de precedencia, antes que los elementos en el cuerpo del documento (body). Ésta es una buena oportunidad (habitualmente aprovechada) para precargar elementos como scripts o definiciones de estilos.

12Próx