HTML <mark> Tag

The HTML <mark> tag is used to highlight or emphasize a portion of text, typically for relevance or importance. By default, the text within the <mark> tag is displayed with a yellow background, resembling a highlighter. This tag is often used to indicate search results, key information, or text that requires special attention.

Basic Syntax of HTML <mark> Tag

The basic structure of the <mark> tag is:

</>
Copy
<mark>Highlighted text</mark>

The text enclosed within the <mark> tag is highlighted to make it stand out from the surrounding content.

Basic Example of HTML <mark> Tag

Here’s a simple example of using the <mark> tag to highlight text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>This is a <mark>highlighted</mark> word in the sentence.</p>
    </body>
</html>
Basic Example of HTML <mark> Tag

Explanation: The word “highlighted” will appear with a yellow background to draw the reader’s attention.

Highlighting Search Results using <mark>

The <mark> tag is commonly used to emphasize search terms in results:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>Search results for "HTML":</p>
        <p>HTML stands for <mark>Hypertext Markup Language</mark>, which is used to create web pages.</p>
    </body>
</html>
Highlighting Search Results using <mark>

Explanation: The search term “Hypertext Markup Language” is highlighted for relevance in the displayed results.

Styling the <mark> Tag with CSS

You can customize the appearance of the <mark> tag using CSS to match your design:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            mark {
                background-color: #ffcc00;
                color: #000;
                padding: 2px 4px;
                border-radius: 3px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>This is a <mark>custom-styled</mark> highlighted word.</p>
    </body>
</html>
Styling the <mark> Tag with CSS

Result: The highlighted text will appear with a custom background color, rounded edges, and bold font, making it more visually appealing.

Using the <mark> Tag in Accessibility

Using the <mark> tag improves accessibility by providing visual emphasis that can also be read aloud by screen readers:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>To emphasize key points, use the <mark>HTML <mark> tag effectively.</p>
    </body>
</html>

Explanation: The use of the <mark> tag ensures important text stands out visually and can be highlighted by assistive technologies.

Practical Applications of the <mark> Tag

  • Search Results: Highlight matched search terms to show their relevance.
  • Key Information: Emphasize critical information on a webpage, such as warnings or instructions.
  • Educational Content: Highlight definitions, important points, or answers in study materials.
  • Interactive Content: Use in tutorials or guides to emphasize specific actions or code snippets.