10- 💬 Citas en HTML: uso de blockquote

---

• Citas en HTML
• Elementos "Blockquote"
• Elemento "q" para citas breves
• Elemento "abbr" para abreviaturas
• Elemento "address" para contactos
• Elemento "cite" para trabajo
• Elemento "bdo" para dirección bidireccional
• Resume

---

Citas en HTML

Las citas en HTML permiten referenciar un contenido o frase específica de una fuente. Los elementos <blockquote> y <q> son utilizados para mostrar citas largas y breves, respectivamente.

Ejemplo

"Esta es una cita larga que está dentro de un bloque."

Esta es una cita breve dentro de un párrafo.

Código del ejemplo

<blockquote cite="https://www.example.com">
"Esta es una cita larga que está dentro de un bloque."
</blockquote>
<p><q>Esta es una cita breve dentro de un párrafo.</q></p>

---

Elementos "Blockquote"

El elemento <blockquote> se utiliza para definir una sección que se cita de otra fuente. Se puede incluir el atributo cite para referenciar la fuente de la cita.

Ejemplo

"El arte de la programación es la habilidad de solucionar problemas complejos."

Código del ejemplo

<blockquote cite="https://www.example.com">
"El arte de la programación es la habilidad de solucionar problemas complejos."
</blockquote>

---

Elemento "q" para citas breves

El elemento <q> se utiliza para definir una cita breve dentro de un párrafo. A diferencia de <blockquote>, este elemento es adecuado para citas cortas.

Ejemplo

Ella dijo: La programación es el futuro.

Código del ejemplo

<p>Ella dijo: <q>La programación es el futuro</q>.</p>

---

Elemento "abbr" para abreviaturas

El elemento <abbr> se usa para definir una abreviatura o sigla. Al pasar el cursor sobre la abreviatura, el navegador mostrará el significado completo gracias al atributo title.

Ejemplo

La ONU es una organización internacional.

Código del ejemplo

<p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr>
es
una organización internacional.</p>

---

Elemento "address" para contactos

El elemento <address> se utiliza para proporcionar información de contacto. Generalmente se usa para indicar la información de contacto del autor de un documento o página.

Ejemplo

Contacto: John Doe
Correo electrónico: johndoe@example.com
Dirección: 123 Calle Falsa, Ciudad Ficticia

Código del ejemplo

<address>
Contacto: John Doe<br>
Correo electrónico: <a
href="mailto:johndoe@example.com">johndoe@example.com</a><br>
Dirección: 123 Calle Falsa, Ciudad Ficticia
</address>

---

Elemento "cite" para trabajo

El elemento <cite> se utiliza para citar el título de una obra, como un libro, una película, un artículo, etc.

Ejemplo

El libro El Quijote es una de las obras más importantes de la literatura española.

Código del ejemplo

<p>El libro <cite>El Quijote</cite> es una de las obras más
importantes de la literatura española.</p>

---

Elemento "bdo" para dirección bidireccional

El elemento <bdo> se utiliza para anular el orden de texto predeterminado y especificar la dirección en la que se debe mostrar el texto. Este elemento es útil en contextos en los que se necesita cambiar la dirección de escritura, como en idiomas que se leen de derecha a izquierda.

Ejemplo

Este texto se muestra de derecha a izquierda.

Este texto se muestra de izquierda a derecha.

Código del ejemplo

<p><bdo dir="rtl">Este texto se muestra de derecha a
izquierda.</bdo></p>
<p><bdo dir="ltr">Este texto se muestra de izquierda a
derecha.</bdo></p>

---

Resumen

En esta entrada hemos cubierto diversos elementos HTML que permiten gestionar y dar formato a las citas, abreviaturas y direcciones de texto en una página web:

• Elemento <q>: Utilizado para citas breves dentro de un párrafo.
• Elemento <abbr>: Se usa para definir una abreviatura o sigla, mostrando su significado completo al pasar el cursor sobre ella.
• Elemento <address>: Ofrece información de contacto, como dirección, correo electrónico y otras formas de contacto.
• Elemento <cite>: Se usa para citar el título de una obra, como un libro o una película.
• Elemento <bdo>: Permite especificar la dirección de escritura del texto, ya sea de izquierda a derecha o de derecha a izquierda.

Estos elementos enriquecen el contenido y mejoran la accesibilidad y comprensión del texto en una página web.

---

Etiqueta	Descripción
<q>	Define una cita breve dentro de un párrafo.
<abbr>	Define una abreviatura o sigla, mostrando su significado completo al pasar el cursor sobre ella.
<address>	Proporciona información de contacto, como dirección, correo electrónico y otras formas de contacto.
<cite>	Cita el título de una obra, como un libro o una película.
<bdo>	Especifica la dirección de escritura del texto, ya sea de izquierda a derecha o de derecha a izquierda.
<b>	Define texto en negrita.
<em>	Define texto enfatizado.
<i>	Define una parte del texto en un tono o estilo alternativo.
<small>	Define texto más pequeño.
<strong>	Define texto importante.
<sub>	Define texto en subíndice.
<sup>	Define texto en superíndice.
<ins>	Define texto insertado.
<del>	Define texto eliminado.
<mark>	Define texto marcado/destacado.

Ir al índice