HTML <mark> Element
The HTML <mark> element represents text that is marked or highlighted because it has particular relevance within the surrounding content.
Syntax
<mark>Highlighted text</mark>The <mark> element requires both an opening and closing tag. The content placed between the tags is the text being marked as relevant.
Attributes
The <mark> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <mark> element to highlight a phrase that is particularly relevant within the paragraph.
Usage Notes
Use the <mark> element when part of the text should be identified as relevant to the reader in the current context. A common example is highlighting matching words or phrases in search results.
The <mark> element should not be used simply to give text a colored background for decorative purposes. When the goal is only visual styling, use CSS instead.
Do not use <mark> as a substitute for <strong>. The <strong> element indicates importance, while <mark> identifies content that is relevant or worthy of attention in the current context.
Accessibility
Browsers typically display <mark> content with a highlighted background, but this visual treatment may not be announced by screen readers. Do not rely on highlighting alone when users must understand that the marked text has a special meaning or requires an action.
If you change the default appearance with CSS, make sure the text and background colors provide sufficient contrast so the highlighted content remains easy to read.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <mark> Element .
Related Elements
The <mark> element is related to several elements that give text additional meaning, including <strong> for important content, <em> for stress emphasis, and <span> when a generic inline container is needed for styling or scripting.