La Etiqueta CITE

La etiqueta <cite> se utiliza para referenciar el título de una obra creativa, como libros, películas, canciones, pinturas o artículos. Su propósito principal es dar crédito semántico al trabajo original, mejorando la accesibilidad y estructura del contenido.

Sintaxis básica

<p>
  La famosa novela <cite>Cien años de soledad</cite> fue escrita por Gabriel García Márquez.
</p>

• Inline element: Se usa dentro de párrafos o bloques de texto.

• Propósito semántico: Indica que el texto es un título de obra, no solo un estilo cursiva.

Casos de uso correctos

Citar títulos de obras

<p>
  En su ensayo sobre arte moderno, menciona <cite>La noche estrellada</cite> de Van Gogh.
</p>

Referenciar artículos o publicaciones

<p>
  Según el estudio publicado en <cite>Nature</cite>, el cambio climático es irreversible.
</p>

Citar música o películas

<p>
  La canción <cite>Bohemian Rhapsody</cite> de Queen revolucionó la música rock.
</p>

Diferencias clave con elementos similares

Etiqueta	Uso	Ejemplo
<cite>	Títulos de obras creativas	El Guernica de Picasso
<q>	Citas textuales cortas	"Ser o no ser"
<blockquote>	Citas textuales largas (en bloque)	Fragmentos de libros o artículos

Accesibilidad

Los lectores de pantalla identifican <cite> como una referencia.

Buenas prácticas:

Combinar con <blockquote> para citas completas:

<blockquote>
  <p>"La imaginación es más importante que el conocimiento".</p>
  <footer>— Albert Einstein, <cite>Teoría de la relatividad</cite></footer>
</blockquote>

Estilización con CSS

Personaliza la apariencia sin perder la semántica:

cite {
  font-style: normal; /* Elimina la cursiva predeterminada */
  color: #2c3e50;
  font-weight: bold;
  text-decoration: underline dotted #e74c3c;
}

Errores comunes

Usar para nombres de autores

<!-- Incorrecto -->
<p>Escrito por <cite>J.K. Rowling</cite></p>

<!-- Correcto -->
<p>Escrito por J.K. Rowling en <cite>Harry Potter</cite></p>

Confundir con el atributo cite

<!-- El atributo "cite" en <blockquote> es diferente -->
<blockquote cite="https://ejemplo.com/fuente">
  <p>Texto citado...</p>
</blockquote>

Citar fuentes no creativas

<!-- Incorrecto -->
<p>Según <cite>Wikipedia</cite>, la Tierra es redonda.</p>

<!-- Correcto -->
<p>Según <cite>NASA</cite>, la Tierra es redonda.</p>

Ejemplos avanzados

Cita en artículo académico

<article>
  <h2>Arquitectura moderna</h2>
  <p>
    Como señala Frank Lloyd Wright en <cite>El futuro de la arquitectura</cite>, 
    el diseño debe integrarse con la naturaleza.
  </p>
</article>

Lista de referencias

<ul>
  <li><cite>1984</cite> - George Orwell</li>
  <li><cite>El Hobbit</cite> - J.R.R. Tolkien</li>
</ul>

Buenas prácticas

Siempre incluir el título exacto: Usar mayúsculas y puntuación correctas.

Evitar enlaces dentro de <cite>: Usar <a> alrededor si es necesario:

<p>
  Más información en <a href="#"><cite>El arte de la guerra</cite></a>.
</p>

Priorizar obras reconocidas: Usar <cite> para trabajos publicados, no ideas abstractas.

Compatibilidad y SEO

• Todos los navegadores modernos soportan <cite>.

• Beneficio SEO: Ayuda a los motores de búsqueda a identificar referencias culturales.

Conclusión:

La etiqueta <cite> es esencial para:

• Dar crédito formal a obras creativas.
• Mejorar la estructura semántica del contenido.
• Facilitar la accesibilidad y comprensión del texto.

¡Úsala siempre que cites títulos de libros, películas, arte o investigaciones para mantener un marcado HTML profesional!