What is mark tag in html

HtmlConceptBeginner · 3 min read

What is the HTML Tag and How to Use It

The  tag in HTML is used to highlight or mark text that is important or relevant. It visually emphasizes the text by default with a yellow background, making it stand out to users.

⚙️

How It Works

The  tag works like a highlighter pen on paper. Imagine you are reading a book and you use a yellow marker to highlight important sentences. The  tag does the same for text on a web page by giving it a bright background color, usually yellow.

This helps users quickly spot key information or search results. The browser applies a default style, but you can change the highlight color with CSS if you want. The tag is semantic, meaning it tells browsers and assistive technologies that the text is specially marked or important.

💻

Example

This example shows how to use the  tag to highlight a word in a sentence.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mark Tag Example</title>
</head>
<body>
  <p>This is a <mark>highlighted</mark> word in a sentence.</p>
</body>
</html>

Output

This is a highlighted word in a sentence.

🎯

When to Use

Use the  tag when you want to draw attention to specific text that is important or relevant in context. For example, it is useful for:

Highlighting search terms in search results.
Emphasizing key points in articles or instructions.
Marking text that needs review or special notice.

It is not meant for general styling but for semantic highlighting to improve user experience and accessibility.

✅

Key Points

The  tag highlights text with a default yellow background.
It is semantic, meaning it shows the text is important or relevant.
Browsers apply default styling but you can customize it with CSS.
Use it to improve readability and user focus on key content.

✅

Key Takeaways

The tag highlights important text with a yellow background by default.

It is semantic and helps users quickly find relevant information.

Use to emphasize key words or phrases in content or search results.

You can customize the highlight style with CSS if needed.