The HTML <mark> tag is used to highlight text that is relevant, important, or noteworthy within a webpage. When applied, the text enclosed by the <mark> tag is typically displayed with a yellow background by default, making it stand out to users. This tag is particularly useful for emphasizing key terms, highlighting search results, or drawing attention to important content. It also helps improve the readability of content by visually marking specific sections or words.
Syntax of the <mark> Tag
<mark>Highlighted Text</mark>
The text enclosed within the <mark> tags will appear highlighted in the browser. While the default highlight color is yellow, it can be customized using CSS.
Attributes of the <mark> Tag
The <mark> tag primarily supports global attributes that can be used to further enhance its functionality. Some of the most common attributes include:
| Attribute | Description |
|---|---|
| class | Allows you to assign a CSS class for custom styling. |
| id | Provides a unique identifier to the highlighted text for targeting. |
| style | Enables inline CSS to customize the appearance of the highlighted text. |
| title | Provides additional information when the user hovers over the highlighted text. |
| lang | Specifies the language of the highlighted text. |
These attributes offer flexibility in styling and functionality, allowing developers to create custom highlights or add more information to the highlighted content.
Examples of HTML <mark>Tag
Example 1: Basic Highlighting with the <mark> Tag
<!DOCTYPE html>
<html>
<head>
<title>Mark Tag Example</title>
</head>
<body>
<p>The <mark>moon</mark> is Earth's only natural satellite.</p>
</body>
</html>
In this example, the word "moon" is highlighted with the default yellow background, drawing attention to the term.
Example 2: Customizing the <mark> Tag with CSS
<!DOCTYPE html>
<html>
<head>
<title>Customized Mark Tag Example</title>
<style>
mark {
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<p>In our solar system, <mark>Mars</mark> is often referred to as the Red Planet.</p>
</body>
</html>
In this example, CSS is used to customize the highlight color to light blue, changing the appearance of the text marked with the <mark> tag.
FAQs About HTML <mark> Tag
Q1: What is the purpose of the HTML <mark> tag?
A: The <mark> tag is used to highlight text that is important or relevant, making it stand out with a default yellow background. It’s often used to emphasize key information or search terms.
Q2: Can the highlight color of the <mark> tag be changed?
A: Yes, you can customize the appearance of the <mark> tag using CSS. The background color and text color can be changed as needed.
Q3: Is the <mark> tag supported by all browsers?
A: Yes, the <mark> tag is supported by all major browsers, including Chrome, Firefox, Safari, and Edge.
Q4: Does the <mark> tag have any attributes?
A: The <mark> tag does not have specific attributes but supports global attributes like class, id, style, and title for styling and customization.
Q5: How is the <mark> tag different from the <strong> or <em> tags?
A: The <mark> tag highlights text visually, whereas the <strong> tag is used for strong emphasis (bold), and the <em> tag is for italicized emphasis. The <mark> tag does not affect the semantic meaning of the text but is used to indicate relevance or importance visually.
