Nuevas etiquetas HTML 5

23/02/20130 comentarios

Hola a todos, hoy os explicare las nuevas etiquetas estructurales de HTML 5.

HTML 5 trae nuevas etiquetas estructurales para nuestros documentos HTML, que nos permitirán definir la estructura de nuestra web, haciendo que los motores de búsqueda indexen mejor nuestros contenidos. Van dentro de body:

<section>: permite marcar contenido de una página relacionado con un tema concreto.
<article>: es una unidad de contenido sobre un tema específico que ira dentro de una sección.
<header>: se utiliza para indicar cuál es la cabecera de un artículo o texto.
<hgroup>: permite agrupar un conjunto de encabezados y marcarlos como perteneciente al mismo contenido.
<nav>: se utilizara para crear barras de navegación. Permiten no confundir a los motores de búsqueda cuando hay un conjunto de enlaces.
<footer>: se reserva para los pies de página. Son de utilidad para que los buscadores obtengan información como fechas y nombre de los autores.
<aside>: se utilizan para indicar información relacionada con el artículo o texto pero que no tiene por qué ser parte del mismo. Un ejemplo muy usado es para la publicidad.

Todas estas etiquetas visualmente no tienen ningún efecto, pero recuerda que es para definir la estructura de nuestra web.

Aquí lo vemos gráficamente un ejemplo:

Veamos un ejemplo practico:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Documento sin título<title>
	</head>
	<body>
		
		<header>
			Cabecera
		<header>
		
		<nav>
			<a href="#">Enlace 1</a>
			<a href="#">Enlace 2</a>
			<a href="#">Enlace 3</a>
		</nav>
		
		<section> 
			<h1>Seccion 1</h1>
			<article>
				<hgroup>
					<h1>
						titulo articulo 1
					</h1>
					<h2>
						subtitulo articulo 1
					</h2> 
				</hgroup> 
				<p>texto articulo 1</p> 
			</article> 
			<article> 
				<hgroup> 
					<h1>
						titulo articulo 2
					</h1>
					<h2>
						subtitulo articulo 2
					</h2> 
					</hgroup> 
						<p>texto articulo 2</p> 
			</article> 
		</section> 
		
		<section> 
			<h1>Seccion 2</h1> 
			<article> 
				<hgroup> 
					<h1>titulo articulo 1</h1>
					<h2>subtitulo articulo 1</h2>
				</hgroup> 
				<p>texto articulo 1</p> 
			</article> 
			
			<article> 
				<hgroup> 
					<h1>titulo articulo 2</h1> 
					<h2>subtitulo articulo 2</h2> 
				</hgroup> 
				<p>texto articulo 2</p> 
			</article> 
		</section> 
		
		<aside>Publicidad</aside> 
		
		<footer> pie de pagina </footer> 
	</body> 
</html>

Espero que os sea de ayuda.