HTML 5

Para comenzar con este blog entraremos a fondo con los aspectos básicos de HTML 5. Ya que esta tan de moda y debido a las grandes ventajas que nos puede proporcionar al medio-largo plazo, detallaremos algunas de sus funciones y consejos a tomar en cuenta.

Ya hace un tiempo que HTML 5 salio al mercado y se ha vuelto muy popular debido al impacto que podría producir con los buscadores (SEO friendly), como es de esperar siempre al comenzar el aprendizaje del lenguaje buscamos saber los elementos de uso mas frecuente para una rápida integración.

Para ello detallamos las etiquetas que a mi parecer son fundamentales si quieres introducirte de lleno:

La estructura actual que comúnmente utilizamos en HTML 4:

Estructura HTML 4

Estructura HTML 4

La nueva estructura en HTML 5 seria la siguiente:

Estructura HTML 5

Nueva estructura en HTML 5

Bastante fácil pensando que llevamos algún tiempo maquetando sitios web.

Bien, ahora definamos como utilizar las etiquetas de uso frecuente:

  • Header: como su nombre lo dice, sera la cabecera de nuestro sitio web, generalmente aquí encuentras el logo de tu pagina, el titulo H1 y la navegación principal de tu sitio.
  • Hgroup: se utiliza para agrupar títulos tales como: H1, H2 – H6, etc. dentro del header o dentro de un section.
  • Section: esta etiqueta suele confundirse mucho con article, si es que va dentro de Article o fuera como un contenedor, si bien las especificaciones del estandar del HTML 5 no son muy claras, basta con aplicar un poco de lógica de acuerdo a su definición. Esta definición se basa que un elemento section sirve para contener información que semanticamente tiene relación entre si y “SIEMPRE” debe tener un titulo sea H1, H2-H6, etc. Con esto se diferencia enormemente de cuando utilizarlo. En el uso del día a día, simplemente hago uso de sections dentro de un article para indicar cada sección relacionada entre si y no un section como contenedor general.
  • Article: si tu sitio web es un blog, esta etiqueta te sera realmente útil para indexar y referenciar correcta y rápidamente cada articulo. Cada article esta formado por sections e incluso puedes hacer uso de etiquetas como header y footer para indicar información relevante
  • Aside: esta etiqueta sirve para incluir información que no esta tan relacionada con el sitio web, por ejemplo: los archivos por meses de tu blog, widget, gadgets o elementos que no son la información ni el centro principal de tu sitio web.
  • Footer: el pie de pagina para tu sitio, esto puede incluir copyrights, una navegación secundaria, o información referencial, como lo son direcciones o números de contactos.
  • Nav: este elemento es bastante fácil de asociar, simplemente sirve para indicarle a los buscadores que esta es tu navegación principal.

Con los aspectos básicos descritos anteriormente, estamos en condiciones de maquetar nuestra primera estructura web en HTML 5:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Tus palabras claves aqui..">
<meta name="description" content="Ejemplo para blog myhtmltips">
<title>Ejemplo HTML 5</title>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" >
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
	<div id="wrapper">
        <header id="header">
            <h1>Mi sitio web en HTML 5</h1>
            <nav id="navigation">
                <ul>
                    <li><a href="#" class="active">Inicio</a></li>
                    <li><a href="#">Somos</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
        </header>
        <div class="clear"></div>
        <div id="content">
            <article class="post">
                <header>
                    <hgroup>
                        <h1>Titulo de mi post</h1>
                        <h2>Subtitulo de mi post</h2>
                    </hgroup>
                </header>
                <section>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros ligula, fringilla gravida nunc. Mauris auctor ipsum nec lorem viverra pellentesque. Integer massa eros, tempor in pretium nec, lobortis eget erat. Aenean pellentesque, mi id hendrerit suscipit, lacus diam sollicitudin sapien, ac molestie libero orci nec odio. Nullam in ligula diam, sed mollis sapien. Pellentesque sed lacus metus, non semper risus. Sed purus lacus, pulvinar a posuere luctus, placerat ut nisi. Donec porta rhoncus placerat. Mauris blandit posuere interdum. Cras sollicitudin felis rutrum quam ultrices eget aliquam diam bibendum. Duis et euismod dui. Donec quis sollicitudin ligula.</p>
                    <p>Mauris accumsan tellus vel magna ultrices ut fermentum augue pulvinar. Proin at justo non nunc egestas dictum sed ac eros. Praesent venenatis est vel sapien facilisis vehicula. Pellentesque at tellus erat. Vivamus suscipit tellus non massa ullamcorper scelerisque posuere leo tincidunt. Vestibulum felis nunc, hendrerit et fermentum at, semper ut nisl. Sed vitae euismod risus. Duis aliquam nulla eget urna sodales aliquam. Suspendisse nunc arcu, porta eu accumsan a, placerat et nisl. Ut tincidunt mattis varius. Fusce sit amet felis nisi, a varius ante.</p>
                </section>
                <footer>Author: Javier Encalada <a href="http://referenteweb.blogspot.com/2011/12/introduccion-html-5.html">Visit the post</a></footer>
            </article>
        </div>
        <footer id="footer">
            <p>&copy; my copyrights 2011</p>
    </footer>
    </div>
</body>
</html>

Este es un ejemplo totalmente completo y trabajado desde cero, pero para quienes quieran inspeccionar el desarrollo mas a fondo les he subido el ejemplo online:

Demo online

Y además el código fuente para que lo analicen y aprendan rápidamente.

Archivo comprimido con los códigos fuentes

Nota importante:

Para que puedas utilizar los beneficios de HTML 5 debes hacer uso de los siguientes hacks que se incluyeron en la demo:

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

Esta linea de código es la encargada de crear los elementos mediante Javascript, lo que significa que si el explorador es menor a IE 9, se llamara a ese script y se crearan los elementos para que puedas manipularlos con CSS. Todo esto debido a que los elementos no existen en versiones anteriores a IE 9.

Además de este script debes asignar correctamente a que tipo de elemento corresponden en CSS, lo cual se soluciona con la siguiente linea de código:


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

Esta linea permite que al ser creados los elementos mediante Javascript puedan ser correctamente asociados, recordemos que existen elementos block, inline, inline-block, table, cell, etc. Y todos se muestran y manipulan de distinta manera.

Espero les resulte útil, más adelante comentaremos como maquetar y hacer un uso extensivo de estos recursos, pero para iniciarse en el tema, esto es lo básico.