¿Qué es el HTML5?

1. ¿Qué es el HTML 5?
HTML 5 (HyperTextMarkupLanguage, versión 5) es la quinta revisión importante del
lenguaje básico de la World Wide Web.
La versión anterior data de 1999, y desde entonces la Web ha cambiado muchísimo, HTML
introduce un nuevo mundo para el modelado de archivos HTML.
Estándar de la versión HTML 5
HTML 5, Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque
ya es usado por múltiples desarrolladores Web por sus avances, mejoras y ventajas.
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le
recomienda al usuario común actualizar a la versión más actual, para poder disfrutar de
todo el potencial que trae HTML5.
El desarrollo de este código es regulado por el Consorcio W3C.
Podemos ver el estado de la versión HTML 5 y sus avances día a día en el sitio oficial de la
W3C ​http://www.w3.org/TR/html5/
Nuevos Elementos
HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de
los sitios Web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div>
y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de
navegación del sitio Web) y <footer>. Otros elementos proporcionan nuevas funcionalidades
a través de una interfaz estandarizada, como los elementos <audio> y <video>.
Web Semántica
La Web semántica (del inglés semantic web) es la "Web de los datos". Se basa en la idea
de añadir metadatos semánticos a la World Wide Web. Esas informaciones adicionales
—que describen el contenido, el significado y la relación de los datos— se deben
proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por
máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad
entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son
programas en las computadoras que buscan información sin operadores humanos.
El precursor de la idea, Tim Berners Lee, intentó desde el principio incluir información
semántica en su creación, la World Wide Web, pero por diferentes causas no fue posible.
Por ese motivo introdujo el concepto de semántica con la intención de recuperar dicha
omisión.
Nuevas etiquetas de HTML 5
A continuación un listado de todas las nuevas etiquetas de HTML 5 separadas por grupos,
más adelante se explicará en detalle cada una de ella.

2. Nuevas etiquetas de marcación semántica
Etiqueta Descripción
<article> Especifica independiente, autónomo de
contenido, podría ser una noticia, artículo, blog,
foro, u otros artículos que pueden ser distribuidos
de forma independiente del resto del sitio.
<aside> Para el contenido aparte. El contenido de un lado
debe estar relacionada con el contenido principal.
<summary> A título o resumen, en el interior del elemento de
detalles.
<footer> Para un pie de página de un documento o sección,
puede incluir el nombre del autor, la fecha del
documento, información de contacto, o la
información de copyright.
<header> Para ver una introducción de un documento o
sección, podría incluir la navegación.
<hgroup> Para una sección de los títulos, utilizando <h1> a
<h6>, donde el más grande es el principal título
de la sección, y los otros son subtítulos.
<mark> Para el texto que hay que destacar.
<nav> Para una sección de la navegación.
<section> Para una sección de un documento. Como
capítulos, encabezados, pies de página, o
cualquier otra sección del documento.
<time> Para la definición de un tiempo o una fecha, o
ambos.
Nuevos Elementos multimedia
Etiqueta Descripción
<audio> Para el contenido multimedia, sonidos, música u
otros flujos de audio.
<video> Para el contenido de vídeo, como un clip de
película u otras corrientes de vídeo.
<source> Recurso de los medios de los elementos de los
medios de comunicación, que se define dentro de
los elementos de audio o vídeo.

3. <embed> Para el contenido integrado, como un plugin.
Explicación de nuevas etiquetas
Etiqueta <header>
La etiqueta <header> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear en encabezados del archivo dentro del
cuerpo del mismo como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <header>
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
<p>Mi nombre es Eugenia</p>
</header>
<p>El resto de mi sitio web.</p>
</body>
Dentro de esta etiqueta podemos incluir información relevante como ser el título principal del
documento.
Modo de uso de esta etiqueta
La etiqueta <header> se puede usar las veces que sea necesaria , aunque muchos autores
recomiendan utilizarla una sola vez por documento.
​Etiqueta <nav>
La etiqueta <nav> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear en el área de la navegación principal
que un documento conteniendo los links a las distintas secciones del sitio, se utiliza dentro del cuerpo
del mismo como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <nav>
<body>
<nav>
<a target="_blank" href="default.asp">Home</a>
<a target="_blank" href="tag_meter.asp">Clientes</a>
<a target="_blank" href="tag_noscript.asp">Contacto</a>
</nav>
</body>
Modo de uso de esta etiqueta
Si bien según la especificación hasta el día de hoy de la W3C indica que se puede usar más de una vez
la etiqueta <nav> , Pero muchos autores recomiendan utilizar esta etiqueta una única vez por
documento para la negación principal del sitio.

4. Etiqueta <footer>
La etiqueta <footer> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear el pie de página del documento, se
utiliza dentro del cuerpo del documento y permite contener la información relacionada a los legales por
ejemplo, como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <footer>
<body>
<footer>Este documento fue escrito en el 2011</footer>
</body>
Modo de uso de esta etiqueta
La etiqueta <footer> se puede usar las veces que sea necesaria , aunque muchos autores recomiendan
utilizar una sola vez por documento.
Etiqueta <section>
La etiqueta <section> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear una sección dentro del documento
HTML, en muchos casos la utilizamos donde antes solo podíamos usar un div.
Esta etiqueta, se utiliza dentro del cuerpo del documento y permite contener la información relacionada
relevante del sitio y también otra etiquetas semánticas como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <section>
<body>
<section>
<h1>WWF</h1>
<p>La WorldWildlifeFoundation nació en el año 1961...</p>
</section>
</body>
Modo de uso de esta etiqueta
La etiqueta <section> se puede usar las veces que sea necesaria en cada documento HTML.
Etiqueta <article>
La etiqueta <article> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear artículos dentro de los documentos
HTML, como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <section>
<body>
<article>
<a target="_blank" href="http://blog.netscape.com/2007/12/28/
end­of­support­for­netscape­web­browsers">
Netscape murió</a><br />
AOL es una de las grandes empresas que hacen hoy a la web....

5. </article>
</body>
Modo de uso de esta etiqueta
La etiqueta <article> se puede usar las veces que sea necesaria en cada documento HTML. Si bien su
uso sigue siendo un tanto confuso, habitualmente se utiliza para incorporar contenidos independientes
como:
● post de foros
● artículos de diarios
● entradas de blogs
● comentarios de usuarios
● rss
Etiqueta <aside>
La etiqueta <aside> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para agregar contenidos complementarios al
contenido principal del documento, son contenidos relacionados pero de menor importancia, que
podrían en todo caso ser omitidos, la misma se utiliza dentro del cuerpo del documento, como podemos
ver en el siguiente ejemplo.
Ejemplo de uso de la etiqueta <aside>
<body>
<p>Me vou de vacaciones a Miami este verano</p>
<aside>
<h4>Miami</h4>
Es una ciudad en el sur de EEUU
</aside>
</body>
La etiqueta <aside> es comúnmente usada en la barra lateral de la derecha y dentro de una etiqueta
<article>.
Modo de uso de esta etiqueta
La etiqueta <aside> se puede usar las veces que sea necesaria en cada documento HTML.
Esta etiqueta posee contenido que no es esencial para el sitio, la misma es ignorada cuando se ingresa
mediante un dispositivo móvil o un lector de pantalla.
Etiqueta <hgroup>
La etiqueta <hgroup> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para crear un grupo de títulos dentro de un
documento HTML. Esta etiqueta, se utiliza dentro de cuerpo del documento como podemos ver en el
ejemplo siguiente.
Ejemplo de uso de la etiqueta <hgroup>
<body>
<hgroup>

6. <h1>Bienvenidos a mi web site</h1>
<h2>una nueva forma de comprar</h2>
</hgroup>
<p>El resto del sitio....</p>
</body>
Modo de uso de esta etiqueta
La etiqueta <hgroup> se puede usar las veces que sea necesaria en cada documento HTML y debe
estar dentro de la etiqueta <header>.
Etiqueta <mark>
La etiqueta <mark> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para resaltar partes de un texto, se utiliza dentro de
cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <mark>
<body>
<p>No olvidar de comprar <mark>jugo</mark> hoy.</p>
</body>
Modo de uso de esta etiqueta
La etiqueta <mark> se puede usar las veces que sea necesaria en cada documento HTML, pero
siempre debe ir dentro de otra etiqueta de texto como por ejemplo un párrafo.
Etiqueta <time>
La etiqueta <time> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para indicar una fecha o una hora, se utiliza dentro
de cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <time>
<body>
<p>abrimos al las <time>10:00</time> todos los dias.</p>
<p>Tengo una cita<time datetime=”2008­02­14”>el día de San
Valentín</time></p>
</body>
Modo de uso de esta etiqueta
La etiqueta <time> se puede usar las veces que sea necesaria en cada documento HTML,
generalmente se la usa dentro de otra etiqueta de texto como ser un párrafo.
La etiqueta <time> no posee ninguna característica visual predeterminada, pero es la encargada de
indicar a los motores de búsqueda y a los programas de accesibilidad que el contenido de la misma es
una fecha o un horario.

7.
Explicación de nuevas etiquetas MULTIMEDIA
Una de las nuevas y más revolucionarias capacidades de HTML 5, es la posibilidad de incorporar
archivos de video en los nuestros documentos y poder ser visualizados por los usuarios sin la
necesidad de contar con un plugin o software adicional. HTML 5 incorpora una nueva etiqueta que
permite insertar videos y reproducirlos directamente mediante el navegador de forma muy pero muy
simple.
Etiqueta <video>
La etiqueta <video> es una de las nuevas etiquetas semánticas de HTML 5, que permite una mejor
estructura del documento HTML, la misma se utiliza para insertar videos en un documento HTML, se
utiliza dentro del cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <video>
<body>
<video src=”mipeli.ogg”></video>
</body>
Modo de uso de esta etiqueta
La etiqueta <video> se puede usar las veces que sea necesaria en cada documento HTML, es muy
simple de utilizar
La etiqueta video, es un etiqueta de bloque y posee apertura y cierre <video></video>
Para que un video pueda ser levantado sólo debemos agregar en la etiqueta de apertura el atributo src,
llamado a la fuente de imagen, <video src=”mipeli.ogg” >
Formatos de video soportado
Ogg
Los archivos Ogg utilizan el codec de video Theora y Vorbis como codec de audio
MPEG4
Los archivos MPEG 4 utilizan el codec de video H.264 y AAC como codec de audio
WebM
Los archivos WebM utilizan el codec de video VP8 y Vorbis como codec de audio
Etiqueta <audio>
La etiqueta <audio> es una de las nuevas y mas novedosas etiquetas semánticas de HTML 5, que
permite una mejor estructura del documento HTML, la misma se utiliza para insertar audio en un
documento HTML, se utiliza dentro de cuerpo del documento como podemos ver en el ejemplo
siguiente.
Ejemplo de uso de la etiqueta <video>
<body>
<audio src=”song.ogg” controls=”controls”></audio>

8. </body>
Modo de uso de esta etiqueta
Hasta ahora no existía una forma estándar de incluir sonido en un sitio web, de hecho era bastante
dificultoso y por eso la opción más viable era hacerlo mediante el uso de flash, que como todos bien
sabemos requiere de un plugin (flash player) para poder ejecutarse, sin contar la problemática de la
ejecución en dispositivos móviles.
HTML5 incorpora un nuevo estándar para incluir audio en un sitio web sin la necesidad de contar con
un plugin adicional, de forma tal que agregar sonido en los sitios web es ahora muy fácil mediante el
uso de la etiqueta <audio>.
La etiqueta <audio> puede reproducir archivos de sonido y stream de audio.
No obstante al igual que el video los problemas siguen siendo los formatos que cada navegador
soporta.
Formatos de audio soportado
Ogg Vorbis
MP3
Wav
Verificador de HTML 5
Para verificar la compatibilidad de tu navegador con HTML 5 se puede ingresar en la
siguiente URL
http://html5test.com/
o bien en:
http://html5demos.com/
Otra página muy interesante que nos ayudará a saber la compatibilidad de las capacidades
de HTML 5 con cada uno de los navegadores es la siguiente:
http://caniuse.com/
Elementos de html 5
Declaración de tipo de documento (doctype)
A diferencia de las versiones anteriores de html, donde existen más de un tipo de doctype,
HTML 5 cuenta con un solo tipo de doctype que podemos ver a continuación.
<!DOCTYPE HTML>
Declaración del idioma

9. En HTML 5 es obligatorio declarar el idioma del sitio web, en el encabezado del mismo.
Declaración del charset
La declaración del charset es obligatoria en HTML 5, la misma se realiza en la etiqueta
<meta>​. El juego de caracteres más utilizado y que es adecuado a nuestro idioma es el
UTF8.