La Etiqueta Q

Se utiliza para marcar citas cortas dentro de un texto. Es una etiqueta inline que agrega automáticamente comillas al contenido y mejora la semántica del documento.

La etiqueta <q> en HTML (abreviatura de "quotation") se utiliza para marcar citas cortas dentro de un texto. A diferencia de <blockquote> (para citas largas), <q> es una etiqueta inline que agrega automáticamente comillas al contenido y mejora la semántica del documento. Aquí aprenderás a usarla correctamente.

Sintaxis básica

La estructura básica es:

<q>Texto citado aquí</q>

Ejemplo:

<p>
   Como dijo Albert Einstein: <q>La imaginación es más importante que el conocimiento</q>.
</p>

Resultado:

Como dijo Albert Einstein: La imaginación es más importante que el conocimiento.

El navegador agregará comillas automáticamente (ejemplo: “...” en español).

Atributo cite

Puedes incluir un atributo cite para indicar la fuente de la cita (URL o referencia). Sin embargo, este atributo no se muestra visualmente:

<q cite="https://frasescelebres.pro/einstein">
  La imaginación es más importante que el conocimiento
</q>

Resultado:

La imaginación es más importante que el conocimiento

Para mostrar la fuente, debes añadirla manualmente:

<q>La imaginación es más importante que el conocimiento</q> 
(<a href="https://frasescelebres.pro/einstein">Fuente</a>).

Resultado:

La imaginación es más importante que el conocimiento (Fuente).

Personalización con CSS

Cambiar las comillas

Usa la propiedad quotes para definir símbolos personalizados:

q.comillas-francesas {
  quotes: "«" "»" "‹" "›"; /* Comillas francesas */
}

Resultado:

Como dijo Einstein: La imaginación es más importante que el conocimiento.

Estilo adicional

q {
  font-style: italic;
  color: #2c3e50;
}

Diferencias entre <q> y <blockquote>

<q> <blockquote>
Para citas cortas (inline). Para citas largas (en bloque).
Añade comillas automáticamente. Requiere CSS para sangría o estilo.
Uso: dentro de párrafos. Uso: como elemento independiente.

Ejemplo de <blockquote>:

<blockquote cite="https://ejemplo.com/fuente">
   <p>Esto es una cita larga que ocupa un bloque completo.</p>
</blockquote>

Accesibilidad y buenas prácticas

Semántica: Ayuda a los lectores de pantalla a identificar citas.

Idioma: Las comillas dependen del atributo lang del documento. Ejemplo:

<html lang="es"> <!-- Comillas latinas (“...”) -->  
<html lang="de"> <!-- Comillas alemanas („...“) -->

No abuses: Usa <q> solo para citas textuales, no para resaltar texto aleatorio.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    q {
      quotes: "“" "”"; /* Comillas inglesas */
      color: #3498db;
      font-style: italic;
    }
    .fuente {
      font-size: 0.9em;
      color: #7f8c8d;
    }
  </style>
</head>
<body>
  <p>
    Según Carl Sagan: <q cite="https://frasescelebres.pro/sagan">En algún sitio, algo increíble espera ser descubierto</q>. 
    <span class="fuente">(Fuente: <a href="https://frasescelebres.pro/sagan">Frases de Sagan</a>)</span>
  </p>
</body>
</html>

Casos de uso comunes

Citas en artículos:

<p>El poeta escribió: <q>El tiempo es una ilusión</q>.</p>

Diálogos en narrativa:

<p>María exclamó: <q>¡No puedo creerlo!</q></p>

Referencias académicas:

<p>Según el estudio: <q>El 80% de los casos muestran mejoría</q> <sup>[1]</sup>.</p>

Conclusión

La etiqueta <q> es una herramienta sencilla pero poderosa para integrar citas cortas en tus documentos HTML. Al usarla, garantizas un código semántico, accesible y adaptable a diferentes idiomas. ¡Incorpórala en tus proyectos para darle profesionalismo a tus textos!