Dia #4 Nuevas etiquetas estructurales en HTML5

curso html 5 - etiquetas estructurales de html5

Bueno vamos a definir una estructura más completa de un documento web utilizando las nuevas etiquetas estructurales. <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.

Vamos a definir el documento y luego vamos a examinar las etiquetas más a fondo y conocer como las podemos utilizar en nuestros propios proyectos.

Hemos utilizado estos elementos <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>. Para marcar y así formar la estructura casi que completa de nuestra página, ahora es evidente notar los nuevos nombres, es el momento para estudiar en detalle un poco más de esas nuevas etiquetas que llamamos estructurales.

1º – <header>: Esta etiqueta hace el mismo trabajo que esta <div id=”header”>, esta etiqueta <header> la utilizamos para contener información adicional como logos y ayudas a la navegación, iconos de redes sociales etc. Esta etiqueta tiene su cierre de esta manera </header>.

2º – <hgroup>: Muchos headers de las páginas web podrán contener múltiples títulos representados con la etiqueta h1, y de pronto un subtitulo formando con la etiqueta h2. Bueno esta nueva etiqueta <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. Esta etiqueta tiene su cierre de la siguiente forma, </hgroup>.

3º – <nav>: La etiqueta <nav> está diseñada para colocar la botonera o navegación principal los normales (Home, quienes somos, portafolio, contáctenos, blog). Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul> con sus respectivos <li>, su cierre es </nav>.

4º – <aside>: Esta etiqueta es creada para contener información no relevante para el sitio web como da a sospechar su nombre que se traduciría algo así como “a un lado”. En un blog, obviamente el <aside> es la barra lateral de información donde se muestra las categorías, blogroll etc. Esta etiqueta puede contener cualquier cosa desde un reproductor multimedia hasta una galería de imágenes, el cierre de esta etiqueta es </aside>.

5º – <section>: Esta etiqueta Define un área de contenido única dentro del sitio. Esta es una de las etiquetas mas genéricas de los elementos estructurales ya que podemos agrupar contenidos relacionados por el tema. Ejemplo: En un blog, esta etiqueta sería la zona donde están todos los posts, el cierre de esta etiqueta es </section>.

6º – <article>: Esta etiqueta especifica un contenido independiente y autónomo. Define zonas únicas de contenido independiente. Ejemplo: En el home de un blog, cada post sería un <article> y el post y cada uno de sus comentarios serían varios <article>, el cierre respectivo de esta etiqueta es </article>.

7º – <footer>: Esta etiqueta lo que define es un pie de página con la información del copyright, autor un menú o lo queramos colocar en el pie de la web, el cierre de esta etiqueta es </footer>.

NOTA: Algo muy importante: el caso de ver nuevas etiquetas estructurales no significa que desaparecieron los divs, los podemos seguir utilizando en cuestiones de contenido interno, porque para el tema de la estructura y semántica las nuevas etiquetas nos pueden venir my bien, y es bueno que comencemos a basarnos en ellas.

Bueno en conclusión, utilizando estas nuevas etiquetas podemos estructurar una web basada en HTML5, se vería la estructura algo así como lo vamos a ver en el siguiente cuadro, y claro para una mejor apariencia que mas que css3, pero vamos por partes.

etiquetas para nueva estructura en html5

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo