Como resaltar, destacar y marcar texto en HTML

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 con elementos HTML

Usar el elemento <blockquote> para resaltar un bloque de texto

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 usar como en este ejemplo de forma nativa.

En este otro ejemplo Blockquote se personaliza con CSS, como hago en las páginas de este sitio, para darle otro color de fondo, una pequeña barra vertical a la izquierda y destacarlo aún más

Otro uso.
Algunos usan Blockquote con el elemento CITE.
Un ejemplo del resultado.

"El cerebro no es un vaso por llenar, sino una lampara por encender."

Plutarco

Usar el elemento <cite> en HTML para mostrar citas o referencias

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> en HTML para representar una cita corta

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.
Código:

<q>Cita corta</q>

Usar el elemento <em> en HTML para enfatizar texto

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>
Código:

<em>Texto a enfatizar</em>

Usar el elemento <strong> en HTML para destacar importancia del texto

Otro elemento que podemos usar para destacar o dar mucho énfasis a una palabra, frase u oración, es strong (de fuerte).
Ejemplo
Texto destacado
Código:

<strong>Texto destacado</strong>

Usar el elemento <i> en HTML para destacar texto usando cursivas

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

<i>Línea encerrada entre dos etiquetas italic;</i>

Usar el elemento <mark> en HTML para marcar o resaltar texto

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.
Código:

<mark>importante</mark>

Usar la etiqueta INS

La etiqueta HTML <ins> se emplea para marcar el texto que ha sido insertado o agregado a un documento.
Ejemplo
El siguiente texto ha sido agregado

Usar la etiqueta DEL

La etiqueta HTML <del> se emplea para marcar el texto que ha sido eliminado de un documento.
Ejemplo
El siguiente texto ha sido eliminado

Usar la etiqueta SMALL

La etiqueta HTML <small> se emplea para reducir el tamaño del texto.
Ejemplo
El siguiente texto ha sido reducido su tamaño

Usar el elemento Subíndice SUB

La etiqueta HTML <sub> especifica texto en línea que debe mostrarse como subíndice por motivos tipográficos. Los subíndices se representan con una línea de base más baja usando texto más pequeño.
Ejemplo
La fórmula química del agua es H₂O

Usar el elemento Superíndice SUP

La etiqueta HTML <sub> especifica texto en línea que debe mostrarse como superíndice por motivos tipográficos. Los subíndices se representan con una línea de base elevada usando texto más pequeño
Ejemplo
4²= 16

Ejemplos de etiquetas usadas para dar formato al texto en HTML.

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

Sígueme en las redes sociales