Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <mark> tag in HTML is used to highlight specific parts of text, making it stand out with a yellow background by default. This tag is often used to emphasize important information or search terms within a document. It is particularly useful for improving content readability and drawing attention to key points for users.
In this article, you will learn about the syntax of the <mark> tag, its attributes, and practical examples of how to use it effectively to enhance your web content.
Syntax
The syntax of the <mark> tag in HTML is simple. It is a semantic inline element used to wrap the text you want to highlight. Here's the basic syntax:
<mark>Your highlighted text here</mark>
Key Features
The <mark> tag in HTML is usually styled by default with a yellow background color in most browsers.
It is an inline element, so it does not disrupt the layout of surrounding text.
You can customize its appearance using CSS.
Examples
Example 1: Basic Highlighting
This example demonstrates the default behavior of the <mark> tag in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Example</title>
</head>
<body>
<p>The HTML <mark>`<mark>`</mark> tag highlights text to draw attention.</p>
</body>
</html>
Output:
The text "<mark>" will appear with a yellow background to emphasize it.
Example 2: Highlighting in Search Results
Here’s an example of using the <mark> tag to simulate search results highlighting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Highlight</title>
</head>
<body>
<h2>Search Results:</h2>
<p>The word <mark>HTML</mark> is highlighted as part of the search results.</p>
</body>
</html>
Output:
The word "HTML" will be highlighted to show it matches the search term.
Example 3: Customizing the Highlight with CSS
You can use CSS to change the default style of the <mark> tag. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Highlight</title>
<style>
mark {
background-color: lightblue;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>The custom style for the <mark>`<mark>`</mark> tag makes it stand out uniquely.</p>
</body>
</html>
Output:
The highlighted text will have a light blue background and bold, black text.
Supported Browsers
The <mark> tag in HTML is widely supported across modern browsers, making it a reliable option for highlighting text. Below is a table showing its browser compatibility:
Browser
Supported Version
Google Chrome
6.0+
Mozilla Firefox
4.0+
Microsoft Edge
9.0+
Safari
5.1+
Opera
11.0+
Specifications
The <mark> tag was introduced in HTML5 and follows the standards defined by the World Wide Web Consortium (W3C). Below are the key specifications:
Semantic Meaning
The <mark> tag semantically conveys that the content inside it is important or relevant.
Assistive technologies like screen readers may interpret <mark> content as emphasized text.
Styling
By default, most browsers style the <mark> tag with a yellow background and black text.
This can be overridden using custom CSS rules, as demonstrated earlier.
Accessibility
The <mark> Tag is accessible for visually impaired users, especially when used alongside appropriate ARIA (Accessible Rich Internet Applications) attributes.
Frequently Asked Questions
What is the main purpose of the <mark> tag in HTML?
The <mark> tag is used to highlight important or relevant text on a webpage, making it stand out for readers.
Can I style the <mark> tag using CSS?
Yes, you can fully customize the appearance of the <mark> tag using CSS properties like background-color, color, font-weight, etc.
Is the <mark> tag supported in all browsers?
The <mark> tag is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera, with minimal compatibility issues.
Conclusion
The <mark> tag in HTML Is a simple yet effective HTML element for highlighting text. It is widely supported, easy to use, and enhances the readability of your content. By customizing it with CSS, we can adapt its appearance to match our website’s design. Whether you’re building a search result page or emphasizing important points, the <mark> tag is a handy tool for developers.
518+ registered 
