¿Qué son las etiquetas lógicas en HTML?

Posted on by Rudeus Greyrat

Las etiquetas lógicas se utilizan para decirle al navegador qué tipo de texto está escrito dentro de las etiquetas. Son diferentes de las etiquetas físicas porque las etiquetas físicas se utilizan para decidir la apariencia del texto y no brindan ninguna información sobre el texto.

Las etiquetas lógicas se utilizan para indicar a la persona con discapacidad visual que hay algo más importante en el texto o para enfatizar el texto.

Algunos casos en los que podríamos usar etiquetas lógicas son:

  • Cuando queremos escribir código en nuestro sitio web.
  • Cuando queremos enfatizar algún texto.
  • Cuando queremos mostrar la abreviatura en la página Web.
  • Cuando queremos mostrar alguna cita célebre en nuestra página web.
  • Cuando queremos escribir alguna fórmula matemática en términos de variables.

Hay muchos tipos de texto lógico aquí está la lista de algunos de ellos:

Etiqueta Descripción
<abr> Define la abreviatura del texto.
<acrónimo> Define el acrónimo.
<dirección> información de contacto de una persona u organización.
<citar> Define la cita. Muestra el texto en cursiva.
<código> Define la pieza de código de computadora.
<cita en bloque> Define una cita larga.
<del> Define el texto eliminado y se utiliza para marcar una parte del texto que se ha eliminado del documento.
<dfn> Define el elemento de definición y se utiliza para representar una instancia de definición en HTML.
<ins> Define el texto insertado.
<kbd> Define el texto de entrada del teclado.
<antes> Define el bloque de texto preformateado que conserva los espacios de texto, los saltos de línea, las tabulaciones y otros caracteres de formato que los navegadores web ignoran.
<q> Define la cita corta.
<muestra> Define el texto de salida de muestra de un programa de computadora.
<fuerte> Define texto fuerte, es decir, muestra la importancia del texto.
<var> Define la variable en una ecuación matemática o en el programa informático.

Ahora implementemos algunas etiquetas mencionadas anteriormente a través de ejemplos

1. Etiqueta <bdo>: La etiqueta <bdo> significa anulación bidireccional. Esta etiqueta se utiliza para cambiar la dirección del texto. Toma un atributo «dir» que decide la dirección del texto.

Sintaxis:

<bdo> Statements... </bdo>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>This text will go right-to-left</p>
  
    <bdo dir="rtl">GeeksforGeeks</bdo>
  
    <p>This text will go left-to-right</p>
  
    <bdo dir="ltr">GeeksforGeeks</bdo>
</body>
  
</html>

Producción:

This text will go right-to-left
skeeGfofskeeG
This text will go left-to-right
GeeksforGeeks

2. Etiqueta <del>: La etiqueta <del> dibuja una línea cortando el texto que muestra que el texto es incorrecto o eliminado.

Sintaxis:

<del>Statements... </del>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>Welcome to year <del>2020</del> 2021</p>
</body>
  
</html>

Producción:

3. Etiqueta <ins>:  La etiqueta <ins> se utiliza para mostrar que se insertó algún texto en el documento. Los navegadores normalmente mostrarán las etiquetas insertadas subrayadas.

Sintaxis: 

<ins>Statements... </ins>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>price of this shoe is 
        <del>1000</del><ins>850</ins>
    </p>
</body>
  
</html>

Producción:

4. Etiqueta <strong> : La etiqueta <strong> se usa para decirle al navegador que el texto dentro de esta etiqueta es de gran importancia y significado. El navegador muestra este texto en negrita.

Sintaxis:

 <strong>Statements...  </strong>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>This is
        <strong>bolded (important)</strong> text.
    </p>
</body>
  
</html>

Producción:

5. Etiqueta <código>:   La etiqueta de código se usa para decirle al usuario que el texto escrito dentro de esta etiqueta es un código de algún lenguaje de programación. El contenido dentro de esta etiqueta se muestra en fuente monoespaciada.

Sintaxis: 

<code>Statements... </code>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>This is <code>your code</code></p>
</body>
  
</html>

Producción:

6. Etiqueta <kbd>: La etiqueta <kbd> se usa para indicar que el texto que se muestra se ingresa desde el teclado. El contenido interior se muestra en una fuente monoespaciada.

Sintaxis: 

<KBD>Statements... </KBD>

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>
        Press <kbd>Ctrl</kbd> + 
        <kbd>C</kbd> To copy text
    </p>
</body>
  
</html>

Producción:

  • 7. Etiqueta <pre> :  el texto en una etiqueta pre se muestra en una fuente de ancho fijo y conserva todos los espacios y líneas de corte, es decir, el texto se muestra exactamente como se escribió en el código fuente HTML.

    Sintaxis: 

    <pre>Statements...  </pre>

    HTML

    <!DOCTYPE html>
    <html>
      
    <body>
        <pre> Welcome     to geeks   for
              geeks
           this   is
           pre     tag
      </pre>
    </body>
      
    </html>

    Producción:

    Ejemplo de código con etiquetas lógicas: este ejemplo contiene todas las etiquetas lógicas.

    HTML

    <!DOCTYPE html>
    <html>
      
    <body>
        <h1>Logical Tags</h1>
      
        <!-- abbr tag -->
        Welcome to <abbr title="GeeksforGeeks">
            GFG
        </abbr>
        <br />
      
        <!-- acronym tag -->
        This is <acronym title="GeeksforGeeks">
            GFG
        </acronym>
        <br />
      
        <!-- address tag -->
        <address>
            GeeksforGeeks, 5th & 6th Floor,
            Royal Kapsons, A- 118, Sector- 136, 
            Noida, Uttar Pradesh (201305)
        </address>
        <br />
      
        <!-- cite tag -->
        <cite> GeeksforGeeks </cite> is 
            my favourite website.
        <br />
      
        <!-- code tag -->
        <code> 
            Sample code: system.out.println();
        </code>
      
        <!-- blockquote tag -->
        <blockquote cite=
            "https://www.geeksforgeeks.org/">
            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            and quizzes.
        </blockquote>
      
        <!-- del tag -->
        <del> This contains deleted content.</del>
      
        <!-- ins tag -->
        <ins> Newly inserted content.</ins>
      
        <!-- dfn tag -->
        <p>
            <dfn> GeeksforGeeks </dfn> is a 
            Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            and quizzes.
        </p>
      
        <!-- kbd tag -->
        <kbd> 
            GeeksforGeeks - This is 
            a Keyboard input 
        </kbd>
      
        <!-- pre tag -->
        <pre>
        Dear User,
       
        Congratulations !!
       
        We are delighted to inform you that 
        you are going to be part of GfG journey.
       
        Thanks,
        GfG Team
       
    This is a predefine formatted text
        </pre>
    </body>
      
    </html>

    Producción:

Publicación traducida automáticamente

Artículo escrito por astitvajain2051 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 *