jairogarcíarincón

Introducción

En este apartado, crearemos una estructura básica de un documento HTML5 que no servirá de base o plantilla para la mayoría de los ejercicios del curso.

HTML5 está considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5:

• HTML se encarga de la estructura, utilizando para ello un lenguaje de marcado específico.
• CSS presenta esa estructura y su contenido en la pantalla mediante el uso de estilos.
• JavaScript se encarga de la lógica, esto es, de qué se debe mostrar en pantalla, y de la interactividad de la página.

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:

001-estructura-html

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:

002-estructura-html

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 :

003-estructura-html

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í:

004-estructura-html

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.).

Una vez recordada la estructura básica de un documento HTML y antes de proponer el primer ejercicio, en el siguiente apartado realizaremos un repaso de las etiquetas básicas HTML y de los estilos básicos de CSS.

---

Publicado el 29 de Enero de 2025

maquetacionwebresponsive flexboxgridangularmaterialmedia queries