How can you highlight text in HTML?

To highlight text in HTML, there are several methods you can use, each suitable for different scenarios and requirements. Here are some of the most common techniques:

Using the <mark> Tag

The <mark> tag is a simple and semantic way to highlight text in HTML5. It is used to represent text that is marked or highlighted for reference or notation purposes, often due to its relevance in the enclosing context. The default styling for the <mark> tag is typically a yellow background, but this can be customized with CSS if needed.

Example:

<p>The <mark>highlighted</mark> text appears with a default yellow background.</p>

This method is straightforward and does not require any additional CSS to achieve the highlighting effect[4][5][6].

Using Inline CSS

For more control over the appearance of the highlighted text, you can use inline CSS. By setting the background-color property, you can highlight text with any color you choose.

Example:

<p>The <span style="background-color: #FFFF00">highlighted</span> text appears with a yellow background.</p>

This method allows you to specify the exact color of the highlight and is supported across all browsers[1][3].

Using CSS Classes

If you want to apply the same highlighting style to multiple elements or manage the styles more centrally, you can define a CSS class.

Example:

.highlight {
  background-color: #FFFF00;
}

<p>The <span class="highlight">highlighted</span> text appears w...