Estructura de un documento HTML

Estructura de un documento HTML

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. La primera etiqueta que debemos encontrarnos SIEMPRE, en la primera línea del archivo y sin espacios o líneas que la precedan, es el tipo de documento:

Ver ejemplo de código

Lo siguiente que debemos hacer es construir la estructura html, en la medida de lo posible especificando el atributo del idioma lang en el que está escrito la página:

Ver ejemplo de código

Una vez dentro de la estructura en árbol de html y antes de empezar a escribir el contenido, debemos declarar la etiqueta head, responsable, entre otras cosas, de definir:

• El juego de caracteres en el que está escrito el documento, y que en el caso del idioma español será utf-8 a través de una etiqueta tipo meta charset
• El título, a través de las etiqueta title (para el nombre de la pestaña) y de la etiqueta meta title
• La descripción de nuestro documento, a través de la etiqueta meta description
• Las palabras clave de nuestro documento, separadas por comas a través de la etiqueta meta keywords
• Enlaces a archivos CSS y de fuentes, a través de etiquetas tipo link, que veremos más adelante
• Código Javascript, a través de la etiqueta script y que también estudiaremos más adelante
• Y muchas otras cosas...

Y por fin, declararemos la etiqueta body, correspondiente al cuerpo de nuestro documento, esto es, la parte visible. El siguiente código muestra la estructura completa de una página web sencilla :

Ver ejemplo de código

Para facilitar la comprensión del contenido, se recomienda al alumno la visualización del siguiente video, extraído del canal de YouTube pildorasinformáticas:

Ver vídeo

Estructura del cuerpo

La estructura del cuerpo (el código entre las etiquetas body) generará la parte visible del documento. En versiones anteriores de HTML se estructuraba la información del body mediante tablas (table) y/o contenedores de división (div). El problema es que ni table ni div dan información del tipo de contenido, algo poco importante para el usuario pero necesario desde el punto de la accesibilidad y del posicionamiento para que los navegadores y los robots interpreten qué tipo de información hay en cada bloque del documento. Poniendo como ejemplo una página de un blog, normalmente nos encontramos con 5 partes diferenciadas, tal y como muestra la siguiente imagen:

1. Cabecera (elemento header): espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página.
2. Barra de navegación (elemento nav): menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio.
3. Información principal (elementos section y article): ubicada en el centro y en el caso de un blog normalmente con un listado de artículos, productos, imágenes o similar.
4. Barra lateral (elemento aside): es opcional, y podría mostrar, por ejemplo, una lista de enlaces apuntando hacia cada uno se esos ítems, un calendario de eventos o anuncios.
5. Pie (elemento footer): es el área en donde normalmente se muestra información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y toda información adicional que el desarrollador considere importante compartir.

De este modo, si el esquema clásico de diseño de una página web es similar al mostrado en la siguiente figura titulada Esquema de diseño web clásico, HTML5 incorpora nuevos elementos que proporcionan dicha información, y que convertirían el diseño anterior en la siguiente estructura HTML5 (figura titulada Esquema de diseño web utilizando HTML5):

. Profundizando aún más dentro de la section, la estructura podría ser la siguiente:

Y volviendo a nuestro ejemplo anterior, la estructura completa de nuestro sitio web introduciendo los nuevos elementos quedaría así:

Ver ejemplo de código

El siguiente vídeo extraído del canal de YouTube pildorasinformaticas sirve para afianzar todo lo visto hasta el momento:

Ver vídeo

Dentro del contenido

El contenido de nuestra página estará compuesto por diferentes elementos visuales tales como títulos, textos, imágenes, videos y aplicaciones interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura. Así, del mismo modo que los blogs están divididos en entradas, los sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento article, normalmente está ubicado dentro de un elemento de tipo section, y nos permite identificar cada una de estas partes. El elemento article, por tanto, identifica una unidad de contenido (noticia, artículo, producto, entrada, persona, etc.). En el siguiente apartado estudiaremos algunas de las etiquetas y estructuras HTML5 más utilizadas.