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:
| 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>:
|
| 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>. |
Ejercicio Guiado
Estructura1)
- Copia el siguiente código en un nuevo documento estructura1.html y preséntalo en el navegador
- 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 © 2012-2013
</footer>
</body>
</html>
|
