Maquetación en HTML5

HTML5 nos brinda la posibilidad de poder añadir más semántica a nuestras webs, pudiendo hacer distinciones entre bloques de contenido utilizando etiquetas como <ARTICLE>, <SECTION>, <HEADER>, <FOOTER>, … en lugar de poder distinguir únicamente por estructura entre elementos de bloque o elementos en línea.

Como siempre, el principal problema al que nos enfretamos es la retrocompatibilidad con los navegadores ya que las versiones más antiguas de estos no entienden estas estructuras y no las representan de forma correcta.

Lo bueno es que, gracias a un poco de CSS y Javascript podemos "ayudar" a dichos navegadores a "entender" dichas etiquetas.

Estructura de página en HTML5. Olvidándonos del DOCTYPE

La declaración de una página en HTML5 es mucho más sencilla que en las versiones anteriores:

<!DOCTYPE html>
<html lang="es">
	<head>
		<!-- Title -->
		<title>{title}</title>


		<!-- Meta data -->
		<meta charset="UTF-8">
		<meta name="description" content="{meta_descripcion}" /> 
		<meta name="keywords" content="{meta_keywords}" /> 
		<meta name="robots" content="index,all" />

		<!--[if lte IE 8]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->		

		<!-- Stylesheets -->
		<link rel="stylesheet" href="style/style.css">

		<!-- Javascripts -->
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>

	<body>
</body>
</html>
De todo esto, nos tiene que haber llamado la atención una cosa:
	<!--[if lte IE 8]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->	

Esta línea indica que si nuestra versión de navegador es más pequeño o igual que Internet Explorer 8, entonces hay que cargar el fichero html5.js que informará al navegador de los nuevos elementos.

Maquetación de los nuevos elementos

Al inicio de nuestra hoja de estilos, normalmente aplicamos una serie de estilos que sirven para "resetear" las hojas de estilos propias del navegador y así intentar dar uniformidad a como se visualiza la página en distintos navegadores y sistemas operativos.

Este sería un ejemplo de dichas reglas:

/* Reset the stylesheet */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, textarea, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
address, article, aside, audio, canvas, command, datalist, 
details, dialog, figure, figcaption, footer, header, hgroup,
keygen, mark, meter, menu, nav, progress,
ruby, section, time, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

Como vemos, hemos incluido además de las etiquetas típicas de XHTML1.1 y HTML 4.1, las nuevas etiquetas de address, article, aside, audio, canvas, command, datalist, details, dialog, figure, figcaption, footer, header, hgroup, keygen, mark, meter, menu, nav, progress, ruby, section, time, video.

Además, con esta regla, vamos a especifcar cuáles de dichos elementos queremos que sean tratados como elementos de bloque.

/* HTML5 elements that are blocks */
aside, header, footer, article, section, 
nav, figure, figcaption {
	display: block;
}

Gracias a estos sencillos pasos podemos empezar a maquetar nuestras webs utilizando las ventajas de HTML5 ya que permitirán que los resultados de motores de búsqueda sean más precisos con nuestros resultados además de permitir, de forma sencilla, la sindicación de contenidos o la publicación de artículos en las redes sociales.

Para más información sobre HTML5 puede leer la entrada Cómo usar HTML5

Comentarios

Comentario de remizero - 17 de Marzo de 2012 - 19:47
Buenas amigos. En estos días me he dedicado a leer sobre las bondades de HTML5 y sobre maquetación y me han surgido una serie de interrogantes, pero la que más me trae de los pelos es la siguiente: Es conveniente asignarle directamente los parámetros a las etiquetas (p.e. section, article, nav, etc.) o bien, seguir trabajando con clases y asignarselas a las mismas tal como se hace para los DIV. De antemano muchas gracias por sus respuestas.
Comentario de Imaginanet - 20 de Marzo de 2012 - 17:55
Hola. Son dos cosas distintas. La idea de utilizar HTML5 es para añadir semántica a nuestras webs de forma que sea más fácil clasificar su contenido. Utilizar clases para dar estilo nos sirve para separar el contenido de la presentación. Como ves, una cosa no quita a la otra. Un saludo
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí