Resaltar texto en HTML con los elementos blockquote, cite, q, em e i
Como destacar líneas, bloques, secciones, frases o citas de texto en las páginas y hacerlas más visibles, usando etiquetas de HTML Diferencias de estos elementos.
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>
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.
