Definición destacada
¿Como funciona el comando en HTML5: 'blockquote'?
Última modificación: 2024-06-17
Detalle de la Instrucción HTML5 <blockquote>
El elemento <blockquote> en HTML5 se utiliza para marcar citas textuales largas que provienen de una fuente externa a la que se está refiriendo. Es una forma de facilitar la lectura y la comprensión, diferenciando el texto citado del texto real del documento. Este elemento es importante en el diseño de contenido porque hace que las citas sean fácilmente identificables.
Atributos del elemento <blockquote>
- cite: Este atributo opcional se utiliza para especificar la URL de la fuente de la cita. Proporciona a los usuarios y a los motores de búsqueda más contexto sobre la cita. Por ejemplo:
<blockquote cite="https://www.example.com/quote-source"> ...contenido de la cita... </blockquote>
Atributos Globales
Además de su atributo específico, <blockquote> admite todos los atributos globales de HTML, que incluyen:
- accesskey: Define una tecla de acceso rápido para enfocar el elemento.
- class: Permite asignar una o más clases CSS al elemento.
- contenteditable: Indica si el contenido del elemento es editable.
- *data- attributes**: Permiten almacenar datos personalizados en el atributo de datos.
- dir: Define la dirección del texto (
ltrpara izquierda a derecha,rtlpara derecha a izquierda). - draggable: Indica si el elemento puede ser arrastrado.
- hidden: Oculta el elemento.
- id: Define un identificador único para el elemento.
- lang: Especifica el idioma del contenido del elemento.
- spellcheck: Indica si la verificación ortográfica es activada o no.
- style: Permite añadir reglas de estilo CSS adicionales al elemento.
- tabindex: Especifica el orden de tabulación del elemento.
- title: Proporciona un texto adicional, generalmente mostrado como un tooltip.
- translate: Indica si el contenido del elemento debe ser traducido o no.
<blockquote class="quote" id="uniqueQuote" cite="https://source.com">Uso del Elemento <blockquote> en HTML5
Ahora que hemos revisado los atributos del elemento <blockquote>, pasemos a algunos ejemplos básicos de cómo puede ser utilizado en un documento HTML5.
Ejemplo 1: Cita Simple sin URL de la fuente
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Blockquote</title>
</head>
<body>
<p>En el libro "El Principito", de Antoine de Saint-Exupéry, hay una cita memorable:</p>
<blockquote>
"Lo esencial es invisible a los ojos."
</blockquote>
</body>
</html>Ejemplo 2: Cita con Referencia a la Fuente
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Blockquote con Fuente</title>
</head>
<body>
<p>A continuación se muestra una cita tomada de "El Principito":</p>
<blockquote cite="https://www.ejemplo.com/el-principito">
"Lo esencial es invisible a los ojos."
</blockquote>
<p>Puedes leer más sobre esta cita en el siguiente <a href="https://www.ejemplo.com/el-principito">enlace</a>.</p>
</body>
</html>Ejemplo 3: Cita con Estilo Personalizado
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cita con Estilo</title>
<style>
blockquote.custom-style {
border-left: 5px solid #ccc;
margin: 20px;
padding: 10px;
font-style: italic;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<p>Una cita famosa de una novela clásica:</p>
<blockquote class="custom-style" cite="https://www.ejemplo.com/novela-clasica">
"No todos los que vagan están perdidos."
</blockquote>
</body>
</html>En resumen, el elemento <blockquote> es una poderosa herramienta en HTML5 para la representación de citas textuales largas con la opción de proporcionar una referencia a la fuente de dichas citas mediante el atributo cite. Su uso adecuado mejora la claridad y la estructuración del contenido en los documentos HTML.