¿Cómo agregar citas y menciones a las páginas web usando HTML?

En este artículo, veremos cómo agregar citas y citas a las páginas web usando HTML. Cuando estamos creando un sitio web o un blog, nos enfrentamos a muchas situaciones en las que queremos resaltar un texto determinado. Podemos usar HTML para hacer lo mismo. HTML nos proporciona muchas etiquetas como <blockquote>, <q>, <abbr> y <cite> para realizar diferentes tipos de resaltado de texto. 

1. Etiqueta <blockquote> : La etiqueta <blockquote> en HTML se usa para mostrar citas largas, es decir, define una sección dentro de un documento que se cita de otra fuente. Es un elemento a nivel de bloque y se usa generalmente para citas largas. 

Sintaxis:

<blockquote> Contents... </blockquote>

Ejemplo: es un ejemplo simple para mostrar el uso de la etiqueta <blockquote> .

HTML

<!DOCTYPE html>
<html>
  
<body>
  
    <p>
        This text is inside normal paragraph tag.
    </p>
  
    <!--Blockquote starts -->
    <blockquote>
        This text is inside blockquote tag
    </blockquote>
    <!--Blockquote ends -->
  
    <p>
        This text is again inside paragraph 
        tag, but after the blockquote tag.
    </p>
</body>
  
</html>

Producción:

blockquote tag example

2. Etiqueta <q> : La etiqueta <q> en HTML se usa para citas cortas. Los navegadores representan el texto escrito dentro de esta etiqueta entre comillas. Es un elemento en línea.

Sintaxis:

<q> Contents... </q>

Ejemplo: Es un ejemplo simple para mostrar el uso de la etiqueta <q>.

HTML

<!DOCTYPE html>
<html>
  
<body>
  
    <p>
        This text is inside normal paragraph tag.
  
        <!--q starts -->
        <q>This text is inside <q> tag</q>
        <!--q ends -->
          
        This text is again inside paragraph 
        tag, but after the <q> tag.
    </p>
</body>
  
</html>

Producción:

q tag example

3. Etiqueta <abbr> : La etiqueta <abbr> en HTML se usa para definir la abreviatura de un elemento. Esta es una etiqueta muy útil que brinda información útil a los navegadores, motores de búsqueda, etc. Esta etiqueta toma un título de atributo que tiene la forma completa o la información real del texto abreviado. Esta etiqueta es una etiqueta en línea.

Sintaxis:

<abbr> Contents... </abbr>

Ejemplo: Es un ejemplo para mostrar el uso de la etiqueta <abbr>.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>
        <abbr title="GeeksForGeeks"> GFG </abbr>
        is the best website for computer 
        science students!
    </p>
</body>
  
</html>

Producción:

abbr tag example

Nota: si pasamos el cursor sobre el texto abreviado, obtendremos la información escrita en el atributo de título como información sobre herramientas.

4. Etiqueta <cite> : La etiqueta <cite> en HTML se utiliza para definir el título de una obra. Muestra el texto en formato cursiva . Esta etiqueta también está en línea.

Sintaxis:

<cite> Contents... </cite>

Ejemplo: Es un ejemplo para mostrar los usos de la etiqueta <cite>.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>
        This Book was written by 
        <cite>GeeksForGeeks</cite> in 2021.
    </p>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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