mozilla

Revision 26208 of <mark>

  • Revision slug: HTML/Element/mark
  • Revision title: mark
  • Revision id: 26208
  • Created:
  • Creator: Pbb
  • Is current revision? No
  • Comment 6 words added, 2 words removed

Revision Content

{{ HTMLVersionHeader("5") }}

Summary

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched for word.

Usage notes: 

  • In a quotation or another block, the highlighted text typically marks text that is referenced outside the quote, or marked for specific scrutiny even though the original author didn't consider it important.
  • In the main text, the highlighted text typically marks text that may be of special relevance for the user's current activity, like search results.
  • Do not use the <mark> element for syntax highlighting; use the {{ HTMLElement("span") }} element for this purpose.
  • Do not confuse the <mark> element with the {{ HTMLElement("strong") }} element. The {{ HTMLElement("strong") }} element is used to denote spans of text of special importance, when the <mark> element is used to denote spans of text of special relevance.

Usage context

Permitted content Phrasing content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts phrasing content.
Normative document HTML5, section 4.6.17

Attributes

This element has no other attributes than the global attributes, common to all elements.

DOM Interface

This element implements the HTMLElement interface.

Examples

<p>The &lt;mark&gt; element is used to <mark>highlight</mark> text</p> 

Result

The <mark> element is used to <mark>highlight</mark> text

Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 9.0 11.0 {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • Other text-level semantics elements: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("b") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<h2>Summary</h2>
<p>The <em>HTML Mark Element</em> (<span style="font-family: Courier New;">&lt;mark&gt;</span>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its <em>relevance</em> in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched for word.</p>
<div class="note">
<p><em>Usage notes: </em></p>
<ul> <li>In a quotation or another block, the highlighted text typically marks text that is referenced outside the quote, or marked for specific scrutiny even though the original author didn't consider it important.</li> <li>In the main text, the highlighted text typically marks text that may be of special relevance for the user's current activity, like search results.</li> <li>Do not use the <span style="font-family: Courier New;">&lt;mark&gt;</span> element for syntax highlighting; use the {{ HTMLElement("span") }} element for this purpose.</li> <li>Do not confuse the <span style="font-family: Courier New;">&lt;mark&gt;</span> element with the {{ HTMLElement("strong") }} element. The {{ HTMLElement("strong") }} element is used to denote spans of text of special <em>importance</em>, when the <span style="font-family: Courier New;">&lt;mark&gt;</span> element is used to denote spans of text of special <em>relevance</em>.</li>
</ul>
</div>
<h3>Usage context</h3>
<table class="standard-table"> <tbody> <tr> <td>Permitted content</td> <td><a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">Phrasing content</a></td> </tr> <tr> <td>Tag omission</td> <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">phrasing content</a>.</td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element">HTML5, section 4.6.17</a></td> </tr> </tbody>
</table>
<h3>Attributes</h3>
<p>This element has no other attributes than the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</p>
<h3>DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<h3>Examples</h3>
<pre class="brush: html">&lt;p&gt;The &amp;lt;mark&amp;gt; element is used to &lt;mark&gt;highlight&lt;/mark&gt; text&lt;/p&gt; 
</pre>
<h4>Result</h4>
<p>The &lt;mark&gt; element is used to &lt;mark&gt;highlight&lt;/mark&gt; text</p><h3>Compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("2.0") }}</td> <td>9.0</td> <td>11.0</td> <td>{{ CompatVersionUnknown() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("2.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>See also</h3>
<ul> <li>Other <a href="/en/HTML/Text-level_semantics_elements" title="en/HTML/Text-level semantics elements">text-level semantics elements</a>: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("b") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li>
</ul>
Revert to this revision