Como resaltar, destacar y marcar texto en HTML
Actualizado: 26 de abril del 2023
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
Resaltar líneas, párrafos, bloques, secciones, frases o citas de texto en las páginas y hacerlo más visibles, con etiquetas o elementos de 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>
ResultadoFranç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
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 H2O
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ñoEjemplo
42= 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 « (apertura) y » (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
✔ Editores HTML libres y gratis, ejemplos
✔ Bookmarklets para comprobar y validar páginas de un blog o sitio web
✔ Convertir un bloque de HTML en una imagen con Canvas
✔ Bookmarklets para comprobar y validar páginas de un blog o sitio web
✔ Convertir un bloque de HTML en una imagen con Canvas
Comparte
Facebook
Twitter