<mark>

Definition

The HTML <mark> element is used to highlight and mark text content in a web page. When the <mark> element is used, the text enclosed within the tags will appear visually distinct from the surrounding text, usually with a yellow background color or other highlighting style, depending on the browser and style sheet used.

The <mark> element is often used to draw attention to a particular word or phrase in a block of text, such as a keyword, quote, or important point. It is commonly used in conjunction with JavaScript or CSS to provide additional functionality or styling.

Examples

Here's an example of how the <mark> element can be used in HTML code:

<p>This is a paragraph with some <mark>important text</mark> highlighted.</p>

In this example, the word "important text" would appear visually distinct from the rest of the paragraph text, indicating its importance to the reader.

Attributes

This element only includes the global attributes.

Best Practices

• The <mark> element should be used only for highlighting important text, and not for entire paragraphs or pages. Overusing it can make the page look cluttered and distract the user from the content.
• Always ensure that the text enclosed within the <mark> tags has enough context to be easily understood by the user. For example, don't mark a word without providing some additional information about why it is important.
• The background color of the highlighted text should be visually distinct from the background color of the rest of the page, but should also be easy on the eyes. Avoid using bright or fluorescent colors that may be difficult to read.
• Different browsers may display the highlighted text differently, so it's important to test your code across multiple browsers to ensure that the <mark> element appears consistently across all platforms.
• While the <mark> element provides basic styling for highlighted text, it's recommended to use CSS to customize the appearance of the highlighted text to match your website's design.

Accessibility Considerations

• The background color used to highlight text should provide sufficient contrast with the foreground text color, making it easy for users with visual impairments to read the text. The WCAG recommends a contrast ratio of at least 4.5:1 between the background and foreground colors.
• If the highlighted text contains important information, ensure that the meaning is conveyed to users who cannot see the highlighted text. This can be achieved by providing alternative text (alt text) or an ARIA label to the <mark> element.
• Use semantic markup wherever possible to ensure that screen readers and other assistive technologies can properly interpret the content. For example, use <p> for paragraphs, <h1>-<h6> for headings, and so on.
• Overuse of the <mark> element can make it difficult for users to distinguish important content from the rest of the page. Use it only where necessary and provide additional context when appropriate.
• Test your content with assistive technologies such as screen readers to ensure that the highlighted text is conveyed correctly to users with disabilities.

Browser Compatibility