Citas HTML

Ya marcó importancia y énfasis con etiquetas de formato. Las citas son distintas: está repitiendo palabras de otra persona (o un pasaje de una obra), y HTML debe decirlo con claridad. Los elementos dedicados a citas ayudan a los navegadores, a las herramientas de asistencia y a los lectores a distinguir una cita de su propia prosa — algo que las comillas decorativas por sí solas no comunican del todo. Cuando el significado vive en la etiqueta correcta, el contenido sigue siendo claro para personas y máquinas, aunque más adelante cambie el aspecto visual.

¿Qué cuenta como cita en HTML?

Una cita es texto que presenta como procedente de otro hablante, escritor o fuente. Puede ser una frase corta dentro de su oración o un pasaje más largo separado como bloque propio. HTML ofrece q para el caso corto en línea y blockquote para el caso de bloque más largo. Herramientas extra ayudan con las fuentes: el elemento cite para un título de obra visible y un atributo cite en blockquote para una URL de origen legible por máquinas. El objetivo no es solo embellecer la página, sino declarar con honestidad que esas palabras se atribuyen a una fuente externa y no son su formulación libre en ese momento.

Respuesta directa

Use q para una cita corta dentro de una frase. Use blockquote para una sección citada más larga que se sostiene sola. Nombre la obra o el artículo con el elemento cite en texto visible cuando ayude a los lectores. En blockquote también puede poner cite="https://…" hacia una URL de origen — esa URL es para máquinas y no suele mostrarse sola como título legible. En resumen: elija la etiqueta según la longitud y la posición de la cita, y complete la atribución visible cuando haga falta para que la fuente no quede oculta solo en un atributo que el visitante no ve.

Herramientas de cita de un vistazo

Citas cortas en línea con q

Cuando las palabras citadas van dentro de su propia frase, envuélvalas en q. La mayoría de los navegadores añaden comillas por usted. Sigue escribiendo las palabras habladas o escritas entre las etiquetas; normalmente no escribe a mano comillas tipográficas. Esta etiqueta encaja con una frase citada breve o un dicho conocido dentro de su narración, no con un artículo entero copiado. Si la cita se extiende a varias oraciones independientes, piense en blockquote en lugar de apilar varios q sin necesidad.

Lectura del ejemplo

• El p exterior es su narración
• q envuelve solo la frase citada
• Al cerrar q, el resto de la oración vuelve a prosa normal
• Si fuera un extracto largo de varias oraciones, blockquote encajaría mejor
• Observe que el significado «estas son palabras citadas» está en la etiqueta, no solo en el estilo tipográfico

Pasajes más largos con blockquote

Use blockquote cuando la cita sea lo bastante larga para formar su propio bloque — a menudo uno o más párrafos. Ponga el contenido citado dentro del blockquote. Un atributo cite puede guardar la URL de origen. Escriba un título de obra legible para personas con el elemento cite en texto visible, normalmente cerca de la cita. Muchos sitios sangran blockquote por defecto; esa sangría es solo presentación. No use la etiqueta solo para «desplazar texto» si no está citando de verdad.

Por qué el atributo cite solo no basta

El atributo cite ayuda a las herramientas y a algunos programas de revisión a conocer la URL de origen. Muchos visitantes nunca ven los valores de atributos. Ofrezca también a las personas una línea de crédito legible. Combinar el atributo (para máquinas) y el título visible con el elemento cite (para personas) cubre ambas necesidades sin mezclar roles. Un título solo en el párrafo sin URL puede bastar a los lectores; una URL sin título visible suele dejar a las personas sin la atribución que necesitan.

Elegir q frente a blockquote

Hágase dos preguntas: ¿cuánto dura la cita? ¿Interrumpe una frase o se sostiene sola?

• Frase corta dentro de su oración → q
• Pasaje más largo como bloque propio → blockquote
• Título de un libro, artículo o sitio en texto corrido → elemento cite
• URL de la fuente para una cita en bloque → atributo cite en blockquote
  No envuelva una página entera en un blockquote gigante solo para sangrar texto. La sangría es presentación; blockquote es para citas reales. Si mezcla ambos usos, confunde a lectores y herramientas de asistencia, y la página puede parecer «toda citada» aunque la mayor parte sea su propia prosa. Mantenga longitud y posición como criterios simples, y añada la atribución visible cuando haga falta.

Significado frente a comillas solo con CSS

Puede fingir marcas con CSS o con caracteres " tecleados. Para una cita verdadera, prefiera q o blockquote para que el documento marque el significado. Las marcas visuales aún pueden aparecer — los navegadores suelen estilizar q con comillas —, pero el elemento conserva el rol aunque una hoja de estilo cambie el aspecto más adelante. La decoración sola puede desaparecer o variar entre dispositivos; el rol semántico en HTML permanece más claro y estable para la lectura automática y la accesibilidad.

Práctica en su editor

1. Escriba un párrafo que incluya una cita corta con q de un entrenador o profesor imaginario.
2. Añada un blockquote con dos oraciones cortas de un artículo imaginario.
3. Debajo, una línea que use cite para nombrar el título del artículo.
4. Opcionalmente ponga cite="https://example.com/article" en el blockquote.
5. Guarde y abra la página. Compruebe que la cita en línea y la de bloque se ven distintas.
6. Sustituya temporalmente q por texto plano y comillas tecleadas, luego vuelva a poner q — note cómo el rol del marcado difiere de la decoración sola.
   Repita el ejercicio con distintos títulos de fuente hasta que distinguir elemento y atributo sea automático. Vigile también que cierre las etiquetas bien, para que el texto siguiente no quede marcado por error como cita.

Errores que difuminan las citas

• Envolver una página entera en un blockquote gigante sin cita real
• Usar solo CSS o marcas tecleadas cuando el texto es realmente citado y debería usar q / blockquote
• Poner el único título de fuente dentro del atributo cite y asumir que los lectores lo verán
• Anidar blockquote dentro de q sin un motivo claro
• Citarse a sí mismo por decoración — reserve estos elementos para palabras realmente citadas
• Olvidar cerrar q o blockquote de modo que el texto posterior siga marcado como cita
  Cada uno de estos errores debilita la confianza o mezcla presentación con significado. Revise la página con ojos de lector: ¿queda claro dónde termina su texto y dónde empieza el de la fuente? ¿La atribución visible está donde las personas la necesitan?

Resumen

• Citas cortas dentro de una frase → q
• Bloques citados más largos → blockquote
• Títulos de obras visibles → elemento cite
• URL de origen opcional → atributo cite en blockquote
• Marque citas reales en HTML; no confíe solo en el estilo para el significado
• Mantenga la honestidad: use los elementos cuando realmente cite una fuente
  Con este orden construye páginas más claras para personas y herramientas, separa decoración de significado y deja la atribución legible donde el visitante la espera.