How to Highlight Text in HTML?

Last Updated : 17 Oct, 2024

Highlighting text in HTML can be done in various ways, allowing you to draw attention to important content. The most straightforward method involves using built-in HTML tags, but you can also achieve custom highlights using CSS styling for more control over the appearance.

These are the following approaches to Highlight Text in HTML:

Table of Content

Using the Tag
Applying Inline CSS for Custom Highlighting
Using External or Internal CSS

Using the Tag

The tag is an HTML5 element used to highlight text. It adds a background color to the selected text, making it stand out. The default highlight color is yellow. Wrap the text you want to highlight with the tag. The browser will automatically apply a yellow background to the text.

Syntax:

<mark>Highlighted text</mark>

Example: This example demonstrates basic text highlighting using the tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Highlighting with mark Tag</title>
</head>

<body>
    <h3>GeeksforGeeks</h3>
    <p>This is an example of 
      	<mark>highlighted text</mark> 
      	using the <mark>&lt;mark&gt;</mark> tag.
  	</p>
</body>

</html>

Output:

Note: The same thing can be achieved by using CSS.

Applying Inline CSS for Custom Highlighting

If you want to customize the highlight color, inline CSS allows you to add styles directly to the HTML element. Use the style attribute within the HTML tag to apply a background color. Specify your desired color for the background-color property.

Syntax:

<span style="background-color: lightblue;">
     Custom highlighted text
</span>

Example: This example shows how to highlight text with a custom background color using inline CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Custom Highlighting</title>
</head>

<body>
    <h3>GeeksforGeeks</h3>
    <p>Here is a
        <span style="background-color: lightgreen;">
            custom highlighted text
        </span> using inline CSS.
    </p>
</body>

</html>

Output:

Using External or Internal CSS

For better maintainability, you can use internal or external CSS to define a class for highlighting text. Create a CSS class with the desired background-color style. Apply the class to the HTML element to highlight it.

Syntax:

.highlight {
    background-color: yellow;
    color: black;
}

Example: The text is highlighted using a CSS class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Highlighting with CSS</title>
    <style>
        .highlight {
            background-color: green;
            color: black;
        }
    </style>
</head>

<body>
    <h3>GeeeksforGeeks</h3>
    <p>This is an example of
        <span class="highlight">highlighted text</span>
        using CSS classes.
    </p>
</body>

</html>

Output:

How to Style Text in HTML?

pankaj2025

Improve

Article Tags :

How to Highlight Text in HTML?

Using the <mark> Tag

Syntax:

Applying Inline CSS for Custom Highlighting

Syntax:

Using External or Internal CSS

Syntax:

Similar Reads

How to Highlight Text in HTML?

Using the &lt;mark&gt; Tag

Syntax:

Applying Inline CSS for Custom Highlighting

Syntax:

Using External or Internal CSS

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?

Using the <mark> Tag