Etiqueta blockquote en HTML

¿Qué es la etiqueta <blockquote> en HTML?

La etiqueta <blockquote> en HTML5 es utilizada para representar una cita en bloque. Esta cita puede ser de un libro, artículo, persona, entre otros.

La cita se mostrará en un bloque separado del texto normal, y suele estar visualmente resaltada.

Ejemplo de uso

Aquí está un ejemplo de cómo utilizar la etiqueta <blockquote>:

<blockquote>
  <p>"El éxito no es la clave de la felicidad. La felicidad es la clave del éxito."</p>
  <footer>Albert Schweitzer</footer>
</blockquote>

Lenguaje del código: HTML, XML (xml)

En el ejemplo anterior, el contenido dentro de la etiqueta <blockquote> representa la cita, y el contenido dentro de la etiqueta <footer> representa el autor de la cita.

Es importante destacar que el navegador puede darle un formato especial a la cita, como añadir un margen en ambos lados, para diferenciarla del resto del contenido. Además, también se pueden utilizar reglas de estilo CSS para personalizar el aspecto de la cita.

Atributos

La etiqueta <blockquote> en HTML5 soporta los siguientes atributos más importantes:

• cite: Especifica la URL de la fuente de la cita. Esto proporciona información sobre la fuente original de la cita y permite a los lectores verificar la información. La URL debe ser válida y accesible a través de Internet.

• datetime: Especifica la fecha y hora de la cita. Esto puede ser útil para contextuar la cita en un momento específico y para fines de citación. El formato de la fecha y hora debe ser compatible con el estándar ISO 8601.

Ejemplo

Aquí está un ejemplo de cómo utilizar estos atributos:

<blockquote cite="https://www.goodreads.com/quotes/554855-the-purpose-of-our-lives-is-to-be-happy" datetime="2022-01-01T12:00:00">
  <p>"El propósito de nuestras vidas es ser felices."</p>
  <footer>Dalai Lama XIV</footer>
</blockquote>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la URL de la fuente de la cita se especifica con el atributo cite, mientras que la fecha y hora de la cita se especifican con el atributo datetime. Esta información adicional puede ser útil para los lectores y para fines de citación.

Más ejemplos

Aquí te dejo dos ejemplos avanzados de cómo utilizar la etiqueta <blockquote> en HTML5:

Ejemplo 1:

<blockquote cite="https://www.brainyquote.com/quotes/albert_einstein_127549">
  <p>"La imagenación es más importante que el conocimiento."</p>
  <footer>Albert Einstein</footer>
</blockquote>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <blockquote> para identificar una cita de Albert Einstein. La cita se muestra como un bloque separado del texto normal y la fuente se especifica con el atributo cite.

Ejemplo 2:

<blockquote cite="https://en.wikipedia.org/wiki/Martin_Luther_King_Jr." datetime="1963-08-28T17:00:00">
  <p>"Tengo un sueño de que un día esta nación se levantará y vivirá el verdadero significado de su credo: "Somos todos iguales".</p>
  <footer>Martin Luther King Jr., Discurso "I Have a Dream"</footer>
</blockquote>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <blockquote> para identificar una cita famosa de Martin Luther King Jr. La cita se muestra como un bloque separado del texto normal, la fuente se especifica con el atributo cite, y la fecha y hora de la cita se especifican con el atributo datetime.

Esta información adicional puede ser útil para los lectores y para fines de citación.