HTML `<mark>` Element: Semantically Highlighting Important Text

Learn how to use the HTML `<mark>` element to semantically highlight important text sections in your web pages. This tutorial explains its purpose, demonstrates its usage, and shows how to customize its appearance using CSS, improving both the readability and accessibility of your content.

Using the HTML `<mark>` Element to Highlight Text

Understanding the `<mark>` Element

The HTML `<mark>` (marked) element is designed to highlight or mark up a section of text. This adds semantic meaning, improving both readability and accessibility for users. The primary purpose of the `<mark>` tag is to indicate that a portion of text is important or noteworthy, such as highlighting a search term. While browsers typically render marked-up text with a yellow background and black text for better visibility, you can customize the styling using CSS (Cascading Style Sheets). Using the `<mark>` tag is better than using a simple styling approach because it provides semantic context to the highlighted text.

Using the `<mark>` Element

To highlight text, simply place the text you want to mark within the opening and closing `<mark>` tags.

<p>Remember to buy <mark>milk</mark>!</p>

Browser Support for `<mark>`

The `<mark>` element is well-supported by all major modern browsers.

Default Styling and CSS Customization

Most browsers render the `<mark>` element with a yellow background and black text by default. You can easily customize this using CSS:

mark {
  background-color: lightblue;
  color: darkblue;
}