Etiqueta HTML <q>
La etiqueta <q> es un elemento en línea que define citas cortas. Descripción, atributos y ejemplos de uso.
La etiqueta <q> es un elemento en línea que se utiliza para citas cortas que encajan dentro del flujo de una oración y no abarcan varias líneas. La característica principal de <q> es que los navegadores añaden automáticamente comillas alrededor del contenido — no debes escribir las comillas tú mismo.
Para citas más largas e independientes que forman su propio párrafo, utiliza el elemento de bloque <blockquote> en su lugar.
Esta página explica cuándo usar <q>, en qué se diferencia de <blockquote>, el atributo cite y la forma específica de <q> para personalizar las comillas insertadas con la propiedad CSS quotes.
Sintaxis
La etiqueta <q> va en pares. El contenido se escribe entre las etiquetas de apertura (<q>) y cierre (</q>).
Ejemplo de la etiqueta HTML <q>:
Etiqueta HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Resultado
<q> vs <blockquote>
Ambos elementos marcan material citado, pero sirven para propósitos distintos:
<q> | <blockquote> | |
|---|---|---|
| Visualización | En línea — fluye dentro de una oración | Nivel de bloque — bloque sangrado propio |
| Longitud | Citas cortas | Citas más largas e independientes |
| Comillas | El navegador las inserta automáticamente | No se añaden; las proporcionas tú si es necesario |
Atributo cite | Compatible (URL de la fuente) | Compatible (URL de la fuente) |
Usa <q> cuando la cita se encuentre dentro de texto continuo, y <blockquote> cuando aparezca de forma independiente. No escribas comillas dentro de <q> — el navegador las proporciona, de modo que hacerlo produciría comillas dobles.
Ejemplo usando tanto <q> como <blockquote>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>As the proverb goes, <q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q></p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
"We're all mad here. I'm mad. You're mad," said the Cheshire Cat.
</blockquote>
</body>
</html>Observa que el texto de <q> aparece con comillas añadidas por el navegador, mientras que el texto de <blockquote> se presenta como un bloque sangrado sin comillas.
El atributo cite vs el elemento <cite>
Dos características con nombres similares pueden causar confusión:
- El atributo
cite(<q cite="...">) contiene una URL legible por máquina que apunta a la fuente de la cita. No se muestra en el navegador — existe para motores de búsqueda, lectores de pantalla y scripts. - El elemento
<cite>es texto visible que se usa para marcar el título de una obra referenciada (un libro, canción, película o artículo). Se muestra en cursiva por defecto.
Puedes usar ambos juntos — el atributo cite para la referencia legible por máquina, y un elemento <cite> visible para la referencia legible por humanos:
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Comillas automáticas
Las marcas alrededor del contenido de <q> no forman parte del HTML — los navegadores las añaden con CSS, utilizando los pseudoelementos ::before y ::after junto con los valores content: open-quote y content: close-quote. La hoja de estilos predeterminada del agente de usuario luce aproximadamente así:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Cambiar las marcas con la propiedad CSS quotes
Dado que las marcas provienen de open-quote/close-quote, la forma específica de <q> para personalizarlas es la propiedad CSS quotes. Te permite definir qué caracteres utilizar sin modificar el HTML:
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Para eliminar las marcas por completo, establece quotes: none.
Elementos <q> anidados
Cuando anidas un <q> dentro de otro, los navegadores alternan automáticamente entre los estilos de comillas externas e internas (por ejemplo, comillas dobles en el exterior y simples en el interior). La propiedad quotes acepta un segundo par de cadenas para el nivel anidado:
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>El primer par ('"' '"') da estilo al nivel externo, y el segundo par ("'" "'") al nivel anidado.
El atributo lang y las marcas específicas según el idioma
Las comillas varían según el idioma — el inglés usa "…", el francés usa «… », el alemán usa „…". Los navegadores eligen las marcas correctas según el idioma del elemento, por lo que establecer el atributo lang en <q> (o en un ancestro) produce automáticamente comillas apropiadas para el idioma:
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>En un contexto francés el navegador muestra guillemets («… »), y en un contexto alemán las marcas bajas-altas („…").
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| cite | URL | Una URL legible por máquina que apunta a la fuente de la cita. No se muestra al usuario. |
| lang | language-code | Especifica el idioma del contenido, lo que determina las comillas específicas según el idioma. |
La etiqueta <q> también admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a una etiqueta HTML <q>
Dado que las comillas son generadas por open-quote/close-quote, el control de estilo más específico de <q> es la propiedad CSS quotes:
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>