Marcado semántico y diseño de página

Los elementos semánticos describen su significado o propósito claramente al navegador y al desarrollador. Compárese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una división o una sección de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.

< div >

Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>. Esto da más significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propósito de ese marcado.

< div id ="header">

En HTML5 hay nuevos elementos semánticos enriquecidos que transmiten el propósito del elemento a ambos desarrolladores y navegadores.

< header >

El W3C obtuvo datos de miles de millones de páginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descartó div1, div2, etc. , tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.

Aquí están algunos de los nuevos elementos semánticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time

Debido a la riqueza semántica, probablemente pueda adivinar lo que la mayoría de estos elementos hacen.

Pero por si acaso, aquí va una visualización:

Los Headers y footers resultan claros, mientras que nav crea una barra de menú o navegación. Puede utilizar sections y articles para agrupar su contenido. Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.