<mark> tag inserted to highlight search terms in search results

Original content:

<p>&lt;a&gt; tag example:
<code>&lt;a href="<i>target url</i>"&gt;<i>link text</i>&lt;/a&gt;</code></p>

With <mark> inserted in search results:

<p>You searched for "<mark>url link</mark>"</p>
<p>1 result:</p>
<p>&lt;a&gt; tag example:
<code>&lt;a href="<i>target </i><mark><i>url</i>"&gt;<i>link</i></mark><i> text</i>&lt;/a&gt;</code></p>

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;
}