CodeGym /Cursos /Frontend SELF ES /Etiquetas de citas

Etiquetas de citas

Frontend SELF ES
Nivel 4 , Lección 4
Disponible

4.1 Elemento <blockquote>

En HTML hay etiquetas especiales para dar formato a las citas: <blockquote>, <cite>, y <q>. Cada una de estas etiquetas tiene su propósito específico y se usa para diferentes tipos de citas y referencias a fuentes.

La etiqueta <blockquote> se usa para destacar grandes bloques de texto citado. Los navegadores usualmente muestran estas citas con un margen a la izquierda para destacarlas del texto principal.

Ejemplo de uso:

HTML
    
      <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

Características:

  • Es un elemento de bloque
  • A menudo se muestra con un margen a la izquierda
  • Puede contener otros elementos de bloque y en línea
  • Puede usar el atributo cite para indicar la URL de la fuente de la cita

Atributo cite:

El atributo cite en la etiqueta <blockquote> se usa para indicar la fuente de la cita. Aunque este atributo no se muestra visualmente, ayuda a mantener la información sobre el origen de la cita, lo que es útil para los motores de búsqueda y otros sistemas automáticos de procesamiento de texto.

Ejemplo con el atributo cite:

HTML
    
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

4.2 Elemento <cite>

La etiqueta <cite> se utiliza para indicar la fuente de una cita o el título de una obra, como un libro, artículo, película, etc. El texto dentro de la etiqueta <cite> usualmente se muestra en cursiva.

Ejemplo de uso:

HTML
    
      <p>Fuente de la cita: <cite>Franklin D. Roosevelt</cite></p>
    
  

Características:

  • Es un elemento en línea
  • Usualmente se muestra en cursiva
  • Se usa para indicar fuentes de citas o títulos de obras

Ejemplo con <blockquote> y <cite>:

HTML
    
      <blockquote  cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

4.3 Elemento <q>

La etiqueta <q> se usa para destacar citas cortas, integradas en el texto. Los navegadores añaden automáticamente comillas alrededor del texto encerrado en la etiqueta <q>.

Ejemplo de uso:

HTML
    
      <p>Como dijo Albert Einstein, <q>La imaginación es más importante que el conocimiento</q>.</p>
    
  

Características:

  • Es un elemento en línea
  • Añade automáticamente comillas alrededor de la cita
  • Se usa para citas cortas integradas en el texto principal

Atributo cite para <q>:

El atributo cite en la etiqueta <q> también se usa para indicar la URL de la fuente de la cita.

Ejemplo con el atributo cite:

HTML
    
      <p>Como dijo Albert Einstein, <q cite="https://example.com/einstein-quote">La imaginación es más importante que el conocimiento</q>.</p>
    
  

Uso combinado de etiquetas de citas

Estas etiquetas se pueden usar juntas para crear contenido más estructurado e informativo.

HTML
    
      <h1>Ejemplo de uso de etiquetas de citas</h1>
      <p>
        Como dijo Albert Einstein, <q cite="https://example.com/einstein-quote">La imaginación es más importante que el conocimiento</q>.
      </p>
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

Las etiquetas <blockquote>, <cite>, y <q> son importantes para el correcto formato de citas en HTML. Estas etiquetas soportan tanto el resaltado visual de citas como su significado semántico, lo cual es importante para los motores de búsqueda y sistemas automáticos de procesamiento de texto.

Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION