4 características de HTML que no conoces

HTML es un lenguaje simple y fácil de aprender, y aún así cuenta con una ingente cantidad de características la mar de útiles, muchas de las cuales ni conocemos siquiera. Es muy difícil mantenerse al día y seguramente ya has visto miles de artículos con el típico subtítulo de “que no conoces” que tratan sobre los tags recientemente introducidos, pero este artículo no tratará de eso, en él hablaremos sobre caracterísiticas que ya llevan entre nosotros mucho tiempo.

Desde comprobar la ortografía, hasta crear atajos de teclado, en este artículo te mostraré cuatro funciones de HTML muy poco conocidas.

Comprobar la ortografía al escribir

El atributo spellcheck solicita a los navegadores que comprueben la ortografía cuando un usuario está escribiendo dentro de un elemento. Este atributo es global, es decir, se puede añadir a cualquier etiqueta HTML.

Sin embargo, sólo funciona en elementos en los que se pueda introducir texto. Tenerlo global es útil porque puede ser heredado por elementos secundarios. Por ejemplo, puedes agregarlo a una etiqueta <div> y todos sus elementos secundarios en los que se pueda escribir heredarán este atributo.

La comprobación ortográfica funciona en todos los input de texto: text, search, url y email. También funciona en los <textarea>, y en elementos editable (elementos con atributo contenteditable).

Su valor puede ser una cadena vacía, true o false. La cadena vacía y true habilitarán el corrector ortográfico.

<input type="text" spellcheck="true"
placeholder="Type something here">
<p contenteditable="true" spellcheck="true">
  Type something here
</p>

En el código anterior, tanto las etiquetas <div> como <p> verifican la ortografía cuando un usuario está escribiendo en ellos.

Si el usuario ha deshabilitado la revisión ortográfica en la configuración del navegador, no se verificará la ortografía, aunque se haya agregado dicha característica.

Sobreescribir el target de un formulario mediante los botones de submit

Probablemente estés familiarizado con el atributo target. Este indica dónde abrir un hipervínculo, por ejemplo en la misma página o en una nueva pestaña. También sabrás que el mismo atributo target utilizado en la etiqueta <form> decide dónde se muestra la respuesta de un formulario enviado.

En uno de los primeros borradores de HTML5, se definió formtarget junto con otros cuatro atributos para formularios: formaction, formenctype, formmethod, y formnovalidate.

Estos atributos se pueden utilizar en los botones de submit y anulan los atributos del form al que pertenecen los botones.

Por lo tanto, cuando se envía un formulario utilizando un botón que tiene un atributo formtarget, la respuesta se muestra de acuerdo con el valor formtarget, en lugar del valor target de <form>.

<form action="/save" target="_self" >
  <input type="submit" name="save"  />
  <input type="submit" name="print" formaction="/print"
  formtarget="_blank" />
</form>

En el código anterior, cuando enviamos el formulario mediante el segundo botón de submit (print), la respuesta aparecerá en una nueva pestaña.

Esconder elementos semánticamente

Cuando se trata de ocultar elementos, todos pasamos por diferentes fases. Podemos utilizar opacity: 0, visibility: hidden, height: 0; width: 0, display: none, text-indent: -999px, para ocultar elementos en nuestro archivo CSS.

Cada método tiene su propósito, ninguno de ellos es redundante, y por lo tanto este tampoco: el atributo HTML hidden. Si un elemento tiene el atributo hidden, se ocultará.

<div hidden>...</div>

Funciona de la misma manera que la regla CSS display: none. El elemento con el atributo hidden no se renderizará en la página. Cualquier script dentro del elemento se ejecutará, y si se trata de un elemento de un formulario, se enviará junto con los otros elementos del formulario al hacer submit.

Por otra parte, cuando un elemento está hidden, se ocultará en todas las plataformas, no sólo en los navegadores web, sino en screenreaders, TV, proyectores, etc

Tampoco dependerá del estilo, incluso si quitas el CSS de una página, el elemento permanecerá oculto. Si esto lo extrapolamos al display:none, esto no sucederá. Por lo tanto, piensa en hidden como la versión pro del display:none.

Añadir atajos de teclado

El atributo global accesskey ya estaba definido en HTML4 y añade un atajo de teclado con el que el usuario puede operar en un elemento en la página.

La combinación de teclas para un atajo de teclado dependerá de:

• El valor del accesskey que le hemos dado al elemento
• Las teclas preasignadas utilizadas por un navegador para el mismo elemento

Tomemos este ejemplo:

<button accesskey="v" onclick="alert('View Click')">
  View
</button>

En Firefox, si pulsas la combinación de teclas Alt + Mayús + V (o Alt + Control + V en macOS) obtendrás el mensaje "View Clicked".

Dado que las teclas de navegador predefinidas varían con cada navegador y con el sistema operativo, recomiendo que informes a los usuarios de las combinaciones de teclas utilizadas para los distintos atajos.

Fuente: hongkiat.com