HTML 5.1 presentado: 14 nuevas características explicadas y usos prácticos

HTML5 es propiedad del World Wide Web Consortium (W3C), que proporciona estándares en la web para que los protocolos de todo el mundo sean interaccesibles. En noviembre de 2016, W3C actualizó el HTML 5 de larga duración, que es la primera actualización menor en 2 años. Muchas características iniciales de HTML 5.1 se descartaron debido a diseño defectuoso y falta de soporte de proveedores de navegadores.

Aunque hay pocos elementos y mejoras traídos a HTML 5.1, sigue siendo una actualización menor. Algunos de los nuevos elementos contienen etiquetas combo, que ahora incluyen <dialog>, <details>, <summary> y <picture>, dando a los desarrolladores aún más espacio para expresión.

W3C ya ha empezado a trabajar en un borrador de HTML 5.2 que se espera lanzar cerca de finales de 2017. Mientras tanto, presentamos algunas interesantes nuevas características y mejoras introducidas en la versión 5.1. Puedes hacer uso de estas características sin tocar JavaScript. No todos los navegadores soportan estas características, así que es mejor que compruebes el soporte del navegador antes de usarlas en producción.

14. Prevenir ataque de phishing

La mayoría de la gente que usa target='_blank' no sabe un hecho curioso: la pestaña recién abierta puede alterar window.opener.location a alguna página de phishing. Ejecutará algún código JavaScript malicioso en la página de apertura en tu nombre. Como los usuarios confían en la página ya abierta, no se sospecharán.

Para eliminar completamente este problema, HTML 5.1 ha estandarizado el uso del atributo rel="noopener" que separa contextos de navegador. El rel="noopener" puede usarse dentro de etiquetas <a> y <area>.

<a href="#" target="_blank" rel="noopener"> El enlace no causará más problemas </a>

Leer: 24 herramientas de animación CSS3 y HTML5 para diseñadores

13. Manejar leyenda de figura flexible

La etiqueta <figcaption> representa una leyenda o título asociado con el elemento <figure>, que actúa como contenedor para elementos visuales como imágenes, diagramas, ilustraciones, etc. En versiones tempranas de HTML, <figcaption> solo podía usarse como primer o último hijo de la etiqueta <figure>. HTML5.1 ha relajado esta restricción, y ahora puedes usar <figcaption> en cualquier lugar dentro de su contenedor <figure>.

<article> <h1>El titular de la noticia de hoy </h1> <figure> <img src="petrolimage.jpeg" alt="Precio de gasolina baja"> <figcaption>Un hombre repostando su coche en gasolinera</figcaption> </figure> <p>Esta es la cuarta subida de precios de gasolina en dos meses y la tercera en caso de diésel en quincena.</p> </article>

12. Corrección ortográfica

El spellcheck es un atributo enumerado cuyas palabras clave son la cadena vacía, true y false. El estado true indica que el elemento debe tener su ortografía y gramática revisadas. El elemento.forceSpellCheck() fuerza al agente de usuario a informar errores de ortografía y gramática en el elemento de texto, incluso si el usuario nunca ha enfocado el elemento.

<p spellcheck="true"> <label>Nombre: <input spellcheck=" false" id="textbox"></label> </p>

11. La opción vacía

La nueva versión de HTML te permite crear un elemento <option> vacío. Puede ser elemento hijo de <optgroup>, <datalist> o <select>. Encontrarás esta característica útil al diseñar formularios amigables para el usuario.

10. Permitir pantalla completa para frames

El atributo booleano allowfullscreen, desarrollado para frames, te permite controlar si el contenido puede presentarse a pantalla completa usando el método requestFullscreen(). Por ejemplo, tomemos un iframe que incrusta un reproductor de YouTube. El atributo allowfullscreen es necesario para permitir que el reproductor muestre su video a pantalla completa.

<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Publicación Privada</a></p> </header> <main> <p>¡Mira mi nuevo video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>

9. Header y Footer anidados

HTML 5.1 te permite anidar header y footer dentro de otro header. Puedes añadir un header o footer al elemento header si ellos mismos están contenidos dentro de contenido de seccionamiento. La característica puede ser bastante útil si quieres añadir headers elaborados a elementos de seccionamiento semántico, como <section> y <article>.

En el código dado abajo, el <article> contiene un <header> que tiene un <aside> que a su vez contiene un <header>.

<article> <header> <h2>Lección: Cómo cocinar pollo</h2> <aside> <header> <h2>Sobre el autor: Tom Hank</h2> <p><a href="./tomhank/">¡Contáctalo!</a></p> </header> <p>Experto en nada salvo Cocina. El sideshow del libro de cocina.</p> </aside> </header> <p><ins>Vierte el adobo en la bolsa zip-top con el pollo y ciérrala. Elimina todo el aire posible de la bolsa y ciérrala. </ins></p> </article>

8. Imágenes de ancho cero

La nueva versión de HTML te permite añadir imagen de tamaño cero. Esta característica se usa cuando la imagen no está destinada al usuario. Si un elemento img se usa para propósitos distintos a mostrar una imagen, por ejemplo, como parte de un servicio para contar vistas de página, usa atributos width y height con valor 0. Para imágenes de ancho cero, se recomienda usar atributos vacíos.

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

7. Validar formulario

El nuevo método reportValidity() te permite validar un formulario y recuperar los resultados, y reportar los errores a los usuarios directamente en el navegador. Los agentes de usuario pueden reportar más de una violación de restricción, si el elemento sufre múltiples problemas al mismo tiempo. Como en este caso, la entrada "password" debería marcarse con error ya que es obligatoria pero está vacía.

<h2>Validación de formulario</h2> <p>Introduce detalles</p> <form> <label> Entrada obligatoria <input type="password" name="password" required /> </label> <button type="submit">Enviar</button> </form> <script> document.querySelector('form').reportValidity() </script>

6. Menú contextual del navegador

En HTML 5.1, puedes usar la etiqueta <menu> para definir un menú consistente en uno o más elementos <menuitem>, y luego vincularlo a cualquier elemento usando el atributo contextmenu. El id del elemento <menu> debe tener el mismo valor que el atributo contextmenu del elemento al que queremos añadir el menú contextual.

Cada <menuitem> puede tener una de tres formas:

• radio – Seleccionar opción de un grupo
• checkbox – Seleccionar o deseleccionar una opción
• command – Ejecutar una acción al hacer clic

<h2 contextmenu="popup-menu"> Haz clic derecho para obtener la demo del menú contextual. </h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem> <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> <menuitem type="radio" name="group1">Radio button a</menuitem> <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem> <menuitem type="checkbox" disabled>Elemento de menú deshabilitado</menuitem> </menu>

5. Usar nonces criptográficos con scripts y estilos

Un nonce criptográfico es un número generado aleatoriamente que puede usarse solo una vez, y debe regenerarse para cada petición de página. Este atributo nonce puede usarse dentro de los elementos <script> y <style>.

Generalmente es usado por la Política de Seguridad de Contenido de un sitio web para decidir si un cierto estilo o script debe implementarse en la página. En el código dado, el valor está hard-coded, pero en escenario real, su valor se genera aleatoriamente.

<script nonce='d3ne7uWP43Bhr0e'> El Código JavaScript </script>

4. Relación de enlace inversa

El atributo rev se definió en HTML 4, sin embargo no se incluyó en HTML5. El W3C decidió incluir el atributo rev nuevamente para los elementos <a> y <link>. El atributo rev especifica la relación del documento actual y el documento enlazado en dirección inversa. Se ha incluido para soportar el formato de marcado de datos estructurados ampliamente usado, RDFa.

Tomemos un ejemplo de dos documentos, cada uno conteniendo una lección, el enlace entre ellos puede definirse con atributos rel y rev como se muestra…

//Documento con URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> //Documento con URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">

3. Mostrar/Ocultar información

Los nuevos elementos <details> y <summary> te permiten añadir información extendida a un contenido. Puedes mostrar u ocultar un bloque de información adicional haciendo clic en el elemento. La información adicional está oculta por defecto.

En tu código, debes poner la etiqueta <summary> dentro de <details> como se muestra. Después de la etiqueta <summary> puedes añadir el resto del contenido que quieras ocultar.

<section> <h3>Mensaje de Error</h3> <details> <summary>Este archivo no se ha descargado debido a error de red.</summary> <dl> <dt>Nombre de archivo:</dt><dd>Passcode.txt</dd> <dt>Tamaño de archivo:</dt><dd>8 KB</dd> <dt>Código de error:</dt><dd>342a</dd> </dl> </details> </section>

2. Más tipos de input

Los elementos input de HTML se han extendido con tres tipos más de input: week, month y datetime-local. Como sugiere el nombre, los dos primeros permiten a los usuarios seleccionar una semana o un mes. Dependiendo del soporte del navegador, ambos se renderizan como un calendario desplegable que te permite seleccionar una semana o mes particular de un año.

El datetime-local especifica un campo de entrada de fecha y hora, sin zona horaria. Los datos pueden seleccionarse de forma similar al input de mes o semana, y la hora puede escribirse por separado.

<section> <h2> Semana, Mes y Datetime-local </h2> <form action="action_page.php"> Elige una semana: <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> Cumpleaños (mes y año): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> Incorporación (fecha y hora): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Enviar"> </form> </section>

1. Imágenes responsivas

W3C ha introducido algunas nuevas características para implementar imágenes responsivas sin uso de CSS. Estas son…

El atributo de imagen srcset

El atributo srcset te permite definir múltiples fuentes de imagen alternativas que varían en densidad de píxeles. Permitirá al navegador seleccionar una imagen de calidad adecuada según el dispositivo del usuario. Por ejemplo, sería bueno mostrar una imagen de menor resolución para usuarios con dispositivos móviles en redes más lentas.

Puedes usar el atributo srcset con su propio modificador x que describe la proporción de píxeles para cada imagen. Como se muestra en el ejemplo, si el píxel del usuario es igual a 3, se mostrará la imagen de alta resolución.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >

En lugar de diferente proporción de píxeles, puedes optar por mostrar imágenes de diferente tamaño usando el modificador w. En este caso, la imagen de alta resolución se define como 1600px.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

El atributo de imagen sizes

La mayoría de las veces a los autores les gusta mostrar diferentes imágenes para diferentes tamaños de pantalla. Esto puede hacerse usando el atributo sizes. Te permite transformar el ancho de la pantalla en espacio asignado para una imagen, y luego elegir la imagen adecuada usando el atributo srcset. Por ejemplo…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

En este caso, el atributo sizes define el ancho de la imagen como 100% del ancho del viewport cuando el ancho del viewport es mayor que 25em, o 60% del ancho cuando es menor o igual a 25em.

El elemento picture

El elemento picture te permite declarar imágenes con varias fuentes para diferentes tamaños de pantalla. Esto puede hacerse envolviendo <img> con el elemento <picture> y describiendo múltiples elementos <source> hijos.

Leer: 35+ frameworks útiles de HTML y CSS para diseñadores web

La etiqueta <picture> por sí sola no mostrará nada. Debes declarar la fuente de imagen por defecto como valor del atributo src, y las fuentes de imagen alternativas van dentro del atributo srcset como se muestra…

<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"> </picture>