Desarrollo Web en

HTML5 y CSS3

pag. 2

Mdulo 2:
HTML5

pag. 3

Unidad 1:

Introduccin a
HTML5

pag. 4

Presentacin de la Unidad:
HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin importante del
lenguaje bsico de la World Wide Web.
HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso
tpico de los sitios web modernos. En el presente curso se desarrollaran tanto los
elementos bsicos de html como las novedades creadas para HTML 5.

pag. 5

Objetivos:
Unidad 1: Que el alumno aprenda a manejar los nuevos elementos incorporados a
HTML5 y CSS3.

pag. 6

Temario:
.: Introduccin
.: Herramientas para la construccin de pginas en HTML
.: Navegadores
.: Evolucin de los navegadores
.: Navegadores para www
.: Posicionamiento relativo
.: Compatibilidad de los navegares con HTML5
.: Visualizadores auxiliares
.: Editores
.: Extensiones de Firefox para la creacin de pginas web
.: Las versiones de HTML
.: HTML5
.: El DOM
.: Qu aporta HTML5?
.: HTML5: la estructura bsica del documento.
.: Nuevos atributos globales.

pag. 7

Consignas para el aprendizaje colaborativo

En esta Unidad los participantes se encontrarn con

diferentes tipos de consignas que, en el marco de los
fundamentos del MEC*, los referenciarn a tres
comunidades de aprendizaje, que pondremos en
funcionamiento en esta instancia de formacin, a los
efectos de aprovecharlas pedaggicamente:
1. Los foros asociados a cada una de las unidades.
2. La Web 2.0.
3. Los contextos de desempeo de los participantes.
Es importante que todos los participantes realicen las actividades sugeridas y
compartan en los foros los resultados obtenidos.

pag. 8

INTRODUCCIN
La evolucin de las tecnologas y los lenguajes vinculados con internet llevan un
proceso de trabajo arduo, hasta convertirse en un estndar recomendado por la
entidad oficial. W3C (World Wide Web Consortium) es la entidad que se encarga de las
especificaciones y estndares de Internet.
HTML5 nace de una necesidad de renovacin de los estndares vigentes y con la
promesa de potenciar y abrir nuevos caminos en el desarrollo web.
La estandarizacin de un lenguaje requiere su documentacin sea analizada por
expertos en equipos de trabajo especializados y transite diferentes etapas en los que
son revisados.
La primera etapa es el Working Draft (borrador de trabajo), en donde se publica el
primer documento de trabajo y se realizan las primeras revisiones y debates sobre l.
La segunda etapa es Candidate Recommendation (candidata a recomendacin), en la
que se verifica que el documento est apto para su implementacin.
La siguiente etapa se denomina Proposed Recommendation (recomendacin
propuesta), en donde el documente es revisado por un comit asesor.
Cuando se cumplen las 3 etapas, un documento llega a ser W3C Recommendation
(recomendacin del W3C).
HTML5 se encuentra finalizando la etapa de Working Draft, segn lo informado por
W3C se espera que llegue a ser W3C Recommendation para el ao 2014.

HTML5
En el momento de tener que decidir cul sera la evolucin del lenguaje de la web, se
plante la disyuntiva entre seguir avanzando con la estndar utilizado hasta el
momento y desarrollar la versin XHTML 2.0 o bien realizar una nueva versin del
lenguaje HTML puro. Finalmente esta ltima opcin fue la que prevaleci y en 2008
tuvo su primer borrador pblico la 5ta versin del lenguaje HTML.
Despus de ms de una dcada de la versin 4.01, HTML5 trae la evolucin que el
lenguaje necesitaba para cumplir con las exigencias del desarrollo web actual.
En HTML5 se destacan sus caractersticas semnticas, las posibilidades multimedia, las
nuevas funciones para formularios y las caractersticas que se definen para poder
integrarse con tecnologas que permiten realizar aplicaciones para web.

pag. 9

Herramientas para la construccin de pginas en HTML

Las herramientas son un componente imprescindible como soporte al desarrollo de
materiales para el WWW. EL propio visualizador o navegador es una de las
aplicaciones software que deben estar presentes obligatoriamente.

Navegadores
El navegador es una herramienta indispensable para el desarrollo con HTML. Siempre
es necesario contar con un visualizador para comprobar nuestros progresos. De hecho,
el aspecto final de nuestro trabajo estar determinado en mayor medida por el
navegador que se use.
Genricamente, un navegador es un programa que canaliza las peticiones de
informacin del cliente hacia el servidor y que interpreta adecuadamente su
respuesta.
Desde su aparicin (1994) Netscape marc la pauta que han seguido la mayora al
distribuir gratuitamente su navegador y dar acceso libre a las sucesivas betas de sus
productos.
Evolucin de los navegadores
El primer gran punto de inflexin en la tecnologa WWW se produce con la
introduccin de Mosaic, un programa desarrollado en la NCSA norteamericano. Mosaic
incorpora por primera vez multimedia de la mano de imgenes, fundamentalmente en
formato GIF.
Un grupo de desarrolladores que haban participado en Mosaic pusieron en marcha un
nuevo proyecto en 1994. Crearon una nueva compaa, Netscape, y construyeron un
navegador al que llamaron Navigator.
Netscape piensa hacer dinero con el mercado que se mueve alrededor del Web pero el
buque insignia de la compaa, el visualizador, ser gratuito. Este ser el precio de
referencia (cero) de los navegadores del futuro.
Al dominio de Netscape sigui el de Microsoft y su navegador Internet Explorer, que
durante varios aos fue usado por la inmensa mayora de los usuarios.
Mozilla es un consorcio que retoma el trabajo de Netscape y trabaja en una serie de
productos de libre distribucin que incluyen un navegador, Firefox, camino ya de su
versin 4. Con independencia de otras caractersticas, hay funcionalidades que lo
hacen muy atractivo para usuarios, y que han contribuido decisivamente a su difusin:
las pestaas y las extensiones.

pag. 10
El modelo actual de navegador Web es el de una aplicacin gratuita, compleja y con
gran cantidad de funcionalidades y cuyo uso puede ir ms all del de acceder a pginas
HTLM.
Los navegadores Web ya no se restringen nicamente a ordenadores personales, y hay
versiones y navegadores especficos para todo tipo de dispositivos: telfonos mviles,
televisiones, consolas de juegos, e incluso navegadores vocales para equipos sin
pantalla.

Navegadores para WWW

Internet Explorer, Firefox, Netscape Navigator, Opera Safari, Chrome , Maxthon ,
editores como xemacs o a travs del propio correo electrnico o editores de texto
como Word.
Opera

Opera es un navegador web y suite de Internet creado por la

empresa noruega Opera Software en el ao 1996.
Opera es un navegador diseado para sacar el mximo
partido de los equipos en los que se ejecuta, lo que hace que
sea comparativamente rpido. Tambin fueron pioneros en
utilizar funcionalidades (pestaas, zoom) que otros han ido
copiando.
El equipo de Opera lidera el desarrollo del estndar, por lo que las novedades suelen
estar disponibles antes en este navegador que en otros.
Opera se ha especializado en construir navegadores para todo tipo de dispositivos,
especialmente telfonos mviles y consolas.

Mozilla Firefox

Es un navegador web libre y de cdigo abierto, en cuyo

desarrollo puede colaborar cualquier usuario que lo desee.
Es descendiente de Mozilla Application Suite y es
desarrollado por la Fundacin Mozilla en el ao 2004.
Mozilla Firefox es el segundo navegador ms utilizado de
Internet, con una cuota de mercado del 21,74% a finales de
febrero de 2011, segn la firma Net Applications. Otras fuentes de medicin global
sitan el uso de Firefox entre el 19% y el 31%.
Se trata de un producto de gran calidad y muy slido y normalmente con menos
problemas de seguridad que otros.

pag. 11

Firefox cuenta con funcionalidades que han facilitado mucho su difusin: las pestaas
y las extensiones.
A partir de la versin 3.5, publicada en el ao 2009, se comienza a dar soporte a
algunas caractersticas de HTML5, como las etiquetas <audio> y <video>.

Internet Explorer

Windows Internet Explorer (anteriormente Microsoft Internet Explorer), conocido

comnmente como IE, es un navegador web desarrollado por Microsoft para el
sistema operativo Microsoft Windows desde 1995.
Ha sido el navegador web ms utilizado de Internet desde
1999 hasta la actualidad, con un pico mximo de cuota de
utilizacin del 95% entre el 2002 y 2003. Sin embargo, dicha
cuota de mercado ha disminuido paulatinamente con los
aos debido a una renovada competencia por parte de
otros navegadores, situndose aproximadamente entre el
40% y 62% para finales de febrero de 2011, dependiendo de
la fuente de medicin global.
Su versin ms reciente es la 10.0, y est disponible gratuitamente como actualizacin
para Windows Vista SP2 o Windows Server 2008 SP2, adems de Windows 7 y
Windows Server 2008 R2.
Explorer (en su ltima versin) cuenta en principio con soporte integrado para sonido y
animaciones.
La versin 10, cuenta con las funcionalidades habituales en el resto de los
navegadores, incluyendo pestaas y extensiones. Contiene mejoras por el lado del
soporte a HTML5 y CSS3, especialmente en lo que se refiere a multicolumna y al
model box.

Safari

Safari es un navegador web de cdigo cerrado desarrollado por Apple Inc en el ao

2003.
Est disponible para Mac OS X, iOS (el sistema usado por el
iPhone, el iPod Touch y el iPad) y Microsoft Windows.
Incluye navegacin por pestaas, corrector ortogrfico,
bsqueda progresiva, vista del historial en CoverFlow,

pag. 12
administrador de descargas y un sistema de bsqueda integrado.
El parque de ordenadores Apple no deja de crecer, y eso ha hecho que el navegador
Safari, que forma parte del sistema operativo de estos equipos vaya ganando
aceptacin y cuota de uso. Es el navegador usado en el iPhone, lo que hace de l el
referente de Internet mvil.
La versin 5, publicada en 2010, trae varias novedades con respecto a HTML5: pantalla
completa y subttulos para <video>, EventSource, WEbSocket, Drag&Drop, etiquetas
semnticas y atributos de formularios, entre otras caractersticas.

Chrome

Chrome es un navegador web desarrollado por Google y

compilado con base en componentes de cdigo abierto como
el motor de renderizado Webkit y su estructura de desarrollo
de aplicaciones.
Google Chrome es el tercer navegador ms utilizado en
internet con una cuota de mercado de casi el 12% de los
usuarios (medicin de fines de abril del 2011) y posee ms de
120 millones de usuarios.
Destacado por su accesibilidad, est disponible desde el ao 2008 para la plataforma
Windows y desde 2010 para Mac OS y Linux.
Chrome de Google tiene una importancia por su evidente calidad y su innovador
modelo, y porque Google es uno de los principales impulsores de HTML 5, lo que hace
que Chrome implemente nuevas funcionalidades antes que los dems fabricantes.
Chrome es un navegador ligero y cuenta con muchas funcionalidades modernas como
pestaas, navegacin annima, temas o extensiones se trata de la base de un nuevo
sistema operativo desarrollado por Google. Adems, es el navegador de referencia de
los dispositivos mviles que usan Android como sistema operativo.

Compatibilidad de los navegadores con HTML 5

Podemos comprobar la compatibilidad de los navegadores que utilizamos con los
atributos de HTML5 a travs de este sitio web:
http://html5test.com/

pag. 13

Chrome

Firefox

Internet Explorer

Tcnicas de deteccin de compatibilidad.

Podemos utilizar varias formas de deteccin del navegador y sus caractersticas. Por
ejemplo, utilizando Javascript podemos saber que navegador utiliza el usuario que
ingresa a nuestro sitio, y de esta forma, definir qu vamos a mostrar segn el caso.
En lo que se refiere a HTML5 y CSS3, una librera interesante es Modernizr
(www.modernizr.com). Este framework de Javascript es muy liviano y permite realizar
una rpida deteccin de la compatibilidad nativa que ofrece el navegador respecto de
las tecnologas de ltima que se estn utilizando.

pag. 14
Esta librera nos permite utilizar HTML5 y CSS3 en nuestros proyectos web y de esta
forma detectar los navegadores que nos ofrecen compatibilidad con algun de sus
caractersticas, para que podamos aplicar una solucin alternativa en estos casos. El
script se encarga de agregar una clase a los elementos HTML, de acuerdo a las
caractersticas del navegador.

Visuallizadores auxiliares
No todos los elementos que se exportan a travs del WWW son manejados
directamente por los navegadores.
Para poder interpretar ficheros de formatos poco habituales, se disponen de los
visualizadores auxiliares, los plug-ins y las extensiones.
Las versiones de HTML
Hay una serie de niveles definidos por el W3C que se corresponden con las distintas
versiones establecidas por este organismo.
El nivel 0 describe la estructura bsica de un documento con el contenedor principal y
las dos secciones principales.
El nivel 1 aade estilos fsicos as como algunos lgicos adicionales.
Cuando se construye un navegador se hace teniendo en cuenta la versin actual del
lenguaje. De esta forma, un visualizador desarrollado para la versin 1.0 slo
reconocer los comandos de sta ignorando los de la 2.0 en adelante. Previendo esta
situacin, la mayora de los navegadores no reacciona mal ante instrucciones
desconocidas. Simplemente asumen que pertenecen a una nueva versin desconocida
para ellos y las ignoran.
A la versin 1.0 sigui la 2.0, ms o menos aceptada universalmente y que
implementaba el nivel 2 del lenguaje. La principal contribucin de esta versin es la
incorporacin de formularios, lo que dio paso a la utilizacin de los primeros
programas en el servidor (CGI) ,y con ello, al uso del Web como interfaz de servicios y
no slo de contenidos.
El nivel 3, encarnado por HTLM 3.0 (originalmente llamado HTML+) se prepar como
una evolucin lgica del estndar. Sin embargo nunca pas del estado de draf
(borrador).
HTML 3.2 que se encarg de legalizar buena parte de las mejoras de los navegadores
comerciales, unindolas a la formalidad del modelo propuesto por w3c.
La culminacin de este proceso fue durante mucho tiempo HTML 4.0, propuesto por
primera vez en 1997 y que trat de normalizar el lenguaje e incorporar una serie de

pag. 15
mejoras. El estndar se modific ligeramente en 1999 y adopt el nombre HTML 4.01.
Durante casi diez aos este fue el ltimo estndar de HTML.
XHTML
XML es la culminacin de los esfuerzos de W3C por sistematizar y regularizar la
construccin de documentos. La idea es dividir la informacin en bruto; y por otro la
informacin de presentacin.
Una de las caractersticas bsicas de XML es que hace un control muy riguroso de la
sintaxis de sus documentos.
Tras cerrar el desarrollo de HTML, el W3C defini un estndar ms riguroso y estricto,
basado en XML, para construir pginas web, que recibi el nombre de XHTML.
El aporte principal de XHTML es el de diferenciar el contenido y presentacin y hacer
que esta filosofa haya sido ampliamente aceptada.

HTML 5
Tras varios aos sin actividad, se constituy en 2004 el WHATWG (Web Hypertext
Application Technology Working Group), al margen del W3C, y promovido por
empresas como Apple, Opera, Google o la fundacin Mozilla. Su propsito ha sido la
creacin de una nueva versin del estndar desde un punto de vista esencialmente
prctico, y no acadmico como hasta ahora.
En 2007 el W3C reconoce este trabajo y lo toma como base para su propia actividad.
Hoy est finalizando la primera etapa para lograr ser Recomendacin del W3C.
Fundamentos de HTML 5
Con esta nueva versin, HTML no cambia en lo esencial. La mayora de los elementos
permanecen. El nuevo estndar se enriquece con medios para simplificar el trabajo
con las nuevas herramientas de gestin de contenidos (blogs, pginas personales, etc),
y facilitar la inclusin de elementos multimedia.
El principal criterio de diseo de HTML 5 ha sido el de resolver problemas practicos, lo
que hace que se hayan adoptado soluciones orientadas a facilitar el trabajo en
situaciones reales.
Los siguientes son los principios de diseo que ha aplicado el WHATWG en el diseo
HTML 5:
Compatibilidad: Se garantiza la interpretacin de pginas antiguas o que
tengan elementos fuera del estndar.

pag. 16

Aceptar las prcticas habituales: no imponer elementos que no son aceptados

por la comunidad de desarrolladores.

Evolucin

Incluir la seguridad como parte del diseo: la nueva versin se ha pensado

tratando de facilitar la creacin de webs ms seguras.

Comportamiento bien definido: Mientras que en otras versiones se

especificaba sobre todo la sintaxis, dejando libertad de implementacin en los
navegadores, ahora se quiere dar seguridad a los autores de la manera en la
que se interpretar la informacin que creen.

Acceso universal: Se puede visualizar desde cualquier dispositivo con acceso a

internet.

Los navegadores disponibles hasta el momento no soportan todos los nuevos

elementos de HTML 5. No obstante, y dado que los promotores del WHATWG (Apple,
Mozilla, Google y Opera), el soporte a HTML 5 est aumentando rpidamente.

El DOM
Uno de los cambios ms destacados en HTML 5 sobre las versiones anteriores es la
inclusin del DOM (Document Object Model) como parte del estndar. El DOM
describe la estructura de un documento de acuerdo con el paradigma de la orientacin
a objetos y es bsico a la hora de incluir cdigo ejecutable dentro de una pgina para
dotarla de dinamismo.
La inclusin del DOM se hace a travs de sus APIs, extendindolas y aadiendo nuevas
funciones.

Qu aporta HTML 5?
HTML 5 ha sido definido pensando en las personas que construyen pginas web y
desarrollan aplicaciones para ellas, por lo que su orientacin es ante todo prctica, con
el objetivo de resolver los muchos problemas de versiones anteriores.
HTML es ahora una herramienta ms til y cercana a las personas que van a utilizarla.
Adems de simplificar el desarrollo, lo ha dotado de herramientas ms potentes,
reduciendo complejidades innecesarias. Ha eliminado componentes superfluos y que
aportaban poco, y ha incorporado mecanismos ampliamente utilizados por la
comunidad de desarrollo del lenguaje.

pag. 17
La potencial extensibilidad de HTML 5 trata de evitar que el lenguaje vaya quedando
atrs cada vez ms lejos de la continua evolucin de la web.
HTML 5 va a suponer un marco estable para el desarrollo de pginas web,
respondiendo a necesidades reales, y aportando medios para acceder a funciones
potentes y sofisticadas, especialmente en lo que se refiere a los contenidos
multimedia.

HTML5: la estructura bsica del documento

Comenzando desde las primeras lneas de cdigo, vamos a repasar los elementos que
ya conocemos y cuales se han modificado en esta nueva versin de HTML.
doctype
Para empezar cualquier pgina nuestra primera lnea de cdigo es el doctype.
Histricamente este elemento nunca ha tenido un buen acompaamiento, ya que
haba que indicarle algunos parmetros y versiones que normalmente nunca se
ajustaban a la realidad. Ahora, con el HTML 5 esto queda reducido a una nica opcin
muy simple:
<!DOCTYPE HTML>

Es un DOCTYPE mucho ms simplificado que XHTML (cuyas reglas siguen siendo

usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya
tienes programado deje de funcionar.
Este elemento no hay que cerrarlo ni nada, simplemente ser la primera lnea de cada
una de nuestras pginas.
html
Tanto la etiqueta <html> </html> como la etiqueta <head> </head>se mantienen
igual que en las versiones anteriores (en las prximas unidades veremos algunos
atributos que podemos agregar)
Dentro de la etiqueta <body> </body>, la estructura de maquetacin fue variando de
acuerdo a cada versin de HTML.
Hace unos 10 aos, cuando se quera hacer una pgina, te podas plantear el uso de los
frames que eran la forma ms sencilla de no tener que repetir y repetir infinidad de
veces el mismo cdigo. Con la entrada de los lenguajes de programacin esto comenz
a variar y se usaban tablas para dar formato al sitio La aparicin de los CSS hizo que
los div se convirtieran en la mejor opcin para formatear los sitios, y ahora llega el
HTML 5 que incluye unas nuevas etiquetas que solucionan todos estos procesos
genricos.

pag. 18

Volviendo sobre las versiones anteriores de HTML podemos definir la estructura del
sitio de la siguiente forma:
Estructura bsica en HTML3:

Estructura bsica en HTML4 (o en XHTML1):

Estructura bsica en HTML5:

pag. 19

header
En principio se presenta como un contenedor que agrupa elementos introductorios o
un conjunto de informacin referente a lo que a continuacin se pondr.
Podemos darle dos grandes usos de este elemento:

Cabecera de la pgina web, donde se incluiran el logo, el men de navegacin,

etc.

Encabezado de algunos bloques de informacin. Por ejemplo, si tuvieramos un

contenido que es la ficha de un libro, en este header incorporaramos como
bloque el ttulo del libro y una pequea ficha tcnica, como encabezado del
resto de informacin.

<header> est diseada para reemplazar la necesidad de crear divs sin significado
semntico.
footer
El elemento footer va a ser muy parecido al header anterior.
Bsicamente se ha incluido como agrupador de elementos al final de la estructura del
sitio.

pag. 20
Por norma general los sitios web tienen un pie de pgina en el que se indican datos
legales y de contacto, y esta podra ser la principal funcin, aunque no est pensado
para que sea la nica.
De la misma forma que el header, hay dos funciones principales para el elemento:

Pie de pgina del sitio, donde se encuentran los datos legales, etc.
Pie de bloque de contenido, donde incorporar informacin como la fecha,
enlaces relacionados, nube de tags y similares.

article
El nuevo elemento article est destinado a revolucionar los contenedores y el SEO.
Este elemento viene a ser el contenedor de lo que es importante en la pgina. Puede
haber varios y es el agrupador de lo que vendra a ser lo indexable por un buscador,
el contenido principal de la pgina.
Para hacernos una idea bsica, una pgina tendra este formato:
<body>
<header>...</header>
<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
<aside>...</aside>
<footer>...</footer>
</body>

Esto dara a entender que hay 3 bloques de informacin principales en el sitio, que son
los contenidos que el usuario ha de contemplar, adems de una cabecera, un men
lateral y un pie de pgina.
aside
Otro de los nuevos elementos es el aside. Viene a ser la barra lateral que crebamos
con divs.
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va
en un aside.
Es el contenido que, pgina a pgina dentro del sitio web se repite junto a la cabecera
y el pie, y a su vez, los buscadores le darn menos peso a este bloque que al contenido
dentro de article.
section
El nuevo elemento section viene a ser el <div id="nombre"> que llevamos usando
hasta ahora.
Define un rea de contenido nica dentro del sitio.

pag. 21
<section>
<header>...</header>
<article
<article
<article
</section>

class="noticia">...</article>
class="relacionados">...</article>
class="multimedia">...</article>

nav
Este elemento es el que agrupa los enlaces. Es un section especial para los enlaces,
tanto absolutos como relativos.
Dentro de este elemento es donde incluiremos nuestra botonera.
Se puede utilizar cualquier etiqueta para organizar los enlaces, lo recomendado es
utilizar listas no ordenadas (<ul>).
h1 h6
Estos elementos son los ttulos de las diferentes sections y cada h tiene un peso
(ranking especfico en base al nmero que tiene, del 1 (el ms alto) al 6 (el ms bajo)).

Atributos nuevos globales

Empezaremos a desarrollar algunos de los nuevos atributos incorporados por HTML 5
para las etiquetas nuevas y existentes:
dir
El atributo dir bsicamente indica la direccin del texto, o, mejor dicho, de escritura,
para aquellos idiomas en los que se escribe de derecha a izquierda y no de izquierda a
derecha como lo hacemos nosotros.
Tiene tan slo dos opciones que corresponden a lo que acabo de comentar: ltr (left to
right) o rtl (right to left).
<div dir="rtl">Este contenido est escrito de derecha a izquierda...</div>

draggable
Otra de las nuevas incorporaciones es el draggable.
Permite incorporar o eliminar elementos de una pgina simplemente arrastrndolos.

pag. 22
Un ejemplo sera una imagen que, al arrastrarla fuera de la ventana y colocarla en un
editor de imgenes, se poda abrir. Otro ejemplo el de un enlace que se arrastraba
sobre una pestaa del navegador y ejecutaba esa direccin.
Los parmetros que permite son true, false o auto, que es el que est por defecto,
dejando a cada usuario / navegador decidir los elementos.

hidden
Hasta ahora cuando se requera que un bloque de contenido no se viera haba que
utilizar los CSS para ocultarlo. Ahora eso ya no ser necesario, ya que si un elemento
incorpora este atributo simplemente no se mostrar por pantalla.
De todas formas, este elemento no debe usarse para ocultar bloques o pestaas, sino
que se ha de utilizar para elementos que no son todava o no van a ser relevantes.
<div hidden>Este contenido est oculto por no ser relevante para el usuario...</div>
lang
El atributo lang marca el idioma del contenido de ese fragmento de texto.
Hay que tener en cuenta que, aunque un documento se le aplique un idioma, por
normal general, puede haber fragmentos de texto de contenidos que se encuentran en
otros idiomas, por lo que hay que indicarlos.
<div lang="es">este bloque se encuentra escrito en espaol...</div>
<div lang="en">...and this is in english...</div>

title
Title bsicamente hace lo que su nombre indica: titular. Y es que muchos elementos,
cuando se pone el ratn encima permiten mostrar ms informacin de lo que eso
significa. Un ejemplo muy habitual sera el las abreviaturas:
<p>Internet usa mucho el protocolo <abbr title="Hypertext Transport
Protocol">HTTP</abbr>
y
el
<abbr
title="File
Transport
Protocol">FTP</abbr>.</p>

pag. 23

HTML5 hoy.
Sitios de uso general que ya estn utilizando HTML5.
Twitter y m.twitter.com (versin para dispositivos mviles)
Casi todo el diseo de las versiones desktop y mvil de Twitter usan intensivamente
CSS3. En especial por los bordes redondeados. En la versin mvil de Twitter se usa
geolocalizacin sumado a Google Geolocation Services para geolocalizar los tweets.

pag. 24
Vimeo/m/ y m.youtube.com

Las versiones mviles de Vimeo y Youtube para telfonos, as como sus versiones para
tablets (iPad, Samsung Galaxy Tab, Playbook, etc) estn hechas slo con HTML5. CSS3
para los diseos y obviamente la etiqueta <video> para servir los videos, sin necesidad
de Flash.
Gmail.com

Gmail usa Web Storage para guardar en el disco del usuario los ms recientes correos.
As puedes acceder a ellos temporalmente si se cae la conexin. Tambin usa Drag and
Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para
diseo.

pag. 25

Facebook
Las versiones mviles y desktop de Facebook hacen un uso intensivo de CSS3 para
diseo y animaciones, as como de Web Sockets para las notificaciones de actividad y
el chat.