Escolar Documentos
Profissional Documentos
Cultura Documentos
Primeros pasos: Maquetacin <header>, <hgroup>, <article>, <aside>, <section>, <nav>, <footer>
Juan Ros Pizarro @MetalTux
<header>
La etiqueta <header> se recomienda para ser utilizada en la definicin de la cabecera de una pgina Web, como por ejemplo la cabecera de un Blog. Tambin puede ser utilizada para definir la cabecera de un Artculo <article> o de una Seccin <section>. Inclusive podramos definir cabeceras para un <aside> (por ejemplo el sidebar de un Blog).
<body> <header> Ac va la Cabecera de nuestra pgina Web. </header> </body>
<hgroup>
Se utiliza para definir el contenido de una cabecera, agrupando los contenidos desde <h1> hasta <h6>. Esto es cuando la cabecera tiene mltiples niveles.
<header> <hgroup> <h1>Ttulo de la Cabecera</h1> <h2>Subttulo de la Cabecera</h2> </hgroup> </header>
<article>
Especifica un contenido autnomo e independiente. Su utilizacin se recomienda para:
Artculos de Peridicos virtuales. Publicaciones de un Foro. Publicaciones de un Blog. Comentarios de un Blog. <body> <article> Contenido del Artculo. </article> </body>
<aside>
Permite mostrar un contenido anexo, preferentemente en uno de los costados de la pgina, que tiene relacin directa con el contenido principal de la pgina. Se usa principalmente para mostrar datos en una Barra Lateral. Ejemplo de eso sera un sidebar de un Blog.
<aside> <h5> <a href=#>Link de Sidebar</a> </h5> </aside>
<section>
Define una seccin dentro del documento. Esta seccin puede ser para definir una cabecera, artculos, captulos, pi de pgina o cualquier otra seccin del documento.
<section> <header> Ac va la Cabecera de nuestra pgina Web. </header> </section> <article> Artculo 1 <section> Seccin del artculo. </section> </article>
<nav>
Define una seccin con links de navegacin. No todos los links de navegacin deben ser incluidas en una etiqueta <nav>. Este elemento est destinado slo para el bloque principal de enlaces de navegacin.
<aside> <nav> <a href=#> Enlace N 1</a> <a href=#> Enlace N 2</a> <a href=#> Enlace N 3</a> <a href=#> Enlace N 4</a> </nav> </aside>
<footer>
Defina el pi de pgina para un Documento o una seccin de este. Tpicamente contiene datos del Autor de la Pgina, Informacin de Copyright, Trminos de Uso, entre otras cosas. El documento puede tener una o ms etiquetas <footer>. Tpicamente, el pi de pgina se muestra como ltimo elemento del documento, aunque esto no es obligatorio.
<footer> Contenido del footer, Copyrigth, entre otras cosas. </footer>
Ejemplo prctico
Para complementar lo anteriormente explicado, ahora veremos un Ejemplo prctico simple, en el cual utilizaremos las etiquetas anteriormente mostradas, y las acomodaremos dentro de la pgina utilizando estilos con CSS3.