Dentro del cuerpo
El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue
finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5
estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar
un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para
nuestro sitio web se encuentra en el interior de estas secciones.
La mayoría de los elementos ya estudiados fueron creados para construir una
estructura para el documento HTML que pueda ser identificada y reconocida por los
navegadores y nuevos dispositivos. Aprendimos acerca de la etiqueta <body> usada para
declarar el cuerpo o parte visible del documento, la etiqueta <header> con la que
agrupamos información importante para el cuerpo, la etiqueta <nav> que provee ayuda
para la navegación del sitio web, la etiqueta <section> necesaria para contener la
información más relevante, y también <aside> y <footer> para ofrecer información
adicional de cada sección y del documento mismo. Pero ninguno de estos elementos
declara algo acerca del contenido. Todos tienen un específico propósito estructural.
Más profundo nos introducimos dentro del documento más cerca nos encontramos de
la definición del contenido. Esta información estará compuesta por diferentes elementos
visuales 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.
<article>
El diseño considerado anteriormente (Figura 1-1) es el más común y representa una
estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el
contenido clave es mostrado en pantalla. Del mismo modo que los blogs están divididos
en entradas, sitios web normalmente presentan información relevante dividida en partes
que comparten similares características.
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de
cada <article>, incorporamos elementos <h1> para declarar un título. Básicamente, las
etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada
parte del documento, pero es normal que necesitemos también agregar subtítulos o más
información que especifique de qué se trata la página web o una sección en particular. De
hecho, el elemento <header> fue creado para contener también otros elementos como
tablas de contenido, formularios de búsqueda o textos cortos y logos.
Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H,
como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por
propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la
interpretación del documento por parte del navegador, estas etiquetas deben ser
agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>.
Las etiquetas H deben conservar su jerarquía, lo que significa que debemos primero
declarar la etiqueta <h1>, luego usar <h2> para subtítulos y así sucesivamente. Sin
embargo, a diferencia de anteriores versiones de HTML, HTML5 nos deja reusar las
etiquetas H y construir esta jerarquía una y otra vez en cada sección del documento. En el
ejemplo del Listado 1-17, agregamos un subtítulo y datos adicionales a cada mensaje. Los
títulos y subtítulos fueron agrupados juntos utilizando <hgroup>, recreando de este
modo la jerarquía <h1> y <h2> en cada elemento <article>.
IMPORTANTE:
El elemento <hgroup> es necesario cuando tenemos un título y
subtítulo o más etiquetas H juntas en la misma cabecera. Este elemento puede
contener solo etiquetas H y esta fue la razón por la que en nuestro ejemplo
dejamos los datos adicionales afuera. Si solo dispone de una etiqueta <h1> o la
etiqueta <h1> junto con datos adicionales, no tiene que agrupar estos elementos
juntos. Por ejemplo, en la cabecera del cuerpo (<header>) no usamos este
elemento porque solo tenemos una etiqueta H en su interior. Siempre recuerde
que <hgroup> fue creado solo con la intención de agrupar etiquetas H,
exactamente como su nombre lo indica.
Navegadores y programas que ejecutan y presentan en la pantalla sitios webs leen el
código HTML y crean su propia estructura interna para interpretar y procesar cada
elemento. Esta estructura interna está dividida en secciones que no tienen nada que ver
con las divisiones en el diseño o el elemento <section>. Estas son secciones
conceptuales generadas durante la interpretación del código. El elemento <header> no
crea una de estas secciones por sí mismo, lo que significa que los elementos dentro de
<header> representarán diferentes niveles e internamente pueden generar diferentes
secciones. El elemento <hgroup> fue creado con el propósito de agrupar las etiquetas H y
evitar interpretaciones incorrectas por parte de los navegadores.
Conceptos básicos: lo que llamamos “información adicional” dentro de la cabecera
en nuestra descripción previa es conocido como Metadata. Metadata es un conjunto
de datos que describen y proveen información acerca de otro grupo de datos. En
nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado.
<figure> y <figcaption>
La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de
declarar el contenido del documento. Antes de que este elemento sea introducido, no
podíamos identificar el contenido que era parte de la información pero a la vez
independiente, como ilustraciones, fotos, videos, etc… Normalmente estos elementos son
parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin
afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de
información, las etiquetas <figure> pueden ser usadas para identificarla.