<div id="span-tag-demo">
<style scoped="scoped">
.syntax-highlighting .correct {
   text-decoration: none;
}
.syntax-highlighting .incorrect {
   text-decoration: line-through;
   color: #ee0000;
}
.syntax-highlighting mark {
   font-weight: bold;
}
.syntax-highlighting .delimiter {
   color: #000000;
}
.syntax-highlighting .tag {
   color: #0000ff;
}
.syntax-highlighting .attribute-name {
   color: #009900;
}
.syntax-highlighting .attribute-value {
   color: #006666;
}
.syntax-highlighting mark {
   background-color: #ffff00;
}
</style>
<p class="syntax-highlighting">
Correct: <code class="correct"><span class="delimiter">&lt;</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">="</span><span class="attribute-value">3</span><span
class="delimiter">"&gt;</span></code><br/>
Incorrect: <code class="incorrect"><span class="delimiter">&lt;</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">=</span><mark><span class="delimiter">'</span><span
class="attribute-value">3</span><span class="delimiter">"</span></mark><span
class="delimiter">&gt;</span></code>
</p>
</div>

The mark element is inserted to highlight the incorrect code by adding a starting <mark> tag between the = and the incorrect ' and adding an ending </mark> tag between the " and the >. Since those locations are within the inner HTML of different span elements, each of those elements must be split into two elements by adding an ending </span> tag and a new starting <span> tag on either side of the inserted <mark> tags.

Chrome renders the text inside the mark element with a yellow background. For consistency in other browsers, the background-color property is specified for the mark element.