6 nuevas características de HTML 5.1 y cómo aplicarlas

Hace un par de semanas W3C lanzó la última revisión importante de la especificación HTML, concretamente HTML 5.1. En un post reciente en su blog, W3C ha determinado que es el mayor lanzamiento del nuevo estándar. HTML 5.1 nos proporciona nuevas maneras de utilizar HTML para crear experiencias web más flexibles.

En este artículo, vamos a echar un vistazo a esas nuevas características que puedes utilizar sin tocar nada de Javascript, sin embargo este nuevo lanzamiento también cuenta con mejoras notables en Javascript, como puedes ver en el log de cambios oficial.

Ten en cuenta que no todos los navegadores soportan estas nuevas características, así que acuérdate de comprobar la compatibilidad con los distintos navegadores antes de utilizarlas en producción.

Definir múltiples imágenes para el diseño responsive

En HTML 5.1, puedes utilizar el tag <picture> junto con el atributo srcset para hacer posible la selección de imágenes responsive. El tag <picture> representa un contenedor de imágenes que permite a los desarrolladores declarar diferentes imágenes para que se adapten al tamaño de la ventana de visión, la densidad de píxeles en pantalla, el tipo de pantalla y otros parámetros utilizados en el diseño responsive.

El tag <picture> no muestra nada por sí solo, funciona simplemente como contexto para almacenar múltiples imágenes. Para que funcione debes establecer la imagen por defecto como valor del atributo src del tag <img>, y las imágenes alternativas dentro de los atributos srcset de los elementos <img> y <source>.

<picture>
  <source srcset="mobile.jpg, mobile-hd.jpg 2x"
      media="(max-width: 360px)">
  <source srcset="large.jpg, large-hd.jpg 2x"
      media="(min-width: 1920px)">
  <img src="default.jpg" srcset="default-hd.jpg 2x"
      alt="your image">
</picture>

Mostrar o esconder información extra

Mediante los tags <details> y <summary>, puedes ampliar la información de un contenido. Esta información extra no se muestra por defecto, pero si los usuarios están interesados, tienen la opción de consultarla. Para utilizar esta característica, debes colocar el tag <summary> dentro de <details>. Dentro de la etiqueta <summary> puedes agregar el contenido adicional que desees ocultar.

<section>
  <h2>Error Message</h2>
  <details>
  <summary>We couldn't finish downloading this video.</summary>
  <dl>
    <dt>File name:</dt><dd>yourfile.mp4</dd>
    <dt>File size:</dt><dd>100 MB</dd>
    <dt>Duration:</dt><dd>00:05:27</dd>
  </dl>
  </details>
</section>

Añadir funciones al menú contextual del navegador

Con el elemento <menuitem> y su atributo type=”context”, puedes añadir funciones personalizadas al menú contextual del navegador. Debes asignar <menuitem> como elemento hijo del tag <menu>. El id del elemento <menu> tiene que teneir el mismo valor que el atributo contextmenu del elemento que queremos añadir al menú contextual (que en este ejemplo es un <button>)

<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
  <menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu>

El tag <menuitem> puede ser de tres tipos distintos: checkbox, command y radio. Es posible añadir más de un elemento al menú contextual, pero debo decirte que esta característica aún no esta muy soportada por los navegadores.

Headers y Footers anidados

HTML 5.1 te permite anidar headers y footers si cada nivel está dentro del contenido de la sección. Esta característica puede ser útil si deseas agregar headers elaborados a elementos con secciones semánticas, como <article> y <section>. El ejemplo que puedes ver a continuación crea un sidebar dentro del header, el tag <aside> también es un elemento seccionado y añade información adicional sobre el autor dentro de él. El sidebar dentro del header tiene su propio header, con un subtítulo y la información de contacto del autor.

<article>
  <header>
    <h1>Article Title</h1>
    <aside>
      <header>
        <h2>About the author</h2>
        <p><a href="#">Email</a><a href="#">Twitter</a></p>
      </header>
      <img src="photo.jpg" alt="Author photo">
      <p>Author bio ... </p>
    </aside>
  </header>
  <p>Article intro</p>
  <p>Other paragraphs ...</p>
</article>

Utilizar imágenes de 0 de ancho

HTML 5.1 hace posible crear imágenes con cero de ancho. Esta característica puede ser muy útil si tienes que incluir imágenes que no quieres que vean los usuarios, como archivos de imágenes para el trackeo. Se recomienda utilizar estas imágenes con cero de ancho con el atributo alt vacío.

<img src="yourimage.jpg" width="0" height="0" alt="">

Crear opciones vacías

HTML 5.1 permite a los desarrolladores crear un elemento <option> vacío. El tag <option>, como sabéis, es un elemento hijo de elementos como <select>, <optgroup> o <datalist>. La posibilidad de crear <option> vacíos puede llegar a ser realmente útil si no deseas sugerir qué opcion deben seleccionar los usuarios.

Fuente: hongkiat.com