Resaltar el texto en una página web ayuda a llamar la atención del lector de forma inmediata sobre la información importante. Por ejemplo, este texto está resaltado en amarillo y probablemente le haya llamado la atención primero. Hay varios métodos para resaltar el texto. Para proceder, seleccione un método de la lista siguiente y siga las instrucciones.
Resaltar usando la etiqueta HTML5 <mark>
Si estás trabajando en una página HTML5, la etiqueta <mark> puede resaltar rápidamente el texto. A continuación se muestra un ejemplo de cómo utilizar la etiqueta mark y su resultado. Si tu navegador soporta la etiqueta <mark>, el «texto resaltado» debería tener un fondo amarillo.
Código de ejemplo
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Resultado de ejemplo
Aquí tienes un ejemplo de texto resaltado utilizando la etiqueta <mark>.
Resaltar un texto sólo con código HTML
Para resaltar un texto con código HTML y que sea compatible con todos los navegadores, establezca el estilo de color de fondo, como se muestra en el siguiente ejemplo, utilizando la etiqueta <span> HTML.
Código de ejemplo
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Resultado del ejemplo
Este texto está resaltado en amarillo.
En el ejemplo anterior, la etiqueta HTML <span> tiene un código de color de fondo de #FFFF00, que es amarillo. En este caso, se podría utilizar la palabra «amarillo» en lugar del código de color, o cualquier otro nombre de color para el caso.
Resaltar texto con CSS & HTML
También puedes crear una clase CSS y establecer el atributo «color de fondo», como se muestra en el siguiente ejemplo.
Código de ejemplo
<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>
En el código CSS de arriba, se están definiendo tres elementos. En primer lugar, el color de fondo del cuerpo se establece en azul, en segundo lugar, una nueva clase llamada «highlightme» con un fondo amarillo y, por último, la etiqueta de párrafo tiene un fondo blanco.
Si quieres utilizar la clase «highlightme» para resaltar tu texto, puedes crear una etiqueta <span> en tu HTML que haga referencia a la clase CSS.
Código de ejemplo
<span class="highlightme">test</span>
Cómo resaltar un párrafo completo
La clase CSS o clase de estilo mencionada anteriormente también podría aplicarse a una etiqueta de párrafo si quisieras resaltar un párrafo completo como se muestra a continuación.
Código de ejemplo
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Resultado del ejemplo
Este párrafo completo de texto se resalta en amarillo.
Información adicional
- Vea nuestras páginas de definición de CSS, resaltado y HTML para obtener información adicional relacionada.
- Ayuda y soporte de colores de CSS y HTML.