Resaltar texto en HTML con los elementos blockquote, cite, q, em e i

En ocasiones necesitamos destacar en nuestras páginas líneas o bloques de texto del resto.
Para eso podemos usar distintos elementos de HTML y es opcional emplear reglas CSS para diferenciar y personalizar su estilo.
En esta página comparto varios ejemplos que uso en mi sitio.

Elementos HTML para resaltar y destacar el texto

Para agrupar el texto que necesitamos diferenciar del resto del contenido, en HTML podemos emplear varios elementos como "blockquote", que es un elemento de bloque y otros como "cite" y "q" que son elementos en línea (cajas en línea).
Otros como "em" y "mark" son de contenido textual y el sencillo "i" un elemento de estilo.
Por supuesto se emplean encerrados entre etiquetas de cierre y apertura.
Todos de forma aislada o combinados, se muestran a continuación.

Ejemplos de texto resaltado usando elementos HTML

Usar el elemento <blockquote>

El elemento blockquote crea un cajón o bloque para resaltar y destacar una línea, párrafo o bloque de texto, como este.
De forma predeterminada se agrega un espaciado a su alrededor.

Blockquote se puede personalizar con CSS como en este ejemplo, para darle otro color de fondo y destacarlo aún más.

Usar el elemento <cite>

El elemento cite como su nombre sugiere, se emplea para citar o referenciar.
Puede ser para citar una fuente o el autor de un trabajo creativo como un libro, una película, un programa de televisión o una canción.
Al encerrar un texto con cite, este se representa en cursiva, pero este no debe ser su uso, para ello se debe emplear los elementos <em> o <i>.
Cite se usa frecuentemente para marcar el texto de las citas, en vez del autor.
Para marcar el texto debemos de usar preferentemente los elementos q (en línea) y blockquote (en bloque).

Ejemplo

<cite>Françoise Sagan</cite> es el autor de la frase:
<q>Amar no es solamente querer, es sobre todo comprender.</q>

Resultado
Françoise Sagan es el autor de la frase: Amar no es solamente querer, es sobre todo comprender.

Usar el elemento <q>

Q es un hermano menor de Blockquote.
Q es usado para representar una cita corta, como un elemento en línea sin saltos de línea, como en este ejemplo.
La etiqueta genera automáticamente comillas de apertura y de cierre, aunque se pueden personalizar con CSS.

Usar el elemento <em>

El elemento <em> es el apropiado para marcar con énfasis las partes importantes de un texto.
Ejemplo
Esta línea está encerrada entre dos etiquetas <em></em>
em tiene un hermano mayor: strong. em sirve para dar énfasis y strong para dar mucho énfasis.

Usar el elemento <i>

El elemento i muestra el texto marcado con un estilo en cursiva o italica (inclinado).
Ejemplo
Esta línea está encerrada entre dos etiquetas <i></i>

Usar el elemento <mark>

El Elemento <mark> se usa para marcar o resaltar un texto como referencia o anotación, debido a su relevancia o importancia en un contexto particular.
Ejemplo
Para marcar la palabra importante, simplemente la encierro entre dos etiquetas <mark></mark> y en el navegador se muestra con el color de fondo amarillo.

Encerrar texto entre comillas

Son usadas varios tipos de comillas para resaltar texto.
Son signos tipográficos utilizados por los siguientes motivos: para citar textualmente algo que ocupe menos de tres o cuatro renglones, señalar palabras usadas en un sentido distinto del normal, presentar el significado de una palabra o expresión y para indicar los pensamientos de un personaje en textos narrativos.

Tipos de comillas y como insertarlas en HTML

Se usan tres tipos de comillas:
1- Comillas castellanas, latinas, españolas, angulares dobles o guillemet (« »).
En HTML se insertan con las entidades HTML &#171; (apertura) y &#187; (cierre).
También con la combinación de teclas ALT174 y ALT175.
2- Comillas altas, inglesas o dobles (❝ ❞) (“ ”) (" ").
3- Comillas simples (❛ ❜) (‘ ’) (' ').
En HTML se recomienda usar de estas últimas las dobles (" ") (que siempre se deben escapar) y las sencillas (' ').

Páginas relacionadas



Comparte

Me Gusta Tuitear