HTML5 – Características y mejoras con respecto a HTML4

Características
destacadas
y mejoras con
respecto a HTML4
María Jesús García Ontanaya

ASIR 1º MAÑANA
HTML5 – Características y mejoras con respecto a HTML4

INDICE

Página

1.- Introducción .................................................. 3

2.- Sintaxis y codificación de caracteres ................. 5

3.- Otras mejoras reseñables de HTML5................. 7

4.- En conclusión................................................. 15
 HTML5 – Características y mejoras con respecto a HTML4

1.- Introducción

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del

lenguaje de programación “básico” de la World Wide Web, el HTML.

Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo

problemas con los que los desarrolladores web se encuentran, así como rediseñar
el código actualizándolo a nuevas necesidades que demanda la web de hoy en
día. Esto es posible gracias a que HTML 5 especifica dos variantes de sintaxis
para HTML: un «clásico» HTML (text/html), (conocido como HTML5) y una
variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como
XML (XHTML) (application/xhtml+xml. Es la primera vez que HTML y XHTML se
han desarrollado en paralelo.

El desarrollo de este código es regulado por el Consorcio W3C. Podremos

encontrar una lista de las publicaciones actuales del W3C y la última revisión de
este informe técnico en el índice de informes técnicos del W3C en su web
http://www.w3.org/TR/

El proyecto de HTML5 refleja un esfuerzo, iniciado en 2004, para estudiar

las implementaciones actuales de HTML y el contenido desplegado. El proyecto
persigue fundamentalmente objetivos de 4 tipos:

Definir un lenguaje sencillo llamado HTML5 que se puede

escribir en la sintaxis HTML y en la sintaxis XML.

Definir los modelos detallados de proceso para fomentar la

interoperabilidad de las implementaciones.

Mejorar el marcado de documentos.

Presentar marcado y APIs para lenguajes emergentes,

como las aplicaciones Web.
HTML5 – Características y mejoras con respecto a HTML4

Si buscáramos una palabra para definir HTML5, ésta sería COMPATIBLIDAD,

fundamentalmente con la forma en que las aplicaciones de usuario manejan el
contenido desplegado. Mantener el lenguaje de creación es relativamente simple
para los autores de varios elementos mayores puesto que los atributos no se
incluyen y se tratan mejor con el uso de CSS.

Los agentes de usuario, sin embargo, siempre tendrán que apoyar a estos
elementos mayores y los atributos y esta es la razón por la que HTML 5 separa
claramente los requisitos para los autores y los agentes de usuario. Por ejemplo,
esto significa que los autores no puede utilizar el isindex o el plaintext del
elemento, pero los agentes de usuario tienen la obligación de apoyarlos de una
manera que sea compatible con la forma en que estos elementos tienen que
comportarse para ser compatible con el contenido desplegado.

Desde HTML5 tiene diferentes requisitos de conformidad para los autores y

los agentes de usuario que ya no hay necesidad de marcar las características
"obsoleto".

La especificación de HTML 5 no se considerará acabada antes de que haya

al menos dos implementaciones completas del pliego de condiciones que utilizara
una serie de pruebas para medir su integridad. Este enfoque difiere de las
anteriores versiones de HTML, donde la especificación final general fue aprobada
por un comité antes de ser efectivamente aplicada. El objetivo de este cambio es
garantizar que la especificación es aplicable y utilizable por los autores una vez
que esté terminada.

Actualmente el HTML5 está en un estado BETA, aunque ya algunas

empresas están desarrollando sus sitios webs en esta versión del lenguaje. A
diferencia de otras versiones de HTML, los cambios en HTML5 comienzan
añadiendo semántica y accesibilidad implícitas, especificando cada detalle y
borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos
sitios webs (facebook, twenti, etc), donde su aspecto y funcionalidad son más
semejantes a aplicaciones webs que a documentos.
 HTML5 – Características y mejoras con respecto a HTML4

2.- Sintaxis y codificación de caracteres

Como ya dijimos anteriormente, HTML5 define una sintaxis HTML que es

compatible con la mayor parte de las características de HTML 4 y XHTML1
(documentos publicados en la Web), pero no es compatible con SGML ni con
algunas propiedades de HTML 4 como instrucciones de procesamiento y de
marcado abreviado puesto que no son compatibles con la mayoría de los
agentes de usuario.

HTML5 define también detallados análisis de las normas (incluyendo "el

manejo de errores") para esta sintaxis, en gran medida compatibles con las
implementaciones populares. Los agentes de usuario deben utilizar estas normas
para los recursos que tienen el text/html de tipo medio. Por tanto, podemos decir
que nos encontramos con una nueva forma de citar el DOCTYPE, que pasaría
de citarse así:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A hacerse de esta manera:

1
<!DOCTYPE html>

HTML5 define también un text/html-sandboxed tipo de soporte para los

documentos utilizando la sintaxis HTML. Esto puede ser usado cuando se aloja el
contenido no es de confianza.

La sintaxis de XML se pueden utilizar también para HTML5. Los documentos

que opten por este lenguaje deben ser introducidos en el espacio de nombres de
la web http://www.w3.org /1999/xhtml siguiendo las reglas establecidas por las
especificaciones XML. Hay que tener en cuenta que los documentos XML deben
ser servidos con un tipo de soporte XML, como application/xhtml+xml o
application/xml .
1
<?xml version="1.0" encoding="UTF-8"?>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Ejemplo</title>
5 </head>
HTML5 – Características y mejoras con respecto a HTML4

En cuanto a la codificación de caracteres, se dispondrá de tres medios de

establecerlos:

1. En el nivel de transporte. Al utilizar el HTTP Content-Type del

encabezado, por ejemplo.

2. Usando una marca de orden de bytes Unicode (BOM) de

caracteres al principio del archivo. Esta figura proporciona una
firma para la codificación utilizada.

3. Mediante la utilización de un meta elemento con un charset

atributo que especifica la codificación dentro de los primeros
1024 bytes del documento. Por ejemplo, <meta charset="UTF-
8"> podría ser utilizado para especificar la codificación UTF-8. Esto
reemplaza la necesidad de <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"> a pesar de que la sintaxis que
se sigue permitiendo.

Para la sintaxis XML, los autores han de utilizar las normas establecidas en
las especificaciones XML para configurar la codificación de caracteres.

La sintaxis HTML de HTML5 permite MathML y SVG elementos que se

utilizarán dentro de un documento. Por ejemplo, un documento muy sencillo con
algunas de las características de sintaxis mínima podría ser:
1 <!doctype html>
2 <title>SVG in text/html</title>
3 <p>
4 A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
5 </p>
 HTML5 – Características y mejoras con respecto a HTML4

3.- Otras mejoras reseñables de HTML5

Pasamos a enumerar algunas de estas implementaciones:

a) No más TYPE para scripts y links

Normalmente se utilizaba type para los links y scripts tags, tal como
muestra la imagen
1 <link rel="stylesheet" href="stylesheet.css" type="text/css" />
2 <script type="text/javascript" src="script.js"></script>

Ahora se enlazará así:

1 <link rel="stylesheet" href="stylesheet.css" />
2 <script src="script.js"></script>

b) No más comillas ni cerrar elementos

A diferencia de XHTML en HTML5 ya no será necesario usar comillas para
los atributos, y ni siquiera es necesario cerrar los elementos.
1 <p id=cualquierID> Hola que tal.

c) <figure> , nuevo elemento de HTML5

Con <figure> podemos ordenar semánticamente mejor una imagen a un
pie de imagen uniendo ambos elementos dentro de uno mismo.
Por lo que una imagen como esta
1 <img src="images/marte.jpg" alt="Imagen de Marte" />
2 <p>Imagen de Marte. </p>

Quedaría de la siguiente forma:

1 <figure>
2 <img src="images/marte.jpg" alt="Imagen de Marte" />
3 <figcaption>
4 <p>Imagen de Marte. </p>
5 </figcaption>
6 </figure>

d) Text inputs para emails

Dentro de poco la mayoría de navegadores va a venir con validación de
formularios incorporado por lo que agregando el nuevo type de email, crearemos
input texts que solo permitan direcciones de email válidas
1 <input id="email" name="email" type="email" />
 HTML5 – Características y mejoras con respecto a HTML4

e) Los nuevos atributos “required” y “autofocus”

Además de la validación si añadimos el atributo “required” no podremos
enviar un formulario hasta no añadir la dirección de email en dicho campo.
1 <input id="email" name="email" type="email" required>

O también:
1 <input id="email" name="email" type="email" required="required"/>

Por otro lado el atributo “autofocus” es otra solución más que nos evita
usar javascript en nuestros formularios y al igual que el atributo anterior se usa
de la siguiente forma.
1 <input id="email" name="email" type="email" required autofocus>

f) Placeholders o marcas de agua

Los placeholders o marcas de agua son el texto que aparece en las cajas de
búsqueda que al escribir o hacer focus desaparece. De momento esto se podía
hacer con javascript , pero ahora simplemente añadiendo este nuevo atributo
conseguimos el mismo resultado.
1 <input name="email" type="email" placeholder="info@tuweb.com" />

g) Nueva semántica de <header> <nav> y <footer>

A partir de ahora HTML5

A la hora de ordenar la web se
incorpora nueva semántica para
solían usar DIVs asignándoles
estas partes de la página quedando
atributos tales como:
de la siguiente manera:

1 <div id="header">
2 <div id="nav"> 1 <header>
3 2 <nav>
4 <ul> 3
5 4 <ul>
6 <li></li> 5
7 6 <li></li>
8 <li></li> 7
9 8 <li></li>
10 </ul> 9
11 10 </ul>
12 </div> 11
13 </div> 12 </nav>
14 13 </header>
15 <div id="footer"> 14
16 ... 15 <footer>
17 </div> 16 ...
17 </footer>
HTML5 – Características y mejoras con respecto a HTML4

h) Internet Explorer y HTML5

Para variar IE es un mundo aparte en respecto a todos los navegadores , y
la única forma que reconozca los elementos de HTML5 es haciéndoselo saber.
Para ello Remy Sharp creo un script que inicializa todos los elementos en IE
1 <!--[if IE]>
2 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3 <![endif]-->

i) Contenido editable
Los nuevos navegadores soportan un nuevo atributo que puede ser
aplicado a los elementos para permitir editar el texto en ellos. Como bien dicen
en nettuts esto sumado a por ejemplo la posibilidad de guardas datos localmente
permite crear simples programas como por ejemplo una lista de Tareas
1 <!DOCTYPE html>
2
3 <html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <title>untitled</title>
7 </head>
8 <body>
9 <h2> To-Do List </h2>
10 <ul contenteditable="true">
11 <li> Break mechanical cab driver. </li>
12 <li> Drive to abandoned factory
13 <li> Watch video of self </li>
14 </ul>
15 </body>
16 </html>

j) Soporte para audio

Aunque aún queda mucho camino por recorrer, los navegadores más
actuales soportan este nuevo elemento evitando así el uso de plugins y librerías
externas. Aunque eso sí, como siempre con diferencias entre unos y otros;
mientras Firefox se decanto por soportar archivos .ogg, Webkit funciona
con .mp3, Internet Explorer no soporta ningún formato y Ópera de momento
solo .wav
1 <audio autoplay="autoplay" controls="controls">
2 <source src="file.ogg" />
3 <source src="file.mp3" />
4 <a href="file.mp3">Download this file.</a>
5 </audio>

De este modo por ejemplo Safari se saltaría el archivo .ogg y reproduciría

el .mp3
HTML5 – Características y mejoras con respecto a HTML4

k) Soporte para video

Al igual que en el elemento Audio los navegadores están divididos sobre
qué formato de video apoyar en un futuro. Mientras Firefox y Opera apoyan los
formatos abiertos de Theora y Vorbis , Safari e Internet Explorer soportan H.264,
formato no abierto que es soportado por los reproductores flash actuales.

Por eso, a la hora de ofertar videos en nuestras web debemos ofrecer

ambas alternativas al igual que hicimos con el audio
1 <video controls preload>
2 <source src="video-gracioso.ogv" type="video/ogg; codecs='vorbis, theora'" />
3 <source src="video-gracioso.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
4 <p> Tu navegador no lo soporta. <a href="video-gracioso.mp4">Puedes descargar el video.</a> </p>
5 </video>

Aunque por norma no es necesario especificar el atributo type, haciéndolo

ahorramos un poco de trabajo al navegador ya que sino lo tendría que averiguar
por si solo.

Por otro lado si tu navegador no soporta HTML5 video podremos optar

por un link de descarga del video o simplemente colocar el video en formato flash
como alternativa.

l) Atributos “preload” y “controls”

Estos dos nuevos atributos vistos en los elementos HTML5 audio y
HTML5 video se describen por si solos.

El atributo controls añade los controles (play, pause,etc) para controlar los
videos y audios.
1 <video controls>

Y el atributo preload hace una precarga del video para ahorrar algo de
tiempo en la experiencia del usuario. Si la página esta diseñada para mostrar un
video deberíamos activarlo en cambio si no estamos seguro que el usuario desee
verlo ya que es algo secundario dentro del contenido, no lo incluiremos.
1 <video controls preload>
HTML5 – Características y mejoras con respecto a HTML4

m) Expresiones regulares con el nuevo atributo pattern

Otro nuevo atributo que hará más fácil la validación de formularios sin el
uso de Javascript. En el siguiente ejemplo un usuario deberá crear un username
que conste de letras mayúsculas o minúsculas con más de 4 caracteres y menos
de 10.
1 <form action="" method="post">
2 <label for="username">Crear un Username: </label>
3 <input type="text"
4 name="username"
5 id="username"
6 pattern="[A-Za-z]{4,10}"
7 autofocus
8 required>
9 <button type="submit">Crear </button>
10 </form>

n) Nuevo elemento <mark>

Este nuevo elemento es parecido a <em> o <strong> pero a diferencias de
estos que sirven para darle valor o poder a una palabra <mark> esta pensado
como un resaltador. Algo muy utilizado en buscadores para resaltar las palabras
mas relevantes y que un poco de javascript podríamos implementar.
1 <h3>Resultados de avion </h3>
2 <p>El aeropuerto Pablo Picasso esta lleno de <mark style="background-color:#FFFF88;">avion</mark>es

ñ) Atributo data para atributos personalizados

Este “nuevo” atributo es muy útil cuando se quiere pasar valores a
javascript por ejemplo. Antes podíamos utilizar cualquier atributo inventado por
nosotros y nuestros scripts funcionaban, pero la validación fallaba. Ahora
agregando data al atributo podremos usarlo sin problema como muestra el
siguiente ejemplo.
1 <div id="myDiv" data-valorCualquiera="Mi valor"> Bla Bla </div>

Y para obtener dicho valor con JS

var theDiv = document.getElementById(‘myDiv’);
var attr = theDiv.getAttribute(‘data-valorCualquiera’);
alert(attr); // Mi valor
HTML5 – Características y mejoras con respecto a HTML4

Incluso se puede usar con CSS para hacer un cambio de texto con la
propiedad hover
1 <!DOCTYPE html>
2
3 <html lang="es">
4 <head>
5 <meta charset="utf-8">
6 <title>Texto cambiante</title>
7 <style>
8
9 h1 { position: relative; }
10 h1:hover { color: transparent; }
11
12 h1:hover:after {
13 content: attr(data-hover-response);
14 color: black;
15 position: absolute;
16 left: 0;
17
18 }
19 </style>
20 </head>
21 <body>
22
23 <h1 data-hover-response="Que no me toques!!!"> No tocar </h1>
24
25 </body>
26 </html>

ñ) Elemento Canvas
Es un nuevo componente que permitirá dibujar, por medio de las funciones
de un API, en la página todo tipo de formas, que podrán estar animadas y
responder a interacción del usuario. Es algo así como las posibilidades que nos
ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de
tener instalado ningún plugin.

Un ejemplo de ello sería la siguiente imagen:

<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

o) Bases de datos locales

El navegador permitirá el uso de una base de datos local, con la que se
podrá trabajar en una página web por medio del cliente y a través de un API. Es
algo así como las Cookies, pero pensadas para almacenar grandes cantidades de
información, lo que permitirá la creación de aplicaciones web que funcionen sin
necesidad de estar conectados a Internet.
HTML5 – Características y mejoras con respecto a HTML4

p) Web Workers
Son procesos que requieren bastante tiempo de procesamiento por parte
del navegador, pero que se podrán realizar en un segundo plano, para que el
usuario no tenga que esperar que se terminen para empezar a usar la página.
Para ello se dispondrá también de un API para el trabajo con los Web Workers.

q) Aplicaciones web Offline

Existirá otro API para el trabajo con aplicaciones web, que se podrán
desarrollar de modo que funcionen también en local y sin estar conectados a
Internet.

r) Geolocalización
Las páginas web se podrán localizar geográficamente por medio de un API
que permita la Geolocalización.

s) Nuevas APIs para interfaz de usuario:

Temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las
interfaces de usuario de los programas convencionales, serán incorporadas al
HTML 5 por medio de un API.

t) Fin de las etiquetas de presentación

Todas las etiquetas que tienen que ver con la presentación del documento,
es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad
de definir el aspecto de una web correrá a cargo únicamente de CSS.

Como se puede ver, existirán varios API con los que podremos trabajar
para el desarrollo de todo tipo de aplicaciones complejas, que funcionarán online
y offline. Quizás se entienda mejor por qué HTML 5 es un proyecto tan ambicioso
y que está llevando tanto tiempo para ser elaborado.
HTML5 – Características y mejoras con respecto a HTML4

u) Modernizr
Es una librería de JavaScript con licencia MIT de código abierto que detecta
si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá
actualizando y para utilizarla solo hay que incluir en <head><script> de tu
página.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna

función tipo: modernizr_init().

Cuando se ejecuta, se crea una objeto global llamado Modernizr, que

contiene un set de propiedades Boleanas para cada elemento que detecta. Por
ejemplo si su navegador soporta elementos canvas, la propiedad de la librería
Modernizr.canvas será “true”. Si tu navegador no soporta los elementos canvas,
la propiedad Modernizr.canvas será “false”.

if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento
 HTML5 – Características y mejoras con respecto a HTML4

4.- En conclusión

Existen muchos más cambios que introduce HTML5 con respecto a su

predecesor. Los registros de cambios aparecen consignados en el borrador
mencionado en el apartado 1 de este trabajo, e indican qué ha cambiado entre
las publicaciones de los proyectos HTML5. La justificación de los cambios se
puede encontrar en el public-html@w3.org y whatwg@whatwg.org (que son lista
de correo). También se recoge en la página wiki de WHATWG.

Muchas editoriales y los cambios técnicos menores no están incluidos en

estos registros de cambios. Es decir, los ejecutores son fuertemente alentados a
seguir el desarrollo de la especificación principal en forma frecuente para que
sean conscientes de todos los cambios que les afectan desde el principio.

Los cambios en los registros de cambios están en orden cronológico en

bruto para facilitar la edición de este documento.

Nota.- Para informarse de todas las novedades al completo, el interesado debe dirigirse a la página
de W3C. También será interesante una visita a la Wikipedia, en la que existe un completo cuadro de
gran parte de las etiquetas modificadas y las fuentes consultadas para realizar el artículo.