Estructurando nuestra web con HTML5

Guardado en: Web

14:20 26/01/2008

Este artículo está basado en el borrador público del estándar HTML5. La información aquí escrita podría no ser válida cuando se apruebe el estandar definitivo.

HTML5 va a suponer un paso importante hacia la web semántica. Las nuevas etiquetas para el marcado permiten describir mejor el contenido de nuestros documentos, lo que mejorará el tratamiento que dan a la información los navegadores y los motores de búsqueda.

Secciones, encabezados y pies

Hasta ahora para definir las distintas partes de un documento era necesario el uso de <div>s con el atributo class para organizar el contenido. Aunque el uso de clases es útil para nosotros como desarrolladores, los UAs poco pueden hacer para interpretar el significado semántico de las mismas. Si nosotros escribimos <div class="header"> o <div class="cabecera"> sabemos que se corresponde a la cabecera de un bloque, pero un navegador o un motor de búsqueda no sabría diferenciar ese bloque de cualquier otro.

Con las nuevas etiquetas <section>, <header> y <footer> podremos definir con exactitud la función que desempeña cada bloque de nuestro documento.

Por ejemplo, una entrada de un blog en HTML4 es más o menos así:

<div class="articulo">
	<div class="articulo-cabecera">
		<h1>Titulo de la entrada</h1>
		<p class="meta">Escrito el 19/07/2008 - 12:34</p>
	</div>

	<p>Lorem ipsum dolor...</p>
	<div class="foto">
		<img src="una-foto.jpg">
		<p>Texto de pie de foto</p>
	</div>
	...

	<div class="relacionados">
		<ul>
			<li><a href="..">Articulo relacionado 1</a></li>
			<li><a href="..">Articulo relacionado 2</a></li>
			<li><a href="..">Articulo relacionado 3</a></li>
		</ul>
	</div>

	<div class="articulo-pie">
		<p>Comentarios: <a href="...">40</a></p>
	</div>
</div>

Utilizando el nuevo estandar, nuestro marcado es mucho más descriptivo sobre que papel desempeña cada bloque de texto dentro del documento:

<article>
	<header>
		<h1>Titulo de la entrada</h1>
		<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
	</header>

	<p>Lorem ipsum...</p>
	<figure>
		<img src="una-foto.jpg">
		<legend>Texto de pie de foto</legend>
	</figure>
	...

	<aside>
		<ul>
			<li><a href="..">Articulo relacionado 1</a></li>
			<li><a href="..">Articulo relacionado 2</a></li>
			<li><a href="..">Articulo relacionado 3</a></li>
		</ul>
	</aside>

	<footer>
		<p>Comentarios: <a href="...">40</a></p>
	</footer>
</article>

En el ejemplo podeis ver que he utilizado <article> en lugar de <section>. No es más que una forma más precisa de definir el tipo de sección en el que estamos.

El estandar no limita el número de <header> o <footer> que podemos poner en una página. Podemos poner tantos como secciones tenga el sitio. Por ejemplo la portada de nuestro hipotetico blog podría quedar así:

<body>
	<header>
		<h1>Titulo del blog</h1>
		<p>Tagline</p>
	</header>
	<section class="articulos">
		<article>
			<header>
				<h2>Titulo de la entrada</h2>
				<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
			</header>

			<p>Lorem ipsum...</p>

			<footer>
				<p>Comentarios: <a href="...">40</a></p>
			</footer>
		</article>

		<article>
			<header>
				<h2>Titulo de la otra entrada</h2>
				<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
			</header>

			<p>Lorem ipsum...</p>

			<footer>
				<p>Comentarios: <a href="...">40</a></p>
			</footer>
		</article>
	</section>
	<footer>
		© blablba....
	</footer>
</body>

Para más información no dejéis de consultar el apartado de secciones en el estandar.

1 comentario

TrackBack