Etiqueta cite en HTML
¿Qué es la etiqueta <cite> en HTML?
La etiqueta HTML <cite> se utiliza para indicar la cita de una referencia a un libro, revista, película, trabajo de investigación o cualquier otra fuente que se haya utilizado como referencia en un documento.
También la etiqueta <cite> se puede utilizar para citar una referencia en línea o en un bloque de texto. Cuando se utiliza para citar una referencia en línea, la etiqueta <cite> se utiliza generalmente dentro del texto, y cuando se utiliza para citar una referencia en un bloque de texto, la etiqueta <cite> se utiliza generalmente junto con la etiqueta <blockquote>.
La etiqueta <cite> no tiene un formato específico y su estilo de presentación puede variar según el diseño de la página web. Sin embargo, se recomienda que se utilice algún tipo de estilo distintivo, como cursiva o comillas, para diferenciar las citas de las fuentes de otros elementos de texto en la página.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <cite> en HTML5:
<p>Según <cite>La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <cite> para indicar la referencia a “La Ilíada” y hemos incluido la cita dentro de comillas dobles.
Atributos
La etiqueta HTML <cite> no tiene atributos obligatorios u opcionales.
La única función de la etiqueta <cite> es indicar la referencia a una fuente que se haya utilizado como referencia en un documento. El contenido de la etiqueta <cite> puede ser cualquier texto que indique la fuente de la información, como un título de libro, un nombre de autor o el título de una película.
Sin embargo, se pueden utilizar atributos globales de HTML5, como “class” o “id”, en la etiqueta <cite> para aplicar estilos CSS o para identificar el elemento en el documento.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <cite>:
<p>Según <cite class="book-title">La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado el atributo “class” en la etiqueta <cite> con el valor “book-title” para identificar que se trata del título de un libro.
Esto puede ser útil para aplicar estilos CSS específicos a las referencias de libros en un documento.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <cite> de HTML5:
Ejemplo 1: Utilizando la etiqueta <cite> para citar una referencia en línea y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta cite</title>
<style>
.book-title {
font-style: italic;
color: green;
}
</style>
</head>
<body>
<p>Según <cite class="book-title">La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
<p>Según <cite>"The Catcher in the Rye"</cite>, "nada termina por ser lo que uno espera".</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <cite> para citar dos referencias en línea y hemos aplicado estilos personalizados con CSS. Hemos utilizado el atributo “class” para identificar que se trata del título de un libro en la primera referencia y no se ha utilizado ningún atributo en la segunda referencia.
También hemos definido una regla CSS para aplicar cursiva y un color verde a las referencias que tienen la clase “book-title”.
Ejemplo 2: Utilizando la etiqueta <cite> y la etiqueta <blockquote> para citar una referencia en un bloque de texto.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta cite en bloque de texto</title>
</head>
<body>
<blockquote>
<p>"No tengo miedo de los ordenadores. Lo que tengo miedo es de la falta de ellos".</p>
<footer><cite>Isaac Asimov</cite></footer>
</blockquote>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <cite> y la etiqueta <blockquote> para citar una referencia en un bloque de texto.
Hemos incluido la cita dentro de la etiqueta <p> y hemos utilizado la etiqueta <footer> para incluir la referencia citada. En la referencia citada, hemos utilizado la etiqueta <cite> para indicar el autor de la cita.