HTML provee de un conjunto de elementos estructurales para definir citas. Una cita, según su acepción como mención es:
Recuerdo o memoria que se hace de una persona o cosa, nombrándola, contándola o refiriéndola.
Estructuralmente podemos definir tres tipos de citas:
- Un bloque extenso de texto referido desde algún texto, publicación o cualquier otra fuente externa
- Una referencia breve de un contenido de una fuente externa
- Una referencia a otras fuentes, sin citar necesariamente contenidos específicos
Estos tres tipos de referencia tienen su representación en HTML en los elementos blockquote, q y cite respectivamente.
Uno de los aspectos interesantes de estos elementos es el hecho de que el contenido que definen gana un valor semántico importante: cualquier procesador automatizado o cualquier persona que lea el código reconoce que estas estructuras se refieren a un contenido que está siendo referenciado. Es decir, reconoce el sentido y relación de este contenido respecto al documento.
Más aún, podemos utilizar el atributo cite para blockquote y q para indicar la fuente de destino en la forma de una URI. Es importante no confundir el atributo cite, propio de los elementos blockquote y q, con el elemento cite.
El ejemplo de la definición de la palabra cita que aparece poco más arriba, utiliza blockquote junto con el atributo cite para indicar la definición en el sitio de la RAE.
Una distinción más sutil es la que marca la diferencia entre los elementos q y cite. q, así como blockquote definen un contenido extraído de una fuente externa, sólo que en el primero se trata de un texto breve, contenido dentro de un párrafo u otro elemento de bloque. cite, en tanto, tiene como objetivo el definir una referencia, o más bien la fuente de una referencia. Un ejemplo de esto es:
El elemento cite está definido en la sección de Texto Estructurado de la Especificación de HTML 4.01.
Estos elementos permiten enriquecer el valor semántico de los contenidos, en tanto que al identificarlos según su estructura podemos presentarlos apropiadamente usando CSS.
