Dentro del Cuerpo del HTML

Dentro del Cuerpo del HTML

Master experto desarrollo web

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.

 

Vea nuestro máster en Experto Web

Luis Bonilla

    Comentarios cerrados.
    Hola, en qué podemos ayudarte?
    Powered by