HTML 5.1 presentado:14 nuevas funciones 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, el W3C actualizó el HTML 5 de larga duración, que es la primera actualización menor en 2 años. Muchas funciones iniciales de HTML 5.1 se eliminaron debido a un diseño defectuoso y a la falta de soporte del proveedor del navegador.
Aunque hay pocos elementos y mejoras incorporadas a HTML 5.1, sigue siendo una actualización menor. Algunos de los nuevos elementos contienen etiquetas combinadas, que ahora incluyen
El W3C ya ha comenzado a trabajar en un borrador de HTML 5.2 que se espera que se publique a finales de 2017. Mientras tanto, presentamos algunas características nuevas e interesantes y mejoras introducidas en la versión 5.1. Puede utilizar estas funciones sin tocar JavaScript. No todos los navegadores admiten estas funciones, por lo que es mejor comprobar la compatibilidad del navegador antes de utilizarlas en producción.
14. Prevenir ataques de phishing
La mayoría de las personas que usan target=’_blank’ no tienen idea de un hecho curioso:la pestaña recién abierta puede alterar window.opener.location y convertirla en alguna página de phishing. Ejecutará algún código JavaScript malicioso en la página de apertura en su nombre. Como los usuarios confían en la página que ya está abierta, no sospecharán.
Para eliminar completamente este problema, HTML 5.1 ha estandarizado el uso del atributo rel="noopener" que separa los contextos del navegador. El rel="noopener" se puede utilizar dentro de las etiquetas y .
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Leer:24 herramientas de animación CSS3 y HTML5 para diseñadores
13. Maneje la leyenda de la figura con flexibilidad
La etiqueta
HTML5.1 ha aliviado esta restricción y ahora puedes usar
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12. Revisión ortográfica
El corrector ortográfico es un atributo enumerado cuyas palabras clave son la cadena vacía, verdadero y falso. El estado verdadero indica que se debe revisar la ortografía y la gramática del elemento.
element.forceSpellCheck() obliga al agente de usuario a informar errores ortográficos y gramaticales en el elemento de texto, incluso si el usuario nunca se ha centrado en el elemento.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. La opción vacía
La nueva versión de HTML le permite crear un elemento
10. Permitir pantalla completa para marcos
El atributo booleano enablefullscreen, desarrollado para marcos, le permite controlar si el contenido puede presentarse en pantalla completa mediante el método requestFullscreen(). Por ejemplo, tomemos un iframe que incorpora un reproductor de YouTube. El atributo enablefullscreen es necesario para permitir que el reproductor muestre su vídeo en 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">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. Encabezado y pie de página anidados
HTML 5.1 le permite anidar encabezado y pie de página dentro de otro encabezado. Puede agregar un encabezado o un pie de página al elemento del encabezado si están contenidos en el contenido de la sección.
La función puede resultar bastante útil si desea agregar encabezados elaborados a elementos de sección semántica, como
En el código que se proporciona a continuación, el
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p> </article>
8. Imágenes de ancho cero
La nueva versión HTML le permite agregar imágenes de tamaño cero. Esta función se utiliza cuando la imagen no está destinada al usuario. Si un elemento img se utiliza para fines distintos a mostrar una imagen, por ejemplo, como parte de un servicio para contar el número de vistas de página, utilice los atributos de ancho y alto con valor 0. Para imágenes de ancho cero, se recomienda utilizar atributos vacíos.
<img src="theimagefile.jpg" width="0" height="0" alt="">
7. Formulario de validación
El nuevo método reportValidity() le permite validar un formulario y recuperar los resultados, e informa los errores a los usuarios directamente en el navegador. Los agentes de usuario pueden informar 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 “contraseña” debe marcarse con error ya que es obligatoria pero está vacía.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6. El menú contextual del navegador
En HTML 5.1, puede usar la etiqueta