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