¿Cómo marcar abreviaturas y hacerlas comprensibles en HTML?

En este artículo, aprenderemos cómo especificar una versión más corta del contenido en HTML. La etiqueta <abbr> (Abbreviation) se utiliza para definir la abreviatura o forma abreviada de un elemento. Las etiquetas <abbr> y <acronym> se usan como versiones abreviadas y se usan para representar una serie de letras. Por ejemplo, «HTML» se usa como abreviatura de «Lenguaje de marcado de hipertexto». 

Sintaxis:

<abbr title ="text">Abbreviated form</abbr>

Atributo: esta etiqueta acepta un atributo opcional como se describe a continuación:

Ejemplo: Este ejemplo ilustra el uso de la etiqueta <abbr> en HTML.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>abbr tag</title>
</head>
  
<body>
    <h2>Welcome to <abbr 
        title="GeekforGeeks">GFG</abbr>
    </h2>
</body>
  
</html>

Producción:

El uso de la etiqueta <abbr> simplemente no mostrará la expansión de la abreviatura incluso si el mouse se ha desplazado sobre ella. Esto dificulta que el usuario entienda la forma abreviada. 

Hay dos formas en las que podemos hacer que la abreviatura sea comprensible:

  • usando <abbr> con atributo de título
  • usando <abbr> con <dfn>

Entenderemos ambas formas a través de los ejemplos.

  • <abbr> con atributo de título:

Para eliminar este problema, la etiqueta <abbr> se usa en combinación con el atributo de título que proporciona una expansión para la abreviatura. El navegador proporciona este texto como información sobre herramientas cuando el puntero del mouse se ha desplazado sobre el elemento. 

Sintaxis:

<abbr title="expanded form"> abbreviated form </abbr>

Ejemplo: en este ejemplo, hemos utilizado el atributo de título dentro de la etiqueta <abbr> que especifica información adicional sobre el elemento.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>abbr tag</title>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
  
    <p>
        <abbr title="GeekforGeeks">GFG</abbr>:
        A Computer Science portal for geeks.
    </p>
</body>
  
</html>

Producción:

  • <abbr> con <dfn>: <abbr>se puede usar con <dfn> para agregar la definición de una abreviatura.

Sintaxis:

<dfn> <abbr title="Expanded form"> Abbreviated form </abbr> </dfn>

Ejemplo: Este ejemplo ilustra el uso de la etiqueta <abbr> con la etiqueta <dfn> en HTML.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>abbr with dfn</title>
</head>
  
<body>
    <h2>
        <dfn> <abbr title="Geeks For Geeks">
            GFG</abbr>
        </dfn>
        : Learn Data Structures Online At 
        Your Own Pace With The Best Of Faculty
        In The Industry.
    </h2>
</body>
  
</html>

Producción:

Estos son los métodos que podemos utilizar para marcar las abreviaturas y hacerlas comprensibles para el usuario.

Publicación traducida automáticamente

Artículo escrito por ashimasaini010 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *