HTML <mark> tag
The <mark> tag is one of the HTML5 elements. It marks a part of the text which has relevance. It can be used to highlight text for showing emphasis, highlight search terms in search results to provide context; or distinguish new content added by user showing it differently.
In Chrome and Firefox, the tag content is marked in yellow, but it can be changed with the CSS background-color property.
TIP
The <mark> tag doesn’t carry structural semantics, but it does convey relevance or urgency to assistive technologies. In order to show the importance of the marked text, use the <strong> or <em> tags.
TIP
Never use the <mark> tag for syntax highlighting. For this, you can use the HTML <span> tag with appropriate CSS properties.
The <mark> tag can be used for indicating a particular part of the content relevant to the current activity of the user, like indicating the words matching a search operation.
Syntax
The <mark> tag comes in pairs. The content is written between the opening (<mark>) and closing (</mark>) tags.
Example of the HTML <mark> tag:
HTML <mark> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Result
The <mark> and other HTML tags
A list of some HTML elements that have similarities with the <mark> element is presented below. Let’s go through each of them.
The HTML <strong> tag
You can use the <strong> tag for indicating text or part of the text that is very important. For example an error or a warning. It will appear as bold.
The HTML <b> tag
The <b> tag has some similarities with <strong>. It appears as bold too. The main difference is that the <b> element doesn’t indicate any importance. It is used for design purposes.
The HTML <em> tag
We use the <em> tag to stress emphasis on a specific word. It appears as italics.
Attributes
The <mark> tag supports the Global attributes and the Event Attributes.
How to style an HTML <mark> Tag
You can change the default yellow background using the CSS background-color property:
mark {
background-color: #ffeb3b;
color: #333;
}Practice
What is the purpose of the HTML <mark> tag?