Nuevas etiquetas en HTML5

En esta segunda parte vamos a hablar de las nuevas etiquetas, para que sirven y algunos ejemplos de uso. Ya que una imagen vale más que mil palabras veamos la diferencia entre el viejo HTML y el nuevo HTML5:

Como vemos la diferencia principal es que en HTML5 ya no usamos clases o ids para identificar las diferentes partes de nuestra estructura HTML.

Ahora que ya vimos la diferencia veamos para que sirve cada etiqueta:

<header>
Mayormente se utiliza para definir el encabezado de una página. Una buena práctica es incluir dentro de él el logo y el slogan del sitio.

<header>
<img src="logo.jpg" alt="" />
<h1>Nombre del sitio</h1>
<p>Slogan</p>
</header>

<nav>
Es el sector que designamos al menú de navegación de nuestro sitio web.

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="seccion.htm">Sección</a></li>
<li><a href="contacto.htm">Contacto</a></li>
</ul>

<form id="buscar">
<input name="query" type="text" /> <input type="submit" value="Buscar!" />
</form>
</nav>

<section>
Sencillamente es la parte donde debe ir el contenido de nuestra página.

<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

<article>
Ésta etiqueta es un bloque de información o sub etiquetas. Para entenderlo mejor podemos referirnos a que un article es un artículo de un blog donde podemos encontrar un título, texto, imágenes, links, etc.

<article>
<h2>Titulo de una noticia</h2>
<p>Texto de la noticia</p>
<img src="imagen.jpg" alt="" />
</article>

<article>
<h2>Titulo de otra noticia</h2>
<p>Texto de la segunda noticia</p>
<img src="imagen2.jpg" alt="" />
</article>

<aside>
Es un fragmento de nuestra página que no tiene demasiada relevancia con el contenido en sí; por ejemplo nuestros anuncios de adsense, un banner, etc.

<aside>
<script>codigo adsense</script>
</aside>

<footer>
Es el denominado pie de página de una página y generalmente se utiliza en la parte final de nuestra página.

<footer>
- @copy; Sitio.com -
<a href="contacto.htm">Contacto</a>
</footer>

Si quieres conocer las etiquetas HTML5 que faltan a continuación un listado:
<audio>
<canvas>
<figure>
<video>

Hay otras etiquetas pero no las incluí porque creo que no son útiles o, en su mayoría, no son compatibles con todos los navegadores.

Hasta aquí llego el segundo artículo, en el próximo hablaremos de CSS3 y sus capacidades.

Como siempre, no olviden comentar, si tienen preguntas sobre algo comentado en este artículo, sugerencias, etc.

Saludos!