<span> Tag Examples
Examples of the span
tag in HTML 5
Using the <span> tag for syntax highlighting
(see <span> tag demo above)
<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"><</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">"></span></code><br/> Incorrect: <code class="incorrect"><span class="delimiter"><</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">></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.