HTML5

Estructuras basicas de HTML5 
El problema del html "antiguo" es que no existían etiquetas capaces de agrupar bloques enteros y que tuviesen significado por si mismas y por eso la gente terminó usando el div como etiqueta para todo. Si bien con los atributos "role" se mejora bastante este problema, estos nunca se han usado de forma muy extendida.
Entre otras cosas HTML5 nos aporta una serie de etiquetas nuevas que permiten mejorar la semántica de nuestra página:

• <header/>
• <footer/>
• <nav/>
• <hgroup/>
• <aside/>
• <section/>
• <article/>

Las 4 primeras apenas se prestan a confusión dado que a poco que nos informemos sobre ellas es difícil usarlas mal y de echo mucha gente dice maquetar en html5 solo por usar un par de ellas...

• <header/> : Nos permite identificar la cabecera de la página (que no forma parte del contenido único)
• <footer/> : Hace otro tanto con el footer (que tampoco forma parte del contenido único)
• <nav/> : Nos permite marcar conjunto de links como menús y por tanto ayudar a lo sbuscadores a detectar nuestra estructura web
• <hgroup/> : Permite agrupar titulares y nos permite jugar más con el peso de estos.

Donde empieza a encontrase un auténtico caos es en el uso del antiguo <div/> y sus nuevos hermanos con significado semántico: <section/> y <article/>
Como siempre es suficiente con mirar un poco la documentación y poner un poco de lógica en todo esto. Por ese motivo me gustaría repasar su uso, a ver si puedo poner mi granito de arena en que el estándar triunfe y no se pervierta... (por soñar).

Uso de <div/> en HTML5

La etiqueta div no ha muerto, sigue ahí y sigue significando lo que siempre ha significado: conjunto de elementos. En ningún momento se ha transformado a una etiqueta "tonta" que puedas usar libremente para ayudarte con el CSS ni ha sido sustituida totalmente por la etiqueta <section/>.
Por lo tanto nuestro deber es usarla como ayuda a la estructura de página: como base para crear el layout de de nuestras páginas, siempre y cuando no exista otra etiqueta de conjunto que represente mejor este papel... En otras palabras, div es la herramienta para unir elementos cuando no podemos asociar significado semántico a este conjunto.

Uso de <section/> en HTML5

El uso de seción es muy parecido al de div pero aportando la carga de significado mínima posible al contenido. Engloba distintos elmentos dentro de una etiqueta <section/> lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento. Es decir si queremos mostrar cierta información con un todo usamos section.
La diferencia es sutil pero muy importante: cuando creamos bloques cuyo contenido forma un todo usaremos <section/>, cuando estos bloques responden más a diseño o a necesidades de estructura usaremos <div/&gt.


El section se refiere a un trozo del sitio web que –si lo cambiáramos de página, o hasta de dominio–, pudiese "funcionar por si solo".
Un ejemplo de esto, sería el área de comentarios de un portal web; pues, pese a que tiene relación con el artículo que se está leyendo, no depende semánticamente de este para entenderse por si solo.
Otro ejemplo sería un banner o un slideshow. Estos contienen artículos o imágenes que se relacionan entre si, pero que no necesitan del resto del contenido del documento para entenderse; y bien podrían incluirse en otros sitios (php, iframe, etc.) conservando su sentido semántico.

Uso de <article/> en HTML5

Por último la etiqueta <article/> es el siguiente paso a la hora de declarar que un cojunto de elmentos en nuestra página tiene significado. En este caso el paso dado es el dar a entender que ese conjunto tiene significado claro incluso si lo sacamos totalmente de la página. Es decir, al incluir algo dentro dentro de la etiqueta <article/> lo que estamos diciéndole a los buscadores es que dentro de este article podrá encontrar contenidos únicos con su propio significado. Es decir si tenemos un contenido completo que deseamos dividir en dos o tres partes especificas usaremos un article, por ejemplo una narración que tenga introducción, desarrollo y desenlace usariamos un article para cada una y si queremos englobarlo como un todo usaríamos section.

A diferencia del section, el article es un contenedor 100% modular, el cual debería ser utilizado para representar cajas que se relacionen o interactúen entre si. Estos objetos –al sacarlos de su contexto– dejan de tener sentido, o no funcionan correctamente.Un ejemplo de esto, serían los comentarios propiamente tal. Y es que, si el section, era el contenedor de comentarios; cada uno de los comentarios que llenarían ese contenedor, serían los articles, pues necesitan estar junto al resto de comentarios para tener sentido, y ser entendido por el usuario. Otro ejemplo serían las fotos dentro de una galería. En ese caso, la galería misma sería un section, pero cada una de las imágenes (con sus respectivos titulares, links, botones, etc.), serían articles.

OJO En un sentido contrario, podria ocurrir que un articule contenga un section, en estos casos se pierde el sentido semántico del uso apropiado de estas etiquetas, abajo se muestra el código de la estructura HTML5 pero es importante visualizar que en ese ejemplo ocurre lo que se acaba de describir con la advertencia.

Uso de <aside/> en HTML5   

Así pues, un <aside/> como hijo de la etiqueta <body/> nos dice que se trata de un contenido añadido por temas que no tienen nada que ver con el contenido de página (normalmetne esas columnas laterales llenas de tags y banners). Cuando lo incluimos dentro de un <article/> nos indica que esa información complementa el artículo pero no forma parte de él (listas de datos, testimoniales, banners relacionados, etc...).

Modelo de plantilla1

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8"/> <!--El navegador permita cualquier idioma de entrada  -->
    <meta description="Descripcion de mi tema web"/>   
    <title>Titulo Web</title>
</head>


 
<body>
   <header>
         <h1>El primer head</h1>
         <figure>
             Aqui va el logo
         <figcaption>Titulo del Logo</figcaption>
         </figure>
 </header>
 
    <nav>
     Aqui va nuestro men&uacute;
    </nav>

    <section>
        <hgroup>
             <h1>Este es mi encabesado primario</h1>
             <h2>Este es mi encabesado secundario</h2>
         </hgroup>
        Esta es mi primera secci&oacute;n        
         <article>
              
               <section>
                   Esta es otra secci&oacute;n dentro de un articulo
               </section>
         </article>
     </section>
    
     <aside>
      Contenido Secundario
     </aside>
    
     <footer>
      DERECHOS, ETC
     </footer>
</body>
</html>


PLANTILLAS ESTRUCTURAS- Estas estructuras guardan el uso apropiado de section y article

Muy buena estructura

Buena estructura















EJEMPLO PRACTICO DE LA ESTRUCTURA BÁSICA RESPETANDO LAS NORMAS

 <!DOCTYPE html>
<html lang="es">
 <head>
    <meta charset="utf-8"/>
    <meta description="CLIC Developers - Desarrollamos software, web, contenidos graficos, audiovisuales, soporte tecnico empresarial, provedoores de equipos y dispositivos tecnologicos....Otros Servicios"/>  
    <title>CLIC Desarrolladores</title>
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
 </head>

 <body>
   <header>
    &lt;header&gt;
   </header>
 
   <nav>
    &lt;nav&gt;
   </nav>

   <section id="contenedorG1">
     <section id="contenedorP1">
       &lt;section&gt;
       <article>
        &lt;article&gt;
       </article>
     </section>

     <aside>
      &lt;aside&gt;
     </aside>
   </section>

   <footer>
    &lt;footer&gt;
   </footer>
 </body>

</html>