Con la finalidad de identificar correctamente palabras y su significado en una página web, describiremos las etiquetas para marcar abreviaciones y definiciones de términos, en la creación de documentos HTML. Muchas páginas web carecen, a nivel semántico, de identificación para explicaciones de conceptos, por ende, los lectores de pantallas tienen dificultad al momento de traducirlas a usuarios con discapacidad. Para ello, identificaremos el procedimiento para marcar abreviaciones y definiciones de términos, siguiendo las recomendaciones oficiales del lenguaje HTML.

Cuando se diseña un proyecto web, en el cual es necesario mencionar nombres largos varias veces, es más práctico escribir su abreviatura, en lugar de la definición completa. Por este motivo, se utiliza la etiqueta abbr, la cual amerita un inicio y cierre correspondiente para delimitar el texto abreviado.

061-01_0405_ilu01. Creación de la etiqueta de abreviatura

Aunque es posible utilizar solo la estructura definida con la palabra abreviada a la etiqueta, abbr, es posible añadirle de forma profesional el atributo title, para una semántica con mayor precisión. Para ello, dentro las comillas es necesario escribir el significado del término abreviado, tal como se observa en la ilustración:

061-01_0405_ilu02. Creación de la etiqueta de abreviatura con título

Veamos el siguiente ejemplo, donde es necesario escribir HTML y agregar su definición HyperText Markup Language. De esta manera, para el usuario está oculto el significado del término y solo se observa la abreviación. Esta prueba es realizada mediante el navegador Google Chrome, el cual de forma predeterminada, traza una línea punteada debajo.

061-01_0405_ilu03. Ejemplo de abreviatura

Aunque a la vista del usuario está oculto el significado del término es importante agregarlo, pues los motores de búsqueda de diferentes navegadores web sí la interpretan al momento de leer el código, con la finalidad de realizar coincidencias en la página web con la búsqueda del usuario.

Otra forma de crear abbr es junto a la etiqueta dfn, en inglés definition of term. Como su nombre lo indica, se utiliza para definir un término en el párrafo donde se está mencionando. Cuando existe la posibilidad de utilizarlo dos veces, sin embargo, con significados distintos, es necesario agregar la etiqueta dfn en cada uno.

061-01_0405_ilu04. Etiqueta definición de término

Como vemos en el siguiente documento:

• Se define el significado de HTML, mediante la etiqueta dfn, pues es la primera vez que se utiliza.
• Se especifica el significado de la abreviatura HTML, con la etiqueta abbr.
• Se muestra al usuario solo la abreviación HTML. 

Esta definición es solo un ejemplo y esta fuera de ser una regla, debido a la posibilidad de usar la etiqueta dfn sin abbr.

061-01_0405_ilu05 Ejemplo de definición de término

Keynotes

• Cuando se diseña un proyecto web, en el cual es necesario mencionar nombres largos varias veces, es más práctico escribir su abreviatura, en lugar de la definición completa. Por este motivo, se utiliza la etiqueta abbr, la cual amerita un inicio y cierre correspondiente para delimitar el texto abreviado.
• A la etiqueta, abbr, es posible añadirle de forma profesional el atributo title, para una semántica con mayor precisión.
• Aunque a la vista del usuario está oculto el significado del término es importante agregarlo, pues los motores de búsqueda de diferentes navegadores web, al momento de leer el código, sí la interpretan, con la finalidad de realizar coincidencias en la página web con la búsqueda del usuario.
• Otra forma de crear abbr es junto a la etiqueta dfn, en inglés definition of term. Como su nombre lo indica, se utiliza para definir un término en el párrafo donde se está mencionando.

Agrega a tu proyecto HTML, con nombre proyecto01, el marcado aprendido sobre abreviación y definición de términos. Deben ser dos significados referentes a la materia y seguir las reglas de la recomendación oficial de este lenguaje.

¡Comparte el resultado final de tu reto en vPages y comenta una sugerencia de mejoramiento de código a la publicación de dos compañeros!

Tiempo disponible: entre 15 y 30 minutos.

Con el marcado de abreviación y definición de términos en la creación de documentos HTML, identificamos con excelencia a nivel semántico explicaciones de conceptos, los cuales todo lector de pantalla traducirá correctamente. De esta manera, en toda creación de páginas web marcamos correctamente palabras y su significado, además, con paciencia y precisión el resultado final será óptimo.