Etiqueta q en HTML
¿Qué es la etiqueta <q> en HTML?
La etiqueta HTML <q> es una etiqueta de formato de texto que se utiliza para indicar una cita corta o un fragmento de texto citado dentro de un párrafo. Cuando se usa la etiqueta <q>, el texto dentro de ella se mostrará con comillas dobles ( » » ) en la mayoría de los navegadores web.
La etiqueta <q> se utiliza comúnmente para citar fragmentos de texto dentro de un párrafo o una sección de una página web. Es especialmente útil para citar el texto de otra fuente, como un libro, un artículo o un discurso.
Es importante tener en cuenta que la etiqueta <q> se utiliza para citas cortas, generalmente de una o dos frases. Para citas más largas, se recomienda utilizar la etiqueta <blockquote>.
La etiqueta <q> es una de las etiquetas de HTML5 y es compatible con la mayoría de los navegadores modernos. Sin embargo, algunos navegadores más antiguos pueden no reconocerla o no mostrarla correctamente.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <q> en HTML5:
<p>Según el proverbio, <q>la práctica hace al maestro</q>.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <q> para indicar una cita corta en una oración que indica que la práctica es importante para perfeccionar una habilidad. El texto citado “la práctica hace al maestro” se ha resaltado utilizando la etiqueta <q>.
Atributos
La etiqueta HTML <q> no admite muchos atributos, ya que se utiliza principalmente para indicar una cita corta en una página web.
Los atributos principales que admite son los siguientes:
- cite: este atributo se utiliza para especificar la fuente de la cita. Puede contener una URL que enlace a la fuente de la cita o una referencia a un recurso bibliográfico.
- class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <q> y para agrupar varias etiquetas con el mismo estilo.
- id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <q> también admite otros atributos opcionales, como “title”, que se utiliza para proporcionar información adicional sobre la cita.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “cite” en la etiqueta <q>:
<p>Según el poeta William Wordsworth, <q cite="https://www.poetryfoundation.org/poems/45521/the-world-is-too-much-with-us">el mundo es demasiado con nosotros</q>.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <q> para indicar una cita corta de un poema de William Wordsworth. Hemos utilizado el atributo “cite” para especificar la fuente de la cita, que es una URL que enlaza a la página del poema en el sitio web Poetry Foundation.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <q> de HTML5:
Ejemplo 1: Utilizando la etiqueta <q> para indicar una cita corta y especificar la fuente con el atributo “cite”.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q</title>
</head>
<body>
<p>El físico Albert Einstein dijo una vez: <q cite="https://www.goodreads.com/quotes/10684-creativity-is-contagious-pass-it-on">La creatividad es contagiosa, pásala.</q></p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <q> para indicar una cita corta del físico Albert Einstein. Hemos utilizado el atributo “cite” para especificar la fuente de la cita, que es una URL que enlaza a la página del libro de citas en el sitio web Goodreads.
Ejemplo 2: Utilizando la etiqueta <q> dentro de la etiqueta <cite> para indicar una cita corta y su origen.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q dentro de cite</title>
</head>
<body>
<p>El autor F. Scott Fitzgerald escribió en su novela <cite>The Great Gatsby</cite>: <q>La vida comienza de nuevo cuando se pone caliente en otoño.</q></p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <q> dentro de la etiqueta <cite> para indicar una cita corta del autor F. Scott Fitzgerald. Hemos utilizado la etiqueta <cite> para indicar que la cita proviene de su novela “El Gran Gatsby”.
Ejemplo 3: Utilizando la etiqueta <q> dentro de la etiqueta <p> y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q con estilos personalizados</title>
<style>
.cita {
font-style: italic;
color: gray;
border-left: 3px solid blue;
padding-left: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<p>El escritor Paulo Coelho dijo: <q class="cita">La felicidad es algo que se multiplica cuando se divide.</q></p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <q> dentro de la etiqueta <p> para indicar una cita corta del escritor Paulo Coelho. Hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta <q>.
En la regla CSS definida, hemos aplicado un estilo de fuente cursiva y un color gris al texto citado. También hemos agregado un borde azul a la izquierda del texto, un margen izquierdo de 20 píxeles y un relleno izquierdo de 10 píxeles para dar un estilo personalizado a la cita.