Elemento HTML q: citas breves, fuentes cite y comillas

El elemento q de HTML marca una cita corta dentro de una oración. Los navegadores suelen agregar comillas automáticamente, y el atributo cite puede registrar la URL de la fuente. Ese atributo no crea un enlace de fuente clicable, por lo que se debe proporcionar un enlace separado en el texto cuando los lectores lo necesiten.

Cómo difieren q, blockquote y cite

Utilice q al citar palabras de otra fuente dentro del flujo de una oración. Para una cita separada que contenga varios párrafos, use una cita en bloque con blockquote . No use q únicamente para resaltar una palabra o agregar comillas irónicas.

Un ejemplo completo con una fuente y una cita anidada

Guarde el código completo a continuación como inline-quote.html y ábralo en un navegador. La primera cita es una frase corta del Estándar HTML. La segunda es un diálogo ficticio escrito para demostrar comillas anidadas. No se requiere servidor ni JavaScript.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q y las fuentes de las citas</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Citas breves y fuentes</h1>
  <p>El estándar HTML describe el contenido que representa q como <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Fuente: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Diálogo ficticio: el estudiante dijo: <q>El aviso dice <q>Por favor, cierra la puerta</q></q>.</p></body>
</html>

La primera cita permanece en el mismo párrafo que la explicación que la rodea y está encerrada entre comillas. En el diálogo ficticio, las comillas dobles rodean la cita exterior y las comillas simples rodean la cita interior. El título de la fuente enlazada aparece en su propio párrafo; la dirección en el atributo cite de q no se muestra automáticamente.

Evite añadir comillas duplicadas

Si escribe comillas inmediatamente antes, después o dentro de q para rodear la misma cita, pueden duplicar la puntuación generada por el navegador. El ejemplo pone solo las palabras citadas dentro de q y deja las comillas al navegador. También puede escribir comillas manualmente en texto sin formato sin q, pero no combine ambos conjuntos de comillas para la misma cita.

Las marcas predeterminadas pueden variar según el idioma del documento o elemento y los estilos del navegador. La regla CSS quotes del ejemplo establece explícitamente los pares externos e internos para que pueda comparar los resultados claramente. Elimine esa regla para comparar los valores predeterminados y luego restáurela. Cambiar la apariencia no elimina el significado del elemento q como cita.

Haga que la fuente esté disponible para los lectores

El atributo cite es opcional. Utilice una dirección que proporcione el pasaje original o su contexto, en lugar de una página de inicio no relacionada. Si los lectores necesitan leer el original, también proporcione un elemento a con un texto de enlace específico, como en el ejemplo. Copie con precisión la redacción verificada y distinga la cita de su propia explicación.

No asuma que todos los lectores de pantalla anuncian el inicio y el final de una cita q de la misma manera. Cuando la atribución sea importante, indique quién dijo qué en la propia oración, por ejemplo, «El estándar describe …». Para las definiciones y condiciones de uso, consulte la definición de q en el estándar HTML y la referencia de q en MDN.