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.
RetoAgrega 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.
CierreCon 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.
