HTML y algunas de sus características tipo "huevos de pascua"

HTML y algunas de sus características tipo "huevos de pascua" 🖥🥚


Por Enio...


HTML... Las siglas de un lenguaje del futuro y del presente del que ya hemos hablado en alguna ocasión, sobre todo porque es muy relevante en el contexto del blogging, donde los editores necesitan acceder al código fuente de sus posts para maquetarlos y formatearlos. Tanto si eres un usuario técnico como si no, en el caso de que no tengas claro qué tipo de lenguaje es HTML, echa un vistazo al siguiente meme.

Meme sobre HTML
⬆️ ¡No, HTML no es un lenguaje de programación!


Aunque esté relacionado con esta área, HTML es más bien un lenguaje de marcado, esto es, sirve para estructurar y formatear contenido, como el de las páginas web y los artículos de blogs como este. El trabajo de programación, por otra parte, se deja a otros lenguajes, como Javascript.

HTML es un lenguaje informático muy sencillo de aprender para casi todos, pero la gran mayoría de sus características son poco aprovechadas, lo que abarca muchísimas que son totalmente desconocidas incluso para los versados. Se me ocurre que están por allí, esperando ser descubiertas, como si se trataran de huevos de pascua.


☝️ Por si no lo sabías... ➡️ en el contexto de la informática y la programación, los huevos de pascua son mensajes o comportamientos ocultos que se han dejado en un producto por distintos motivos, como para provocar curiosidad, hacer de marca personal o como simple detalle artístico.


Y no necesariamente se trata de etiquetas incorporadas en las actualizaciones más recientes que podríamos consultar en artículos semanales, sino etiquetas que han estado allí durante mucho tiempo. Es por ello que en este post compartiré tres características de HTML que probablemente resulten desconocidas, incluso para mí en algún momento.

Comprobar la ortografía

En ocasiones nos parecerá conveniente asegurarnos de la precisión ortográfica de la información textual que el usuario envíe, por lo que HTML dispone de un método para ello mediante el atributo spellcheck, el cual permite solicitar al navegador web que haga la comprobación ortográfica al tiempo que el usuario teclea, señalándole los errores con el típico subrayado rojo.

Evidentemente, este atributo puede ser usado con los elementos de entrada textual, tales como los input de texto (text, search, email, url, etc.), así como los textarea y elementos que soporten el atributo contenteditable.

El siguiente snippet muestra un ejemplo de cómo usarlo.


<input type="text" spellcheck="true" placeholder="Escribe tu resumen">
<p contenteditable="true" spellcheck="true">
  Escribe el extenso aquí
</p>    


En este ejemplo, los elementos input text y p (párrafo), son editables y se les ha activado la propiedad de verificación ortográfica (spellcheck="true").

Sin embargo, es una buena práctica usar este atributo de manera global, una potente capacidad que permite heredar el atributo entre las etiquetas hijas, generalizando su aplicación. Una buena manera de llevarlo a cabo es usándolo una capa superior de div, lo que hará posible la verificación ortográfica de todos los elementos de texto anidados.

Por supuesto, el funcionamiento de la propiedad dependerá de si el navegador web está configurado para interpretarla, algo que normalmente los navegadores hacen por defecto, pero que puede ser desactivada por el usuario.

Incorporar atajos de teclado

Una propiedad tremendamente subutilizada, como también lo suele ser el propio teclado por parte de los usuarios promedio de computadoras. Este dispositivo, cuando se sabe aprovechar, puede facilitar y agilizar grandemente el uso del computador. Ello lo sabían los creadores del estándar 4 de HTML, pues es desde ese entonces que está incorporada esta capacidad en el lenguaje, pensada para aprovechar el teclado durante la experiencia de navegación web.

Para implementarla se usa el atributo global accesskey. Un ejemplo de ello puede ser el siguiente snippet.


<button accesskey="p" onclick="alert('¡Hallaste un huevo de pascua!')">
    Prueba suerte
</button>   


Con ello hemos creado un botón (que podría añadirse a una hilera de botones, por ejemplo) que simplemente muestra un mensaje de éxito ("Hallaste un huevo de pascua"). La idea es que si el usuario acierta la tecla asignada para este evento, pasará lo mismo que hacer clic en ese botón.

Para que el comportamiento de acesskey se dispare, es necesario 1) conocer el valor especificado para esa propiedad (que debe ser un caracter imprimible, que incluye aquellos caracteres acentuados) y 2) la combinación de teclas predeterminadas por el navegador para activar esta propiedad. En el caso de Firefox, la combinación es Alt + Mayúscula + caracter-especificado. En otros navegadores web la combinación puede ser distinta e incluso puede variar dependiendo del sistema operativo.

Quizá la única desventaja del uso de esta propiedad tenga que ver con el soporte a los comandos de accesibilidad, los cuales podrían entrar en conflicto con estos atajos definidos con accesskey. Sin embargo, la opción está allí y puede ser de algún modo bien implementada y aprovechada.

Ocultación semántica

A la hora de ocultar elementos de contenido en la programación web, se dispone de varios métodos en CSS y Javascript, configurando o manipulando las propiedades como visibility: hidden, display: none, opacity: 0, height: 0, width: 0, text-index: -999px, entre otras.

Todos estos métodos tienen su alcance y utilidad y no son mutuamente excluyentes. De hecho, el atributo HTML hidden es otro método existente para ocultar elementos y es también relativamente desconocido y subutilizado.

<div hidden>...</div>

El funcionamiento de este atributo es casi idéntico al de la regla CSS display: none, esto es, todo aquel elemento al que le sea aplicado no se renderizará. Permanecerá oculto sea cual sea la pantalla o terminal de salida, llámese navegador web, proyectores, screenreaders, etc. Sin embargo, esto no detiene los otros efectos de los elementos, pues los scripts y los forms bajo este atributo, por ejemplo, seguirán funcionando.

La ventaja (y diferencia) de hidden sobre display: none es que el primero no puede ser sobreescrito por el segundo, de modo que la manipulación del CSS no afectará el renderizado del elemento con esta propiedad.

En definitivas cuentas, desde la comprobación otográfica hasta la creación de atajos de teclado, aún hay muchas más características interesantes y poco exploradas del rico lenguaje de marcado de hipertexto por excelencia: HTML.


ALGUNAS REFERENCIAS

H2
H3
H4
3 columns
2 columns
1 column
7 Comments
Ecency