es hijo del elemento y hermano del elemento .Ambos, y , tienen al elemento como padre.

El elemento

no está limitado a artículos de noticias, por ejemplo, sino que está destinado a contener cualquier elemento de contenido independiente. Por tanto, puede incluir ya sea una entrada de un foro, un artículo de una revista, una entrada de un blog, un comentario de usuario, o cualquier otro contenido similar. Este elemento, , agrupará segmentos de información relacionados entre sí, independientemente de la naturaleza de la información.

Como una parte independiente del documento, el contenido de cada elemento

tendrá su propia estructura independiente. Para definir esta estructura, podemos tomar ventaja de la versatilidad de las etiquetas y estudiadas anteriormente. Estas etiquetas son portátiles y pueden ser utilizadas no solo en el cuerpo sino también en cada sección de nuestro documento.

Código 1-18

Construcción de la estructura

.

Conceptos básicos

El elemento

que hemos usado dentro del pie o, lo que es lo mismo, dentro del elemento

de cada artículo del Código 1-18, define un párrafo. Por defecto, los navegadores muestran los contenidos de estas etiquetas con márgenes y saltos de línea. Además de declarar párrafos, también es posible sacar provecho de las propiedades de este elemento para aplicar formato a textos breves, que es el uso que se le ha dado en este ejemplo.

Los dos artículos insertados en el Código 1-18se construyeron con el elemento

y tienen una estructura específica. En primer lugar, las etiquetas contienen el título, que se define con un elemento

.A continuación está el contenido en sí, que es el texto del artículo. Y finalmente, después del texto, está la etiqueta

que especifica en este caso el número de comentarios.

Dentro de cada elemento

, ya sea al comienzo del cuerpo o al comienzo de cada elemento de nuestro ejemplo, hemos incorporado etiquetas

para indicar un título. Las etiquetas

son, básicamente, todo lo que se necesita para crear el encabezamiento de todas las partes del documento, pero a veces también hay que añadir subtítulos o más información para declarar de qué trata la página web o alguna de sus secciones. De hecho, es habitual que el elemento albergue también otros elementos, como tablas de contenidos, formas de búsqueda, o textos cortos y logotipos.

Puede hacer uso de todas las etiquetas H:

,

,

,

,

y

.Sin embargo, para fines de procesamiento interno y para evitar la generación de múltiples secciones o subsecciones durante la interpretación del documento, estas etiquetas deben estar agrupadas. Para ello, HTML5 proporciona el elemento

.

Código 1-19

Uso del elemento

.

Las etiquetas H deben respetar su jerarquía, es decir, primero se debe declarar el título con la etiqueta

, a continuación, utilizar

para los subtítulos, y así sucesivamente. Sin embargo, a diferencia de las versiones anteriores de HTML, HTML5 permite reutilizar las etiquetas H y construir esta jerarquía una y otra vez en cada sección del documento. En el ejemplo del Código 1-19, se añade un subtítulo y metadatos para cada entrada y agrupamos a títulos y subtítulos con la etiqueta

.La jerarquía

y

es reutilizada en cada elemento

.

Importante

El elemento

es necesario cuando hay un título y un subtítulo, o más etiquetas H juntas en el mismo elemento .Este elemento solo puede contener etiquetas H y por eso en el ejemplo lo mantuvimos fuera de los metadatos. Si solo dispone de la etiqueta

o la etiqueta

y metadatos, no tiene que agrupar estos elementos. Por ejemplo, en el elemento del cuerpo no las usamos porque éste solo contenía un elemento H dentro. Recuerde siempre que las etiquetas han sido diseñadas para agrupar solamente las etiquetas H, tal como como su nombre indica.

Los navegadores y programas que ejecutan sitios web leen el código HTML y crean su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en secciones que son independientes de las divisiones en el diseño o del elemento

.Estas son las secciones conceptuales generadas durante la interpretación del código. El elemento no crea una de estas secciones conceptuales por sí mismo, lo que significa que los elementos dentro del representan diferentes niveles y podrían generar internamente secciones diferentes. El elemento fue creado con el propósito de agrupar etiquetas H y evitar errores de interpretación por parte del navegador.

La etiqueta

fue creada para ser declarar el contenido del documento de una forma más específica. Antes de que fuera introducido este elemento, no era posible identificar el contenido que formaba parte de la información, sino el que era independiente, por ejemplo, ilustraciones, fotos, videos, etc. Por lo general, esos elementos forman parte de los contenidos relevantes pero pueden ser removidos sin afectar o interrumpir el flujo de un documento. Cuando este tipo de información está presente, puede ser identificada con las etiquetas .

Código 1-20

Uso de los elementos

y .

En el Código 1-20, insertamos en la primera entrada una imagen ( ) después del texto del mensaje. Ésta es una práctica habitual, pues a menudo el texto está enriquecido con imágenes o videos. Las etiquetas

nos permiten encerrar estos elementos visuales y diferenciarlos de la información más relevante.

También en el Código 1-20se encuentra un elemento adicional dentro del elemento

.Por lo general, las unidades de información como imágenes o vídeos vienen acompañadas de un breve texto, normalmente ubicado bajo ellas, que las describe. HTML5 aporta un elemento para ubicar e identificar esta leyenda descriptiva. Las etiquetas encierran la leyenda relacionada con el elemento y establecen una relación entre ambos elementos y su contenido.

Una característica importante de los sitios web es la posibilidad de mostrar información adicional cuando así es solicitado por el usuario. Para evitar el uso de Javascript y facilitar la creación de esta herramienta, HTML5 incorpora los elementos

y .El elemento declara la herramienta de ampliación de información y, dentro de este elemento, se especifica el título de la herramienta con el elemento además de toda la información que ésta oculta.

Código 1-21

Creación de una herramienta con

Читать дальше