HTML <mark> Tag – Highlighted Text
📌 Introduction
The <mark> tag is used to highlight text in HTML.
By default, browsers display it with a yellow background, similar to a marker highlight.
It is commonly used to draw attention to important parts of text.
🧱 Syntax
<mark>Highlighted text</mark>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Mark Tag Example</title>
</head>
<body>
<p>This is a normal sentence.</p>
<p>This is <mark>highlighted text</mark> inside a paragraph.</p>
</body>
</html>
🖥️ Output Explanation
- Normal text appears regular
- Text inside
<mark>is highlighted (usually yellow background) - It visually draws attention to important content
🎯 When to Use <mark>
Use <mark> for:
- Search results highlighting
- Important keywords
- Showing selected or matched text
- Drawing attention to key parts
Example:
<p>Learn <mark>HTML</mark> step by step.</p>
⚠️ Important Note
👉 <mark> is NOT just decoration
It has semantic meaning: it shows relevance or emphasis in context
⚖️ <mark> vs <strong> vs <u>
| Tag | Purpose | Appearance |
|---|---|---|
<mark> |
Highlight important text | Yellow background |
<strong> |
Important meaning | Bold |
<u> |
Underline (visual only) | Underline |
🎨 Styling <mark>
You can customize it with CSS:
<mark style="background-color: orange;">Important text</mark>
✔ You can change colors, padding, etc.
🚫 Common Mistakes
- Using
<mark>for decoration only ❌ - Overusing it everywhere ❌
- Confusing it with
<strong>❌
🧪 Mini Exercise
Create a page with:
- A paragraph about learning HTML
- Highlight:
- The word “HTML”
- One important keyword in the sentence