En esta Guía se tratará de explicar las nuevas etiquetas de HTML5 para la maquetación de una Web, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla. Se darán respuesta a las siguientes cuestiones: ¿Qué es HTML? ¿En qué consiste HTML? ¿Cómo se escriben las etiquetas? ¿Cómo se muestra una página Web? ¿Qué es la semántica HTML? ¿Qué es HTML5? ¿Por qué surge HTML5? ¿Qué va a pasar con las Web en HTML4? ¿Cómo se crea una página Web? ¿Cómo se declara un documento HTML5? ¿Qué etiquetas se usan para maquetar en HTML5? ¿Qué herramientas usaremos? El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/) Para más información puedes mirar la web: http://enred20.org/node/39 O ponerte en contacto con nosotros o con la Asociación EnRed 2.0

1. ¿Qué es HTML?
HTML son las siglas de HyperText Markup Language (“lenguaje de marcado de hipertexto”), es
decir, lenguaje que se usa para elaboración una página Web.
HTML utiliza una estructura de marcado de la información mediante etiquetas, en formato de
hipertexto, para incluir textos, imágenes, vídeos, sonidos, etc.
Este lenguaje, HTML, es leído e interpretado, por un navegador la Web, mediante el protocolo
HTTP (HyperText Transfer Protocol - Protocolo de Transferencia de Hipertexto) y nos muestra
el contenido en forma de documento, que es lo que conocemos cómo una página Web.
HTML se escribe con “etiquetas”, van rodeadas por corchetes angulares (< - >) y cada etiqueta
tiene unos atributos y eso atributos tiene unos valores.
¿Qué es la semántica HTML?
La semántica HTML es, utilizar las etiquetas para que realice las funciones que tienen y fueron
creadas, es decir, que cada etiqueta de HTML, fue creada para reflejar un tipo de contenido, y
no se debe usar para otros propósitos, por ejemplo:
 Un párrafo está contenido entre la etiqueta <p></p>.
 Una lista ordenada está contenido entre la etiqueta <ol></ol>.
 Un bloque de texto citado es contenido entre la etiqueta <blockquote></blockquote>
Los elementos HTML no son usados para otro propósito que no sea el de la semántica. Por
ejemplo:
 h1 contiene encabezados; no es para hacer el texto más grande.
 blockquote contiene una cita larga; no es para aplicar sangría al texto.
 Un elemento de párrafo vacío (p) no se usa para saltar líneas.

2. ¿Qué es HTML5?
HTML5 es última la actualización de HTML.
Pero en realidad, HTML5 es un término de que se usa para agrupar varias tecnologías de
desarrollo de páginas Web: HTML5, CSS3 y nuevas capacidades de JavaScript (en especial con
la nueva etiqueta de HTML5: canvas).
¿Por qué surge HTML5?
Porque la versión anterior de HTML, es decir HTML4, carece de características necesarias para
soportar, los nuevos contenidos que se estaban incluyendo las páginas Web y se necesitaban
plugins de otras aplicaciones, como Adobe Flash, para que los navegadores mostrasen esos
contenidos.
Flash ha sido usado para reemplazar estas carencias que tenía HTML, a la hora de desarrollar
Web apps y que superaran las habilidades de un navegador: Audio, video, Webcams,
micrófonos, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras
cosas.
Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y sobre todo que existe una gran
compatibilidad y competencia entre navegadores, para incorporar los estándares de HTML5.
Además ha originado una guerra entre las compañías de estos navegadores para incorporar los
nuevos estándares de HTML5.
También el uso de JavaScript y de FrameWorks, cómo jQuery, Dojo.js, Ext JS, ShowCase, ect,
han ayudado a que estos contenidos se muestre en el navegador, sin la necesidad de tener que
instalar, estos plugins.

3. ¿Qué va a pasar con las Web en HTML4?
HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML seguirá
funcionando sin problemas en HTML5.
¿Cómo se crea una página Web?
Tenemos que saber que una página Web, se crea a partir de diferentes tecnologías.
 HTML
 CSS
 JavaScript
A la hora de crea y maquetar una página Web, lo podemos hacer dos formas diferentes:
1. Escribimos tanto todo el código dentro del documento HTML, es decir, los etilos y el
código JavaScript, mezclado con el código HTML. Esta opción en un principio parece
más ventajosa, pero en el caso de que tengamos que modificar el código nos va a
resultar más tedioso y complicado. Y sobre todo si tenemos que modificar los estilos
de un sitio Web, tendremos que hacerlo página por página.
2. Escribimos el código CSS y JavaScript en documentos distintos y luego hacemos
referencia a esto documento, en el head del documento HTML, es decir, los etilos y el
código JavaScript, están en archivos distintos del código HTML. Esta opción en un
principio parece más complicada, pero en el caso de que tengamos que modificar el
código nos va a resultar más fácil y cómodo. Y en el caso de tener que modificar los
estilos de un sitio Web, sólo tendremos que modificar la línea del estilo deseado y se
aplicará a todas las páginas del sitio Web, de forma automática.
Cómo podéis comprobar la segunda opción, es un poco más complicada de realizar en tiempo
de desarrollo, pero las ventajas que proporciona a la hora de realizar modificaciones son
innegables.

4. ¿Cómo se declara un documento HTML5?
Para empezar a usar HTML5, lo único que se tiene que hacer es colocar el DOCTYPE, al
principio del documento, es decir, antes de la etiqueta <html>.
Ejemplo en HTML5:
<!DOCTYPE html>
Esta declaración de DOCTYPE está más simplificada, que cuando se declaraba un documento
en XHTML y te permite usar todas las habilidades de HTML5.
Ejemplo en XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es" />
Etiqueta dir = LTR | RTL [CI]:
Este atributo específica la dirección del texto, es decir, texto que no tiene direccionalidad
heredada según se define en [UNICODE] de los contenidos o los valores de los atributos de un
elemento. Valores posibles:
 LTR: Texto o tabla de izquierda a derecha (Left-to-right).
 RTL: Texto o tabla de derecha a izquierda (Right-to-left).

5. ¿Cuáles son las nuevas etiquetas de HTML5?
La mayoría de las nuevas etiquetas de HTML5 no tienen una representación especial en
pantalla y se comportan cómo un <div> o un <span>. Pero cada una tiene un significado
semántico superior a un simple div o span.
<header>
Hacer lo mismo que cuando declarábamos en nuestro documento HTML, la capa de la
cabecera con: <div id="header"> en los proyectos Web.
<header> está diseñada para reemplazar la necesidades de crear una capa (div) sin significado
semántico.
<hgroup>
Muchos header necesitan múltiples títulos, cómo un Blog que tiene un título del nombre del
Blog o sitio Web y una línea (tagline) con el lema o explicando el contenido Blog o sitio Web.
<hgroup> permite escribir un h1, h2 y h3 dentro del header sin afectar el SEO, además nos
permitirá usar otra etiqueta h1 dentro del contenido del sitio Web.
En el HTML actual, sólo puedes usar h1 una vez por página Web o el h1 pierde prioridad en el
SEO.
<nav>
Tiene el mismo valor semántico que <header>, <nav> está diseñada para insertar la barra de
navegación principal, es decir, los botones para navegar dentro del sitio Web.

6. Se puede colocar cualquier etiqueta dentro, pero lo recomendado es usar listas <ul>. Y sólo
puedes haber un elemento <nav> por página Web.
<section>
Tiene el mismo valor semántico que <header>. Se usa para definir la sección donde está el
contenido dentro de la página Web, es decir, donde vamos a escribir lo que queremos que el
usuario lea en nuestra página Web. Se puede crear distintas secciones en una página Web
siempre y cuando cada sección tenga contenido único.
Por ejemplo:
En un Blog, sería la zona donde están los posts o artículos.
En un video de YouTube, habría un section para el video, uno para los datos del video, otro
para la zona de comentarios.
<article>
Define zonas únicas de contenido independiente. Por ejemplo:
En el home o página de inicio de un Blog, cada post o artículo sería un article y cada uno de sus
comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un
aside. Por ejemplo:

7. En un Blog, el aside es la barra lateral de información o de enlaces a otro Blog. En el home de
un periódico, puede ser el área de indicadores económicos, el tiempo, enlaces a sígueme en las
redes sociales.
¿Cuándo se debe usar div, aside, section o article?
Hay que de diferenciar el uso de div, section y article. Aunque no es sencillo, tampoco es muy
complicado, para entender cuáles son los detalles que diferencian estas tres etiquetas, que
parecen que tienen las mismas funciones.
La diferencia está principalmente en la semántica que le vamos a dar al contenido. Por eso
usaremos:
 Article: para representar cualquier información que tenga un sentido por él mismos.
Un ejemplo: un artículo de un Blog, el resumen de ese artículo en una portada de Blog,
una pregunta en un foro, un comentario…
 Section: para agrupar contenido relacionado. Puede servirnos para enmarcar un
conjunto de artículos, o artículos que se dividan en secciones.
 Aside: para agrupar contenido que no tiene relación con el contenido principal, cómo
pueden ser enlaces a antiguos artículos, redes sociales, enlaces al otras Web,
publicidad, etc.
 Div no tiene intención semántica, es simplemente un contenedor de contenido.
Imaginemos un documento, que esta viene divida en secciones, para a entender mejor esta
información. Y las secciones pueden estar divididas en más secciones, que aglutinan el
contenido del documento (los artículos).
<footer>
Es el pie de página. La etiqueta footer representa el pie de un documento o sección. La
información que se suele añadir en este bloque es el autor del documento, enlaces a
contenido relacionado, información de copyright, avisos legales, etc.

8. Igualmente podremos agregar al pie información de contacto. Recordar que para ello
disponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar de
su nombre, este elemento no tiene porque ir al final del documento o sección aunque suele
ser lo más normal.
Atención: div no está muerto
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando
necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado
semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.
Ejemplo de código con HTML5
<header>
<hgroup>
<h1>El Blog de Freddie Mercury</h1>
<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>
</hgroup>
</header>
<nav>
Aquí va la botonera de navegación
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.

9. </aside>
<footer>
Pie de página, copyright, avisos legales, etc.
</footer>
Las etiquetas nuevas "importantes" de HTML5
Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y un buen
desarrollo Web, no es la razón por la que todo el mundo habla de HTML5.
Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las
personas que alaban su uso. Específicamente, las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta
codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.
<audio>
Inserta audio sin necesidad de plugins. Se puede usar múltiples formatos, en especial mp3,
pero también depende del navegador.
<input>
Input ya existía cómo la etiqueta para insertar cajas de texto y botones en los formularios,
pero ahora es más poderosa, con la capacidad de insertar cajas tipo "email" que se
autovalidan, calendarios tipo "date", números, entre otras.
<canvas>

10. Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de
Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.
La segunda revolución de la Web y el soporte de HTML5 en navegadores antigüos
HTML5 la incorporación al desarrollo Web nuevas habilidades para facilitar la inserción
<video>, <audio> y <canvas>, con estos elementos, que cada vez eran más que necesarios, y
evitar la necesidad de recurrir a elementos externos, ni la instalación de plugins.
Sin embargo, no es el primer gran cambio de Internet. La primera gran revolución del
desarrollo Web vino en el 2004 con Gmail, que puso en funcionamiento el objeto
XmlHttpRequest, más conocido como AJAX.
Pocos son los que saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en
1999. Sí, el navegador responsable de detener la innovación de los estándares Web, es
también el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook,
Google Maps o quizás Twitter, habrían sido inviables.
Internet Explorer, es también hoy la razón de la poca implementación de HTML5, en muchos
sitios Web, porque no incorporan los estándares de HTML5, hasta Internet Explorer 9, que sólo
se puede instalar en Windows Vista y 7.
Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3
funcionen en IE. Gracias a los grandes hackers del mundo:
 HTML5 Enabling Script: Permite usar las etiquetas semánticas dentro de IE6, 7 y 8
como si fueran div normales y permite utilizar CSS3. Sin este script, las etiquetas de

11. HTML5 son ignoradas en por el navegador IE y es imposible maquetar en HTML5, y que
se vea correctamente IE6, 7 y 8.
 IE-CSS3: Este script permite usar cosas como bordes redondeados y sombras sobre
objetos de CSS3 en IE6, 7 y 8.
 Selectivizr: Librería JS que nos simula el comportamiento de CSS en los navegadores
IE6-IE8.
 Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene
soporte para múltiples capacidades de Javascript, HTML5 y CSS3.
 Html5shiv: El código añade nuevos elementos HTML5 y también es compatible con la
impresión de elementos HTML5 e incluye los estilos predeterminados para los
elementos de HTML5, como bloque sobre el artículo y sección.
Para incluir Html5shiv en una página Web, sería:
<header>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</header>
Nuevas capacidades de JavaScript
JavaScript, el lenguaje favorito del desarrollador de FrontEnd y ha recibido muchas habilidades
y funcionalidades nuevas. Las más importantes son:
Web Storage
Las cookie es una forma cutre de guardar información en el lado del cliente, pero también es la
única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio.
Esto es muy poco, pero todo el contenido de las cookies va pegado a las peticiones HTTP que
se hagan al servidor. Lo que significa que por cada vez que el usuario recarga la página se tiene
que subir los KB que pesan todas las cookies que le hemos dado de nuevo al servidor.

12. Con Web Storage se soluciona este problema. Son variables que se pueden guardar en el disco
del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB
y no sólo texto. Cualquier tipo de datos cabe en un Storage.
Web SQL
Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9
declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficiente
para la mayoría de usos. Así que esto por ahora no sirve.
Web Workers
¿Sabías que Javascript sólo puede hacer una cosa al tiempo? Es una de las razones por la que
las Web apps son simples, ya que la multitarea es imposible. Web Workers soluciona eso y
permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas
complejas más veloces gracias al multithreading.
Web Sockets al igual que XMLSockets en Actionscript, permite hacer aplicaciones multiusuario
en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de
Web Sockets, es posible usar implementaciones multiusuario en Javascript como
PubSubHubBub.
Arrastrar y soltar
El gesto de arrastrar y soltar ahora es posible, gracias a HTML5. Un ejemplo, sería: Gmail, crea
un email arrastrar un archivo del explorador de archivos al mail. Comprobarás que es posible
adjuntarlo sólo arrastrarlo.
Geolocalización
El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud
y longitud de tus usuarios, pero para ellos te tienen que dar permiso. Lo mejor es que funciona
en cualquier PC. Prueba este demo.

13. Fuentes y páginas de interés:
http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/etiquetas-
semanticas/section-o-article.html
http://www.ibm.com/developerworks/ssa/web/library/wa-html5fundamentals/
http://www.creativasfera.com/infografia-estructura-de-un-documento-html5-bien-redactado
http://www.baluart.net/articulo/html5-series-estructura-y-secciones-de-los-documentos
http://activ.com.mx/uso-de-elementos-semanticos-en-html5/
http://www.cristalab.com/tutoriales/pagina-en-construccion-estilo-minimalista-en-html5-y-
css3-c107576l/
http://www.cristalab.com/tags/html5/
http://www.cristalab.com/tutoriales/introduccion-a-html5-c92171l/
http://www.creativasfera.com/5-principios-para-crear-un-codigo-css-limpio-y-optimizado/
http://www.genbetadev.com/desarrollo-web/introduccion-a-la-web-semantica-en-html5
http://caniuse.com
http://www.laWebera.es/diseno-Web/diseno-Web-en-html5.php
http://www.imaginanet.com/Blog/como-usar-html-5.html
http://www.imaginanet.com/Blog/maquetacion-en-html5.html
http://www.pedroventura.com/desarrollo-Web/10-herramientas-online-para-ayudar-y-crear-
codigo-html5/
http://www.foroshtml5.com
http://www.useragentman.com/Blog/2010/07/27/creating-cross-browser-html5-forms-now-
using-modernizr-Webforms2-and-html5widgets-2/
http://www.limejs.com/
Generadores de Código HTML5:

14. http://www.initializr.com/
http://reuze.me/
http://reuze.me/
http://foundation.zurb.com/download.php
Generadores de Código CSS3:
http://westciv.com/tools/
http://westciv.com/tools/audio/
http://modernizr.com/download/
http://css3please.com/
http://css3pie.com/
http://www.layerstyles.org/builder.html
http://www.wordpressthemeshock.com/css-drop-shadow/
http://border-radius.com/
http://www.css3.me/
http://css3gen.com/
http://css-tricks.com/examples/ButtonMaker/
http://www.spritebox.net/
http://www.css3shapes.com/
http://buzz.jaysalvat.com/
http://www.css3maker.com/index.html
http://www.3dcsstext.com/
http://css3generator.com/
http://www.css3generator.in/
http://prefixmycss.com/

15. Validador de CSS3:
http://csslint.net/
Formularios:
http://djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-
file/
Los Mejores Frameworks y Grids de CSS para Responsive Design:
http://www.creativasfera.com/los-mejores-frameworks-y-grids-de-css-para-responsive-design
Crear Plantallas gratis HTML, WorkPress, Joomla, ASP.net:
http://www.cooltemplate.com/