Hace tiempo que tome un curso en línea de html5 y hoy he optado por compartir un poco de mis conocimientos con ustedes, su uso es igual de fácil que html aunque aparecen nuevas etiquetas que tendremos que aprendernos, y desaparecen unas que tendremos que olvidar, aunque esto es otro tema.
La estructura básica es la siguiente, los nombres de las etiquetas nos dan una idea de para qué sirve cada una, aunque igual explicaré por más obvio que sea:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titulo de la web</title>
</head>
<body>
<header>
<hgroup>
<h1>Phperos</h1>
<h2>Tu Comunidad de PHP</h2>
</hgroup>
<nav>
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4</li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Titulo del articulo</h2>
<p>Contenido</p>
</article>
<aside>
<h3>Publicidad</h3>
<p>¿Quieres aprender a programar? <mark>entra a Phperos</mark></p>
</aside>
</section>
<footer>
Derechos de autor.. por ejemplo :P
</footer>
</body>
</html>Doctype: Anteriormente manejábamos distintos doctype para decirle al navegador como leer nuestra web, ahora, con html 5 solo necesitamos de uno: <!DOCTYPE HTML>. Nada tan simple como esto.
Head y Body: Si estas aprendiendo html5 antes que html, es mejor que vuelvas cuando ya tengas dominado html
header: La etiqueta header, nos sirve para indicar el inicio del header de nuestro sitio web, generalmente ponemos cosas como el logo y eslogan de nuestro sitio, aunque podemos poner cualquier cosa.
hgroup: La etiqueta hgroup nos ayuda a organizar todos los titulos, es decir, de <h1> a <h6> en un mismo lugar, esta etiqueta solo puede contener estos elementos por dentro, no se pueden agregar párrafos (<p>), divs, imagenes o cualquier otra cosa.
nav: La etiqueta nav, como es de suponer, es para dar inicio al menú de nuestra página web, después de ésta vienen las etiquetas ul y li para ordenar nuestro menú.
section: Section nos ayuda, por ejemplo si eres blogero o tienes una página de noticias, a definir una sección en el contenido de nuestro sitio, dentro de ella pondremos por ejemplo las noticias.
article: Ésta etiqueta, igual como indica su nombre es para dar inicio a un artículo de un sitio web, alojando dentro de ella imágenes, divs, párrafos, etc...
aside: La etiqueta aside, es un tanto complicada de entender (al menos para mí) pero un ejemplo claro, es tener dos artículos, y en medio de ellos meter una publicidad, esta etiqueta nos ayudará a ordenar todos los elementos de la publicidad entre los dos <article> y sus contenidos
mark: la etiqueta mark es para resaltar el texto que tenemos dentro, de una publicidad por ejemplo.
footer: Footer, como sabemos es la última parte de nuestra página, donde se ponen por ejemplo un mapa de nuestro sitio o bien, los copyright o derechos de autor :p.
Hay más etiquetas de html5, por ahora solo manejaremos estas para darnos una idea de cómo será la estructura en un tiempo, yo aún no implemento html 5 en mi web al 100% pues aún muchos usuarios no pueden dar soporte a dicha tecnología, aunque como diseñadores web, es nuestra obligación dar muerte a navegadores pésimos como internet explorer y sus versiones antiguas pues si no lo hacemos, el usuario nunca lo actualizará.
Para que se den una idea, les dejaré la versión en html del código que tenemos arriba.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<div id="header">
<h1>Phperos</h1>
<h2>Tu Comunidad de PHP</h2>
<div id="menu">
<ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
<li>Menú 4</li>
</ul>
</div>
</div>
<div id="contenido">
<div class="articulo">
<h3>Titulo del articulo></h3>
<p> Contenido </p>
</div>
<div class="publicidad">
<h3>Publicidad</h3>
<p>¿Quieres aprender a programar? <mark>entra a Phperos</mark></p>
</div>
<div class="articulo">
<h3>Titulo del articulo></h3>
<p> Contenido </p>
</div>
</div>
<div id="footer"> Copyrigh blablabla...</div>
</body>
</html>Si se fijan, en el código de arriba, nos podemos llegar a perder entre las etiquetas que cierran los div pues tenemos tantos, y tan juntos que es un tanto difícil diferenciar si no pones atención, el doctype es más largo y es uno de los varios que hay. Con HTML 5, como podemos ver, entre una de las tantas opciones que nos brinda, nos da una forma de organizar, y tener bien hecho nuestro sitio web.
Es tan simple, y tan claro que con estas nuevas formas de crear un sitio, implementando un poco de CSS, CSS3 Jquery o CANVAS, podremos llegar muy lejos si asi lo queremos.
Para terminar, les dejo unas demo, de lo que se puede lograr con html5 y css3, y claro algún otro framework por ahí, la mayoria de esto solo funciona con google chrome, si tienes IE ni se te ocurra entrar
.
http://mrdoob.com/projects/chromeexperiments/ball_pool/ - Ball Pool es un experimento de Google Chrome en HTML5 en el que vas a encontrarte con una piscina de pelotas para divertirte moviendolas con el cursor.
http://hakim.se/experiments/html5/blob/03/ - Una burbuja que se puede juntar/separar xD
http://lights.elliegoulding.com/ - Mi favorito, al verlo me he quedado sin palabras. (Cuidado con este, es un tanto pesado y te puede llegar a "pegar" el navegador, aunque vale la pena correr el riesgo
.
