En HTML5 una página se estructura mediante etiquetas donde el nombre de la etiqueta nos va a indicar el tipo de contenido.

A estas etiquetas se le denomina etiquetas semánticas.

Hasta ahora las etiquetas que hemos visto se centran en la forma de presentar los contneidos en el navegador, las etiquetas que vamos a ver a conitnuación, se centran en el tipo de contenido que almacena, dejando el formateado de la presentación a las hojas de estilo, que veremos más adelante.

De forma gráfica la estructura de un documento HTML5 entre las etiquetas <body> y </body> es:

Estructura Semántica

 Etiqueta  Utilización
section

El elemento <section> define una sección de un documento.

Según la documentación HTML5 del W3C: "Una sección es una agrupación temática de los contenidos, por lo general con una cabecera."

article

El elemento <article> especifica el contenido independiente, autónomo.

Un artículo debe tener sentido por sí mismo y que debería ser posible distribuir de forma independiente del resto del sitio web.

Ejemplos en los que se puede utilizar un elemento <article>:

  • Mensaje Foro
  • Blog post
  • Noticias
  • Comentario
nav

El elemento <nav> define un conjunto de vínculos de navegación.

El elemento <nav> está destinado a grandes bloques de enlaces de navegación. Sin embargo, no todos los enlaces en un documento debe ser dentro de un elemento <nav>!

aside

El elemento <aside> define un cierto contenido, aparte de los contenidos que se coloca en (como una barra lateral).

El contenido de un lado debe estar relacionado con el contenido circundante.

header

El elemento <header> especifica un encabezado de un documento o sección.

El elemento <header> debe utilizarse como un contenedor para la introducción de contenidos.

Se pueden usa varios elementos <header> en un solo documento.

footer

El elemento <footer> especifica un pie de página de un documento o sección.

Un elemento <footer> debe contener información acerca de su elemento contenedor.

A pie de página suele contener el autor del documento, información de copyright, enlaces a términos de uso, información de contacto, etc

Usted puede tener varios elementos <footer> en un solo documento.

figure

La etiqueta especifica <figure> contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc

Mientras que el contenido del elemento <figure> está relacionada con el flujo principal, su posición es independiente de la corriente principal, y si se quita no debería afectar el flujo del documento.

La etiqueta <figcaption> define un título para un elemento <figure>.

El elemento <figcaption> puede ser colocado como el primer o el último hijo del elemento <figure>.

 

ActividadEjercicio Guiado

 

Estructura1)  

  1. Copia el siguiente código en un nuevo documento estructura1.html y preséntalo en el navegador
  2. Coloca un comentario a cada una de las etiquetas que suponen un bloque semántico de la estructura HTML5

<!DOCTYPE html>
<html lang="es">

<head>

  <meta charset="iso-8859-1">

  <meta name="description" content="Ejemplo de HTML5">

  <meta name="keywords" content="HTML5, CSS3, JavaScript">

  <title>Este texto es el título del documento</title>

  <link rel="stylesheet" href="misestilos.css">

</head>

<body>

  <header>

    <h1>Este es el título principal del sitio web</h1>

  </header>

  <nav>

    <ul>

      <li>principal</li>

      <li>fotos</li>

      <li>videos</li>

      <li>contacto</li>

    </ul>

  </nav>

  <section>

    <article>

      <header>

        <h1>Título del mensaje uno</h1>

      </header>

      Este es el texto de mi primer mensaje

      <footer>

        <p>comentarios (0)</p>

      </footer>

    </article>

    <article>

      <header>

        <h1>Titulo del mensaje dos</h1>

      </header>

      Este es el texto de mi segundo mensaje

      <footer>

        <p>comentarios (0)</p>

      </footer>

    </article>

  </section>

  <aside>

    <blockquote>Mensaje número uno</blockquote>

    <blockquote>Mensaje número dos</blockquote>

  </aside>

  <footer>

    Derechos Reservados &copy; 2012-2013

  </footer>

</body>

</html>