Dificultad Baja
Para hacer citas o dar énfasis a los comentarios o afirmaciones en HTML, uno de los elementos que nos permite hacer esto es el bloque de cita o blockquote. Cierto es que se utiliza conjuntamente con “cite blockquote” y puede ser de gran atractivo para los artículos de blog o incluso para las notas de prensa que estarán destinadas para medios. Donde fuere que se colocara esta “cita”, se estilizará de acuerdo a los estilos css de esa página y siempre complementará con los estilos del sitio web donde está alojado.
¿Qué es blockquote en HTML?
El elemento <blockquote> se utiliza para crear una sección especial que contiene una cita o referencia proveniente de otra fuente. Imagina que es un texto que se ha destacado y que puede ser compendiado en fragmentos de información que incluyen citas, extractos de libros, comentarios personales e incluso letras de canciones, documentos y conversaciones. Este elemento le otorga una propiedad facial distinta a la cita y por eso se hace separada del texto normal de la página, de esta manera, las palabras pronunciadas por otras personas se destacarán fácilmente y se separarán de sus propias palabras. Es, por lo tanto, una manera fácil y limpia de expresar gratitud y reconocimiento a las palabras y ideas de otras personas.
¿Para qué se utiliza blockquote en HTML?
El blockquote es un elemento dentro del html que se usa por lo regular en los blogs y redes sociales donde se realizan publicaciones de datos o notas de prensa donde se utilizan otras fuentes. Al emplear blockquote marcado, se les otorga mayor relevancia a las frases o citas allí. Por ejemplo, las publicaciones académicas requieren que un científico coloque una extensa cita como soporte de su argumento o teoría; así, el blockquote en HTML cumple una función análoga en el ambiente digital, para que los lectores citen otras publicaciones con mayor facilidad.
Cuál es la forma correcta en aplicar blockquote en HTML
Básicamente para aplicar bloque de texto en el elemento bloque en cuanto al formato electrónico, los textos que se quieren citar deben estar ubicados dentro de las etiquetas menores. Como se dio el ejemplo simple.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>- Autor de la cita</p>
</blockquote>
En este ejemplo, el texto realmente es solo un bloque de citas, pero del que se puede destacar que se habla de información. El blockquote sirve efectivamente para disociar de la referencia del texto común centrando el contenido de las partes o palabras citadas.
Cómo se puede dar estilos CSS a blockquote
El elemento denominado blockquote dentro del HTML no tiene un formato por defecto, o para mejor decir una plantilla estándar, sino que su estilo depende de la plantilla de la hoja de estilos CSS que estés usando en tu sitio. Por eso se pueden definir de qué maneras se puede ampliar su diseño.
Por ejemplo, un bloque de citas en una hoja de presentación podría contener a su vez un color de fondo, una disposición tipográfica y márgenes. A continuación se muestra un ejemplo que aplica CSS a la etiqueta blockquote:
blockquote {
background-color: #f2f2f2;
border-left: 5px solid #ccc;
padding: 10px;
margin: 10px 0;
font-style: italic;
}
De lo que podemos deducir de esa CSS es que se arregló para que el blockquote tuviera un fondo de color gris claro. Además, que el borde izquierdo estuviera de 5px de grosor de color gris oscuro y la fuente se desplegara en modo itálico. También hay que alinear los márgenes para separar el bloque de la frase del resto de la narrativa.
Consejos para que tu contenido se vea bien
En el siguiente ejemplo puedes ver cómo se ve en una publicación de nuestro blog:
El elemento blockquote en HTML es un recurso que permite poner de relieve frases y declaraciones hechas en tu web. Su uso puede facilitar el decorado y la estructura de sus trabajos, mostrando más claridad y credibilidad de las citas.
Recuerde que el blockquote no se dirige solo a las publicaciones de blogs u otros elementos de noticias. Asimismo, puede utilizarse en cualquier lugar donde haya necesidad de hacer referencia a otro contenido, como reseñas de clientes, frases interesantes de secciones internas, ideas en las portadas… Siempre se fomenta la mejora de la calidad de la representación visual y la originalidad del contenido textual de un sitio web.
Dejar una Respuesta