Maquetación Semántica

HTML 5 nos brinda una variedad de nuevas etiquetas que combinadas con la utilización de CSS nos permite crear estructuras más inteligentes y ordenadas.

La maquetación consta de dos etapas: la primera se realiza sólo con HTML 5 y se trata de crear una estructura de etiquetas para albergar todo el contenido y las distintas secciones. La segunda etapa se realiza sólo con CSS, y consiste en darle a la página el aspecto visual que queramos así como determinar la colocación en pantalla de todos los elementos.

Una de las novedades de HTML 5 es que permite una maquetación semántica gracias a sus nuevas etiquetas. ¿Qué es maquetación semántica? Significa que las etiquetas, pese a comportarse de la misma forma, significan cosas diferentes.

En versiones anteriores de HTML sólo había una etiqueta “contenedor” básica: <div>. Un menú, un artículo, un banner, una foto… Se enmarcaban dentro de la etiqueta <div> en casi todos los casos. Era muy cómodo de aprender, pero muy difícil de procesar con programas u otras páginas web.

Piensa en cuando compartes contenido en Twitter, Facebook o Google+, éstos automáticamente reconocen el texto del artículo e ignoran los menús de la página, seleccionan una foto para ilustrar el artículo y suelen acertar con cuál elegir, generan una descripción corta… Todo eso es posible porque en las páginas que compartes se utiliza probablemente una maquetación semántica junto con otras técnicas.

En otras palabras, la maquetación semántica aumenta la dimensión social de Internet. Y desde el punto de vista técnico, es más fácil leer y entender un código con etiquetas que tienen significado que no un batiburrillo de etiquetas <div> sin sentido alguno.

Conceptos AQUI

  • <header>: Usada para contener el encabezado.

  • <footer>: Contiene el pie de página del sitio.

  • <main>: Define el bloque central de contenidos del sitio.
  • <nav>: Contiene las funciones de navegabilidad.

  • <article>: Contiene una pieza de contenido independiente, como una noticia.

  • <section>: Utilizada para agrupar diferentes articulos o sub grupos de elementos, o definir una sección.

  • <aside>: Define un bloque lateral del main.