3 etiquetas HTML útiles que quizá ni siquiera sabías que existían

Los desarrolladores de front-end tienen que estar muy familiarizados con Etiquetas HTML ya que este es su entorno natural a diario. Apuesto a que todos ustedes conocen algunas etiquetas básicas como , , etc. Pero, por ejemplo, ¿sabías que puedes sugerir un momento de ruptura de palabras utilizando sólo HTML¿Sin CSS?

WBR

Supongamos que estás trabajando en un sitio web o una aplicación para un cliente alemán. Como sabes, las palabras alemanas pueden ser muy largas. Así que tienes el diseño con algún contenido de texto que tienes que reproducir en código y este contenido tiene que irrumpir en momentos muy concretos. Aquí viene el para ayudarte.

Geburtstagskuchen

Ya está. Con una etiqueta tan sencilla, puede manipular el contenido del texto como desee.

¿Y la compatibilidad con los navegadores? Bueno, la verdad es que es bastante buena. La mayoría de los navegadores entenderán esta etiqueta, pero Opera en Android y Safari en iOS podrían tener problemas.

CONTADOR

Imagina que estás creando una aplicación de gestión de almacenamiento en disco. Necesitas mostrar de alguna manera en la interfaz de usuario cuánto almacenamiento queda disponible, y quieres que sea lo más accesible posible. Este es un caso de uso perfecto para la aplicación <meter> etiqueta. Sólo te mostrará el valor dentro de un rango definido. Otro aspecto interesante de esta etiqueta son sus atributos:

• bajo → cuando el valor actual es inferior al valor bajo ajustado, la barra del medidor se volverá roja;
• óptimo → cuando los valores actuales sean superiores al valor óptimo del atributo, la barra del medidor se volverá verde;
• alto → cuando el valor alto es inferior al máximo y superior al valor óptimo, la barra del medidor será naranja. De lo contrario, será verde.

Puede que también conozca una etiqueta similar, que es progreso. ¿Cuál es la diferencia entre ambas? La etiqueta de progreso debe utilizarse para tareas en curso. En otras palabras, utiliza la etiqueta de progreso cuando te ocupes de una tarea específica. La etiqueta de contador debe utilizarse para mostrar el uso del disco o de la memoria. Otra diferencia es que la etiqueta de medidor no es soportada por IE y que en realidad es la única desventaja de esta etiqueta.

DEL e INS

¿Te has preguntado alguna vez cómo construir un indicador accesible de partes de contenido eliminadas y añadidas (diff en GitHub o notificaciones por correo electrónico de Jira cuando se ha actualizado el ticket)? Sólo tienes que envolver el contenido eliminado con la etiquetaetiqueta. Por ejemplo: <del><p>Sólo contenido borrado</p></del>. Para mostrar sólo la parte añadida del contenido, puede utilizar la función de la misma manera. Esta etiqueta ofrece también dos atributos:

• cite → uri de un recurso que explica por qué se ha añadido esta parte;
• datetime → datos y hora del cambio.

Hay, por supuesto, mucho más útiles en HTML . Recomiendo encarecidamente utilizarlos todos cuando sea posible y apropiado. Tus clientes y usuarios te lo agradecerán. Pero ten cuidado, porque algunas etiquetas pueden estar obsoletas. Siempre puedes asegurarte de que una etiqueta menos común que quieras usar sigue siendo válida y tiene un buen soporte en Documentación MDN.