CodesBeautify

HTML Mark Text Generator

Wrap a sentence, or only the words you list, in mark tags for a highlighter pen effect.

HTMLwhole sentence highlighted
<p><mark>The refund window closes on 30 April, so send the request before then.</mark></p>
Runs locally in your browser

About the HTML Mark Text Generator

The <mark> element means text made relevant by something outside the document itself. The original use case is a search results page where the query terms are picked out in the snippet, and the same logic covers a legal passage the reader has been asked to check or the line in a log that explains a failure. Browsers render it as black text on yellow by default.

Leave the word list empty and the whole sentence is wrapped. Fill it in and only those terms are marked, with the rest of the text untouched. Whole words only is on by default, so highlighting form does not also colour the middle of information; switch it off for stem matching. Case sensitivity is off, which is usually right for search terms. The text is escaped before the tags are inserted, so a marked passage containing an ampersand or a bracket stays valid, and the tool tells you when none of your words appear rather than quietly returning the sentence unchanged.

Keep it semantic. If a phrase is important rather than merely relevant right now, <strong> is the honest element and this one is not a general purpose yellow background. The default colour also fails contrast checks in some themes, so the optional CSS sets a softer yellow and inherits the text colour, and dark mode deserves its own rule. For a different kind of stress, see the HTML Emphasize Text Generator.

How to use

  1. Paste the sentence or passage.
  2. List the words to highlight, or leave it blank to mark everything.
  3. Adjust whole word and case sensitivity matching.
  4. Tick the CSS box for a softer highlight colour, then copy.

Common questions

What does the mark element actually mean?
Text that is relevant because of something outside the document, such as a search term in a result snippet or a passage the reader was asked to review.
Why did nothing get highlighted?
None of your listed words were found. Check the spelling, or turn off whole words only if you are matching part of a word.
Can I change the highlight colour?
Yes, style the mark element in CSS. The optional rule here sets a softer yellow and keeps the inherited text colour.
Should I use mark instead of strong?
Only for relevance in the current context. Lasting importance belongs in strong.