Novedades en HTML5
Tras varios días recopilando información y haciendo pruebas sobre lo que está por venir en HTML5 solo puedo decir que ¡Me gusta!, me gusta mucho el rumbo que va tomando, me gusta que vaya encaminada a hacer la web mucho más semántica y que permita a los buscadores indexar la información mucho mejor, me gusta mucho la integración de vídeo y audio y sobre todo todas las mejoras que se meten con CSS3. En esta entrada y sucesivas trataré de hacer un resumen de las mejoras que se han añadido.
Nuevas etiquetas
Se han añadido nuevas etiquetas que pretenden ayudar a mejorar la estructuración del código HTML.
- <!DOCTYPE HTML>. La nueva declaración del tipo de documento, mucho más simple, mucho más clara y actualmente ya soportada por los navegadores más usados.
- <section>. Representa una sección genérica, Puede ser usada junto a <h1>-<h6> para indicar la estructura del documento.
- <article>. Representa un fragmento de contenido, como una entrada de blog o un artículo de periódico.
- <header>. Representa la cabecera de la página. La parte típica donde colocamos un logotipo, un banner…
- <footer>. Igualmente han creado una etiqueta para la parte inferior de la página donde se suelen mostrar, créditos, copyright, el about, los enlaces a redes sociales…
- <nav>. Sección de la página en la que se integra la navegación.
- <dialog>. Puede ser usada para marcar la existencia de un diálogo.
- <video>. ¡Podemos insertar vídeos!. Permite añadir un elemento de vídeo con su barra básica de navegación.
- <audio>. Igual que el vídeo pero para elementos de audio.
- <canvas>. Crea un elemento mediante el cual por medio de javascript podremos dibujar sobre el documento. Por ahora solo en 2d.
- <wbr>. Marca el lugar en el que una palabra puede ser cortada o dividida en caso de que el navegador lo crea necesario.
- <section contenteditable=”true”>. Permite que un contenido sea editable directamente por el usuario.
- <svg>. Inserta un elemento svg, para integrar imágenes de tipo vectoriales con código svg (xml).
- <time>. Indicará a cualquier indexador que el contenido de la etiqueta es una fecha.
- <time datetime=”2012-04-18″>. Indicará al indexador que el contenido de la etiqueta corresponde a la fecha indicada en el atributo. podemos escribir algo así… <time datetime=”2012-04-18″>Hoy</time> es mi cumpleaños.
- <### itemscope itemtype=”*”>. Permite integrar tipos de datos reconocibles por indexadores. Podremos por tanto indicar que estamos tratando con un tipo de dato “persona” y marcar en cada uno de los textos varios valores como <span itemprop=”name”>Eduardo</span>, <span itemprop=”nickname”>Ikito</span>
- <input type=”text” required/>. Marca un input como requerido en un formulario. Podremos darle un estilo y que por ejemplo se remarque en rojo.
- <input type=”***”>. Se crean nutos tipos, tales como “email”, “date”, “number”, “url”, “range”. Son validados en el cliente sin necesidad de javascript y en muchos casos el elemento input tiene un diseño especial, por ejemplo, el “date” despliega un calendario.
- <**** draggable>. Marca un elemento como “arrastrable”, una nueva API que tendremos que estudiar.
Diferencias entre HTML4 y HTML5





