Highlighting text on a web page helps bring important information immediately to the reader’s attention. For example, this text is highlighted in yellow and probably caught your eye first. There are several methods for highlighting text. To proceed, select a method from the list below and follow the instructions.

Highlight using the HTML5 tag

If you are working on an HTML5 page, the tag can quickly highlight text. Below is an example of the how to use the mark tag and its result. If your browser supports the tag, “highlighted text” should have a yellow background.

  • Highlight using the HTML5 tag.
  • Highlight text with only HTML code.
  • Highlight text with CSS & HTML.
  • How to highlight a complete paragraph.
  • Related information.

Example code

Here is an example of highlighted text using the <mark> tag.

Example result

Here is an example of highlighted text using the tag.

Highlight text with only HTML code

To highlight text with HTML code and support for all browsers, set the background-color style, as shown in the example below, using the HTML tag.

This text is highlighted in yellow.

This text is highlighted text in yellow.

Highlight text with CSS & HTML

You can also create a CSS class and set the “background-color” attribute, as shown in the example below.

In the example above, the HTML tag has a background-color code of #FFFF00, which is yellow. In this case, the word “yellow” could be used in place of the color code, or any other color name for that matter.

With the same code, you could also highlight one or more words within a paragraph to draw attention to a specific section of the text.

In the CSS code above, there are three elements being defined. First, the body background color is set to blue, second, a new class called “highlightme” with a yellow background, and finally, the paragraph tag has a white background.

If you want to use the “highlightme” class to highlight your text, you can create a tag in your HTML which references the CSS class.

test

How to highlight a complete paragraph

The CSS class or style class mentioned above could also be applied to a paragraph tag if you wanted to highlight a complete paragraph as shown below.

This whole paragraph of text is highlighted in yellow.

This whole paragraph of text is highlighted in yellow.

  • See our CSS, highlight, and HTML definition for additional information related pages.
  • CSS and HTML color help and support.