Maquetación semantica en HTML5

Maquetación semantica en HTML5

1. La etiqueta <BODY>

   • Nuevas etiquetas con modelo semantico
   • En HTML4 solo se usaba el contenedor genérico <div>
   • Gracias al modelo semántico los buscadores son mas eficientes
     • Esto aumenta lo llamado "Dimensión social de internet"

2. Wireframing

   • El maquetamiento básico contesta de "Estructura HTML" y "Diseño y colocación de CSS"
   • ¿Que es?
     • Básicamente un boceto o esquema de nuestra pagina web
       • Que en un principio puede o no tener todos los elementos que pensamos
       • El objetivo de esto es identificar los principales elementos de nuestra página
         • Identificamos una estructura jerarquica implícita
           • En base a esto sabremos que etiquetas usar y donde

3. La etiqueta <HEADER>

   • Su función semantica es delimitar el encabezado de la pagina
     • Normalmente se suele incluir el titulo, una imagen destacada o algo importante

4. Titulos <H1>, <H2>, etc.

   • Generalmente usado para poner el titulo de la página junto con el encebzado
     • De <H1> a <H6> se va reduciendo el impacto e importancia de estos.
       • No es necesario ocupar todos los <H...>, aunque por lo regular con el <H1> es suficiente

5. Etiqueta <NAV>

   • Delimita los menús de navegación
     • Esta etiqueta no nos limita a solo usar listas como menú, pero es lo recomendable

6. Etiqueta <MAIN>

   • Aumenta la accesibilidad de la página

7. Etiqueta < ARTICLE>

   • Delimita una unidad independiente de contenido

8. Etiqueta <SECTION>

   • Hace referencia a una parte del <ARTICLE>
     • En resumen, son los apartados y subapartados de un artículo

9. Etiqueta <ASIDE>

   • Se podrian considerar como contenidos "Relacionados" a nuestra pagina principal

10. Etiqueta <FOOTER>

    • Permite incluir información adicional depediendo del lugar donde este

11. Etiqueta <DIV<

    • Como ya se habia dicho, hace referencia a un contenedor Genérico
      • Cuando nuestro contenido no caiga sobre algúna otra etiqueta semántica
    • Se puede usar para aplicar un estilo CSS en particular
    • Tambien usado para englobar varios elementos

12. Errores comunes

    • Utilizar mas de un <HEADER> o uso excesivo de la etiqueta
    • Usar el contenedor <DIV> cuando hay una etiqueta semántica destinada