<mark> Tag Examples
Examples of the mark
tag in HTML 5
<mark> tag inserted to highlight search terms in search results
Original content:
<p><a> tag example: <code><a href="<i>target url</i>"><i>link text</i></a></code></p>
<a> tag example:
<a href="target url">link text</a>
With <mark> inserted in search results:
<p>You searched for "<mark>url link</mark>"</p> <p>1 result:</p> <p><a> tag example: <code><a href="<i>target </i><mark><i>url</i>"><i>link</i></mark><i> text</i></a></code></p>
You searched for "url link"
1 result:
<a> tag example:
<a href="target url">link text</a>
The mark element is inserted to highlight the search terms by adding a starting <mark> tag between target and url and adding an ending </mark> tag between link and text. Since those locations are within the inner HTML of different elements that use the <i> tag to display the variables in an italic font, the i elements must each be split into two elements by adding an ending </i> tag and a new starting <i> tag on either side of the inserted <mark> tags. However, since the inserted mark element is entirely within a single code element, no additional <code> tags need to be added.
Chrome renders the text inside the mark element with a yellow background. For consistency in other browsers, the same look can be accomplished with a style using the background-color property:
mark { background-color: #ffff00; }