Básicos de HTML5 – Etiquetas y API


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Aunque ya hemos hablando en más de una ocasión de HTML5, siempre conviene recordar que HTML5 no se trata sólo una nueva versión del conocido HTML. Es un estándar que ha mejorado la web, la experiencia de usuario y la experiencia de desarrollo de sitios en Internet. Además de disponer de nuevas etiquetas para el lenguaje de marcación (y aparcar otras), en HTML5 también se engloban nuevas versiones de CSS y API de desarrollo Javascript.

Tampoco olvidemos que HTML5 es una iniciativa que trata de relanzar el mundo de los estándares abiertos bajo el apoyo de los grandes actores en el mundo de Internet. Esto es importante porque tradicionalmente los fabricantes de navegadores y tecnologías de desarrollo se habían enzarzado en una lucha por crear lenguajes y plataformas propias o adaptar las existentes de una manera particular. A partir de la llegada de HTML5 todos se han unido para respetar los estándares, implementando fielmente las especificaciones marcadas por el W3C.

Los desarrolladores web son los principales beneficiados por HTML5, ya que pueden despreocuparse un poco más de las diferencias entre navegadores. Pero HTML5 también incorpora mejoras para los usuarios ya que, sea cual sea el medio de acceso a la web, su experiencia de usuario será mucho más próxima.

Otro de los colectivos que se ha beneficiado de HTML5 son las personas con discapacidad, ya que ahora el lenguaje de etiquetas aporta semántica al contenido, facilitando su interpretación. Asimismo, las máquinas o robots que recorren Internet para procesar su contenido, como buscadores o arañas de indexación, también se han visto beneficiados por esa semántica que permite saber qué función tiene cada pieza de contenido que recorren.

Dicho esto, HTML5 no sólo incorpora nuevas etiquetas o elimina otras, también supone mejoras en áreas diversas. Destacaremos a continuación las que respectan al HTML y al desarrollo con Javascript.

En cuanto al lenguaje HTML

Las mejoras en el lenguaje de etiquetas son diversas. Primero, destacaremos una simplificación del DOCTYPE, que antes podía variar entre versiones de HTML y si estábamos implementando una declaración de frames, por ejemplo. Ahora se ha unificado todo en una misma etiqueta: <!DOCTYPE html>.

Estructura del cuerpo

HTML 5 permite agrupar elementos de la web como la cabecera, pie, navegadores, etc, en nuevas etiquetas que representan cada una de las partes típicas de una página. Ahora para cada cosa usamos la etiqueta particular como:

  • <header>
  • <footer>
  • <nav>
  • <main>
  • <article>
  • <section>
  • <aside>

Etiquetas para contenido específico

HTML5 incorpora etiquetas específicas para cada tipo de contenido en particular, audio, vídeo…

  • <audio>
  • <video>
  • <mark>
  • <time>
  • <progress>

Formularios

Principalmente, se han creado varios tipos nuevos de campos input. Aunque no son etiquetas en sí mismas porque se usan bajo la conocida <input>, estos modificadores hacen que los campos de entrada puedan tener diversos usos:

  • time
  • number
  • range
  • email
  • url
  • date
  • datetime
  • month
  • week

Además de los nuevos atributos placeholder o required.

Etiquetas para la historia

Un conjunto de etiquetas también ha pasado a la historia y han dejado de formar parte de este estándar, aunque por compatibilidad hacia atrás muchas de éstas todavía son interpretadas por los navegadores.

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <s>
  • <strike>
  • <tt>
  • <u>
  • <frame> y sus derivadas, excepto <iframe>
  • <applet>
  • <acronym>
  • <dir>

Como puedes observar, casi todas esas etiquetas servían simplemente para alterar la forma con la que se tenían que mostrar los elementos, como <strike> para un tachado o <center> para alineación. Ahora se rechazan esas etiquetas principalmente porque la definición del aspecto es algo que debería acotarse únicamente al CSS.

Aplicaciones web para una nueva experiencia de usuario

Además, HTML5 permite desarrollar aplicaciones web más parecidas a las aplicaciones de escritorio, de manera que su ejecución dentro de un navegador no implique falta de recursos para resolver las necesidades reales de desarrollo. Gracias a las API de HTML5, podemos trabajar no solo con los elementos de la página, sino también con los periféricos del ordenador o dispositivo. HTML5 permite acceder a diversos recursos que antes sólo se podían llevar a cabo con tecnologías accesorias y lo que es mejor: con un API unificada.

Algunas de las principales API que encontramos en HTML5 son:

  • Canvas
  • Geolocalización
  • Audio / Vídeo
  • Clipboard
  • Orientación del dispositivo
  • Cámara
  • WebRTC
  • Web Workers
  • Web Sockets
  • WebGL

Hay decenas de API para realizar gran cantidad de cosas que están en diversos estados de especificación y con soporte en diferentes navegadores para ordenadores y dispositivos. Cada una de ellas merecería un estudio  en profundidad. La lista, además, no para de crecer, así que es interesante contar con referencias como Can I Use, que permite observarlas y comprobar su penetración en el mercado de navegadores.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *