HTML5 ofrece nuevos elementos para poder definir con más claridad la estructura de una página web. De esta forma es más accesible a los buscadores, más clara y más fácil de mantener.

Elementos semánticos para layouts

Los nuevos elementos semánticos que definen las diferentes partes de una página en HTML5 son:

header	Define la cabecera de un documento o sección
nav	Define los enlaces de navegación
section	Define una sección en un documento
article	Define un artículo autónomo independiente
aside	Define contenido en una barra lateral separada del contenido principal
footer	Define el pie de página de un documento o sección
details	Define detalles adicionales
summary	Define la cabecera para el elemento details

El siguiente ejemplo utiliza los elementos <header>, <nav>, <section> y <footer> para crear una estructura con diferentes apartados:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
</style>
</head>
<body>
   <header>
      <h1>Galer&iacute;a de ciudades</h1>
   </header>
   <nav>
      Zaragoza<br/>
      Sevilla<br/>
      Valencia<br/>
   </nav>
   <section>
      <h1>Zaragoza</h1>
      <p>
         Zaragoza es la capital de la comunidad aut&oacute;noma de Arag&oacute;n. Es la quinta ciudad m&aacute;s 
         poblada de Espa&ntilde;a, con un &aacute;rea metropolitana de 700.000 habitantes.
     </p>
     <p>
         Situada a orillas del rio Ebro, Su nombre actual procede del antiguo top&oacute;nimo romano, 
         Caesaraugusta. El origen de la ciudad se remonta a Salduie, que fue el nombre de la ciudad 
         ib&eacute;rica sedetana situada en el solar de la actual Zaragoza desde la segunda mitad del siglo III 
        a. C.
     </p> 
   </section>
   <footer>
      Copyright &copy; Webdisenia.com
   </footer>
</body>
</html>