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

Me gusta Tuitear

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.

Páginas relacionadas



Comparte

Me Gusta Tuitear