Code has been added to clipboard!

Make HTML Highlight Text Using mark Tags

Reading time 1 min
Published Jun 29, 2017
Updated Oct 2, 2019

HTML Highlight Text: Main Tips

  • HTML mark tags are used to highlight important portions of text.
  • It was newly introduced in HTML5.
  • You must use both starting and ending HTML highlight text tags.

Using mark Tags

To make HTML highlight text, you need to surround it with <mark> tags:

Example
<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>

Understanding how to highlight text in HTML comes in handy when you need to convey that some content has more relevance than the rest. The most common case of using it is highlighting search results.

The browser will display the content of HTML mark tags using these CSS settings:

Example
mark { 
    background-color: yellow;
    color: black;
}

Note: most screen readers don't announce the presence of HTML mark element by default. You can change it using the CSS content property.

Browser support

Chrome
All
Edge
All
Firefox
4+
IE
9+
Opera
11+
Safari
All

Mobile browser support

Chrome
All
Firefox
4+
Opera
All
Safari
All
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>