TALLER |
|
Una vez hemos finalizado la estructura inicial de nuestra página donde especificamos los parámetros básicos, procedemos a trabajar en el contenido. Con el código aplicado hasta este momento hemos aprendido a asignar a cada parte de nuestra página unas características, estilos o propósitos determinados, pero ahora viene lo importante, ofrecer a los usuarios los contenidos e información que deseamos plasmar, el meollo de la cuestión, pues ahí vamos. Inicialmente os explicamos la etiqueta <body> en la que nosotros declaramos el cuerpo del documento o su parte visible. La mayor parte de los elementos explicados anteriormente por tanto se crean para construir la estructura de nuestro documento HTML, principio básico para que nuestro trabajo sea reconocido por los distintos navegadores o equipos capaces de leer nuestro código, como fue la etiqueta <header> donde informamos de los datos importantes del cuerpo de nuestro documento u otras etiquetas básicas como <nav>, <section>, <aside> o <footer>. Lo gracioso del asunto es que ninguna declara algo acerca del contenido, solo tienen un propósito en la estructura. La información a partir de ahora estará compuesta pues de los distintos elementos visuales que componen el contenido de nuestro documento, o sea, videos, imágenes, textos o aplicaciones que deseemos meter en nuestra página, ahora bien, debemos diferenciar estos elementos e interrelacionarlos en nuestra estructura de página. <article> En artículos anteriores vimos una estructura tipo de una página web, uno de los diseños más comunes que podemos encontrar en internet actualmente y una muestra de cómo visualizaremos los contenidos en nuestro dispositivo. Los contenidos tanto si tenemos una página web, un blog o una revista digital, la información hay que dividirla, por ejemplo en un blog se dividirá por entradas y en una revista digital por artículos estas divisiones por bloques de información las haremos con la etiqueta <article>. Imagen 1 Observemos ahora la imagen 1, si analizamos la estructura del código y buscamos la etiqueta <article> encontraremos dos pares que harían referencia a dos artículos distintos, estas etiquetas que delimitan dos artículos distintos y estos a su vez están anidados dentro de la etiqueta <section> podríamos decir que son descendientes de esta, de la misma forma que <section> es descendiente de <body> formando una estructura arbórea con distintos niveles. En la imagen 2 podemos ver de manera esquemática como quedarían dentro de <section>, las etiquetas <article> quedarían una encima de la otra como se aprecia en la imagen. Vamos a explicar la estructura arbórea, repasemos que queríamos decir, si nos fijamos en la imagen 1 de nuestro documento podemos decir que tiene un estructura arbórea donde <html> sería la raíz y tendría ramificaciones a distintos niveles, el primer nivel sería <head> y <body> de estas volvería a ramificarse, por ejemplo <body> se ramificaría en <header>, <nav>, <section>, <aside> y <footer> estas últimas etiquetas podríamos también decir que son descendientes de <body> y que estarían en un segundo nivel, por esta razón decimos que tiene una estructura arbórea. Imagen 2 representación de la estructura de nuestra página con las etiquetas <article> añadidas para contener los bloques de información principal. La etiqueta <article> se crea con la intención de contener bloques independientes de contenido, como puedan ser artículos, entradas de blog, mensajes de un foro… Su función es contener la información que queramos plasmar en la página y esta etiqueta hace que el texto o imágenes que contengan queden relacionados entre sí dentro de ella. Como hicimos para estructurar nuestra página entera, de igual manera podemos hacer con el contenido de <article> y así darle a cada contenido la estructura que queramos. Para estructurarlo usaremos dos viejos amigos muy versátiles <header> y <footer> como vamos a ver no solo los podemos usar para los límites de <body> sino que son validos en cualquier sección que creemos en nuestra página. Imagen 3 Los dos artículos montados con la etiqueta <article> los hemos creado con una estructura, como podemos apreciar en la imagen 3 el título del artículo lo creamos con la etiqueta <h1> dentro de <header>. A continuación introducimos el texto del artículo y al finalizar usamos la etiqueta <footer> para ubicar debajo del texto el autor y los comentarios en relación al artículo. <hgroup> La etiqueta <hgroup> desde hace unos años se considera ampliamente una etiqueta obsoleta, mientras que hay opiniones contradictorias sobre la continuación y los problemas de su uso, en ocasiones leemos que se puede utilizar y en otras no, que algunos navegadores la reconocen y otros no. Si nos vamos a los dos grupos que dictan la normativa en internet para HTML5 que son WHATWG y W3C, dan consejos dispares, aquí abajo les dejamos los enlaces de estas dos asociaciones para los que deseen saber más, si bien es cierto que una idea general es su desuso a partir de 2013: https://html.spec.whatwg.org/multipage/semantics.html#the-hgroup-element https://www.w3.org/wiki/HTML/Elements/hgroup Nosotros por nuestra parte vamos a ver su uso y la alternativa: Cuando usamos la etiqueta <header> ya sea dentro de la etiqueta <body> o como acabamos de observar en la etiqueta <article> la usamos entre otras funciones para colocar el título, esto ya lo vimos como hacerlo con las etiquetas <hn>. <h1> Es la de mayor importancia, sería todo lo que necesitaríamos para crear una línea de cabecera, pero en muchas ocasiones hay que colocar subtítulos o más información sobre la página, artículo o en la sección donde la utilicemos. No olvidemos lo que dijimos sobre la etiqueta <header>: fue creada para contener distintos elementos, dar información como el título, subtítulos o el logo etc. En el diseño de la cabecera, HTML5 nos ofrece la etiqueta <hgroup> para que se evitaran fallos de interpretación del documento por parte del navegador al crear múltiples secciones usando la etiqueta <hn>. Imagen 4 La jerarquía de la etiqueta <hn> es <h1> luego <h2>, <h3>… a diferencia de versiones anteriores de HTML en HTML5 podemos reutilizar estas etiquetas <hn> en todas las secciones que queramos. Por tanto la etiqueta <hgroup> solo sería necesaria para agrupar varías etiquetas <hn>. Si bien desde hace unos años la W3C, encargada de estandarizar el lenguaje junto a otras nos aconseja usar esta otra manera para los subtítulos en vez de <hgroup> como se muestra en la imagen 5. Imagen 5 La decisión final es vuestra… <figure> y <figcaption> Para declarar el contenido de un documento existen etiquetas para ser aún más especifico y aportar aún más información adicional, este es el caso de <figure> para ayudarnos en esta tarea concreta. El contenido como son las fotos, videos… es contenido independiente pero con esta etiqueta podemos indicarle que es parte de la información, pues son una parte importante del contenido, de esta manera aunque cambien su posición, lo harán sin cambiar el sentido y la composición del documento. Imagen 6
Analicemos ahora la parte marcada en la imagen 6 donde se nos mostraría el primer artículo creado por nosotros, que sería: “HTML5 desde el principio”. Antes del texto hemos insertado una imagen envuelta entre las etiquetas <figure>, (a la hora de añadir contenidos las imágenes y videos son parte esencial) esta imagen la hemos introducido mediante la etiqueta. <img src=”dirección de la imagen”> Donde, dirección de la imagen corresponde en este caso a: <img src=“http://www.negocioscontralaobsolescencia.com/foto1.jpg”> Con todo aún diferenciamos otra etiqueta <figcaption> esta sirve para hacer descripciones de las fotos, videos… con un texto corto debajo, esta etiqueta irá siempre dentro de <figure> ya que su función es describirlas. ¿Te gusta escribir? Miguel A. C. - Murcia Temas relacionados: Programación, Redacción independiente,¿Te gusta escribir? Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
2 Comentarios
deivis castro
13/10/2017 04:11:57
es es mi gran duda, este año 2017 la etiqueta hgroup se debe de utilizar o no
Responder
Kasmangou (Administrador)
13/10/2017 19:26:17
A día de hoy, la respuesta más lógica probablemente sea: es indiferente. Como ya pongo en el artículo, las dos asociaciones normalizadoras no se ponen de acuerdo, ni ganas tienen. Pero a la práctica y por experiencia tanto si usas hgroup o el método aconsejado por w3c , el resultado en cualquier navegador será el mismo y no dará el mínimo problema (He escuchado rumores de que da problemas, aunque nunca los he encontrado, la verdad, en ninguno de los principales navegadores). Ten en cuenta la existencia de millones de páginas programadas usando la etiqueta hgroup, si estas acostumbrado puedes seguir haciéndolo tranquilamente para estructurar tu código y si no... puedes utilizar el otro método, si te sientes más cómodo. A día de hoy y en un futuro próximo no considero que vaya afectar en nada de nada. Si empiezas de cero, igual te conviene dejarla de lado, pero ya te digo es una decisión más personal que técnica.
Responder
Deja una respuesta. |