Etiqueta q en HTML: citas breves dentro de una frase

La etiqueta <q> representa una cita de otra fuente dentro del texto. Sirve para reproducir las palabras de alguien como parte de una frase, por ejemplo, al comentar una conversación. Úsala para una cita integrada en un párrafo; para un pasaje independiente de varios párrafos, elige <blockquote>. El HTML Living Standard define q con ese significado.

Ejemplo mínimo de q

Esta instructora y sus palabras son ficticias:

<p>La instructora dijo: <q>Practica con ejemplos pequeños</q>.</p>

Verás una sola frase dentro del párrafo. El navegador normalmente añade comillas alrededor de «Practica con ejemplos pequeños»; su forma depende del idioma y los estilos. No escribas otras comillas alrededor de <q>.

Para probarlo, sustituye el contenido del <body> del documento completo de abajo por este fragmento. Si retiras <q> y </q>, las palabras permanecen, pero dejan de estar marcadas como cita y desaparecen las comillas generadas. Cambiar el texto modifica la cita; en una publicación debe seguir correspondiendo a su fuente.

Sintaxis y contexto válido

Escribe las dos etiquetas: <q> y </q>. Ninguna se puede omitir. El elemento va donde se admite contenido de frase, como dentro de un párrafo con p. También contiene contenido de frase: texto, énfasis, enlaces u otro <q>. No encierres elementos <p>, listas o encabezados dentro de él. Estas restricciones aparecen en el modelo de contenido de q.

Q, comillas escritas y blockquote

Marcar una cita con <q> es opcional: también puedes escribir una cita con comillas directamente. Elige una sola técnica para delimitarla. En cambio, unas comillas que indican ironía o mencionan una palabra no justifican usar <q>, porque no reproducen palabras de otra fuente.

Por ejemplo, en Este arreglo es “perfecto” las comillas pueden expresar ironía; no conviertas automáticamente «perfecto» en una cita. Una frase auténticamente citada sí corresponde a <q>, aunque la fuente sea un personaje ficticio identificado como tal.

La elección entre <q> y <blockquote> depende de cómo se integra el pasaje, sin un límite fijo de palabras. La guía de blockquote explica las citas en bloque. Cambiar la sangría o el tamaño de letra no cambia el significado del elemento.

Ejemplo práctico: conversación ficticia y fuente visible

Guarda este documento en UTF-8 como conversacion.html y ábrelo en el navegador. Los personajes y sus intervenciones son originales y ficticios. La fuente se incluye en la misma página; no necesitas un servidor, archivos adicionales ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Citas de una conversación ficticia</title>
  </head>
  <body>
    <h1>Aprender con una página sencilla</h1>
    <p>Lucía, Tomás y esta conversación son ficticios.</p>

    <h2>Citas dentro del comentario</h2>
    <p>Lucía explicó:
      <q cite="#conversacion">Prefiero empezar por una página sencilla</q>.</p>
    <p>Tomás recordó su consejo:
      <q cite="#conversacion">Lucía me aconsejó:
        <q>Revisa un cambio cada vez</q></q>.</p>
    <p>Fuente: <a href="#conversacion">conversación ficticia completa</a>.</p>

    <h2>Un pasaje de dos párrafos</h2>
    <blockquote cite="#conversacion">
      <p>Prefiero empezar por una página sencilla. Así puedo comprobar
        el resultado antes de añadir más partes.</p>
      <p>Revisa un cambio cada vez.</p>
    </blockquote>
    <p>Lucía, en la conversación ficticia reproducida abajo.</p>

    <section id="conversacion">
      <h2>Conversación ficticia completa</h2>
      <p><strong>Lucía:</strong> Prefiero empezar por una página sencilla.
        Así puedo comprobar el resultado antes de añadir más partes.</p>
      <p><strong>Lucía:</strong> Revisa un cambio cada vez.</p>
      <p><strong>Tomás:</strong> Lucía me aconsejó:
        <q>Revisa un cambio cada vez</q>.</p>
    </section>
  </body>
</html>

Primero aparecen dos citas dentro de frases, con los nombres de quienes hablan en texto visible. La segunda contiene otra cita. Después verás los dos párrafos de Lucía en un bloque, normalmente con márgenes, y su atribución fuera de <blockquote>. Finalmente aparece la conversación que permite comprobar las palabras.

Pulsa Tab hasta el enlace de la fuente y Enter para saltar a la conversación. Quitar los atributos cite no cambia el texto, las comillas ni ese enlace: solo elimina la información de procedencia del marcado. Sustituir el <q> exterior por <span> elimina ese nivel de cita y sus comillas; el <q> interior sigue siendo una cita. No sustituyas el <blockquote> por <q> conservando sus párrafos, porque ese contenido no está permitido.

Comillas, idioma y citas anidadas

Una cita dentro de otra se escribe anidando los elementos, como en la intervención de Tomás. Los signos generados pueden variar con la profundidad. El atributo global lang declara el idioma, heredado del documento si no lo cambias. Estas dos frases también son ficticias:

<p lang="en">Lucía said: <q>Start with one page</q>.</p>
<p lang="fr">Lucía a dit : <q>Commence par une page</q>.</p>

El idioma puede afectar las convenciones de comillas; no traduce las palabras. Compara los resultados en tu navegador. Para fijar una presentación editorial puedes añadir estas reglas en un <style> dentro del <head> del documento de prueba:

q:lang(es) {
  quotes: "«" "»" "“" "”";
}

q:lang(en) {
  quotes: "“" "”" "‘" "’";
}

Cada pareja indica apertura y cierre: la primera corresponde al nivel exterior y la segunda al interior. Con la regla española, la intervención de Tomás queda delimitada por «… “…”». La propiedad CSS quotes controla esos signos; no es un atributo HTML. El navegador los genera normalmente mediante ::before y ::after, según las reglas de representación de HTML.

Retira esas reglas para volver al estilo del navegador. <q> conserva su significado sin ese CSS. Si no aparecen comillas, revisa quotes: none y las reglas content de ambos pseudoelementos antes de añadir signos manuales.

Atributos y accesibilidad

• cite es el atributo específico y opcional para una URL válida de la fuente. Admite una dirección relativa, como #conversacion; no debe contener simplemente el nombre del autor. No genera una atribución ni un enlace visible.
• lang, id y class son atributos globales: declaran idioma, identifican el elemento y permiten seleccionarlo, respectivamente.
• quotes es una propiedad CSS. La propiedad DOM cite de HTMLQuoteElement permite consultar o cambiar la URL con JavaScript; los ejemplos no la necesitan.

Consulta el atributo cite en el estándar y su interfaz DOM.

Escribe quién habla y ofrece la fuente en texto visible. La comprensión no debe depender de que un lector de pantalla anuncie las comillas, el elemento o cite: ese anuncio puede variar. <q> no necesita foco ni un rol añadido; el enlace a la fuente sí permite navegar con teclado. Las reglas de ARIA en HTML para q describen su semántica accesible. Todo el contenido del ejemplo sigue disponible sin JavaScript.

Preguntas y errores frecuentes

¿Tengo que escribir las comillas?

Normalmente no: <q> las genera según idioma y CSS. Añadirlas dentro o junto al elemento duplica la delimitación. Si eliges comillas escritas para una cita, prescinde de <q>.

¿Q tiene un atributo para la fuente?

Sí, cite admite su URL, pero la atribución visible se redacta aparte. El elemento <cite> tiene otra función: marca el título de una obra, no el nombre de una persona ni el texto citado. Consulta la guía de cite.

Evita también usar <q> solo para decorar palabras, inventar citas atribuidas a personas reales o publicar una URL que no contiene el pasaje. En estos ejemplos la ficción está indicada; para una cita real, comprueba las palabras y su procedencia.

Compatibilidad y fuentes

<q> tiene soporte amplio en los navegadores actuales, según la referencia y compatibilidad de MDN, consultada el 3 de octubre de 2026. Los ejemplos no requieren scripts. La forma concreta de las comillas depende del idioma y los estilos; revisa el resultado cuando tu diseño exija unos signos determinados.

Para las reglas de autoría, consulta el HTML Living Standard: q; para la presentación, la propiedad quotes de CSS. Las guías de <p>, <blockquote> y <cite> enlazadas arriba completan, respectivamente, el contexto del párrafo, la cita independiente y el título de la obra.