HTML <mark> Tag

 

Wednesday, August 13, 2014

❰mark❱ to highlight search terms and mark other text. ❰mark❱ description, syntax, usage, attributes and examples. HTML-5.com is a great guide for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <mark> Tag in HTML 5

The <mark> tag can be used to temporarily highlight a fragment of text from another source that was not necessarily highlighted by the original author. For example, a search engine might highlight the words on a web page that match the user's search terms or perhaps you want to point out some specific words in a quotation. The mark element is one of the phrase elements in HTML.

back to top

<mark> Tag Syntax

<body>
   ...
   ... phrasing content expected ...<mark>... phrasing content ...</mark>...
   ...
</body>
Rules for coding HTML mark elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Code the mark element where phrasing content is expected.
  2. Begin the mark element with a starting <mark> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <mark> tag as appropriate.
  4. Inside the mark element, between the starting <mark> tag and the ending </mark> tag, code the inner HTML phrasing content.
  5. End the mark element with a matching </mark> closing tag.
Content Model
Content of the mark element

The content of the mark element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

Dynamically inserting a <mark> tag
  • If a starting <mark> tag and ending </mark> tag are inserted in the inner HTML of two different HTML elements, end those elements with the appropriate ending tags before the <mark> tag(s) and start them again after the <mark> tag(s). See the <mark> tag example below.

back to top

<mark> Tag Attributes

Attributes of the <mark> tag
global attributes In addition to the personal attributes of the <mark> tag below, any of the common HTML attributes can also be coded.

back to top

<mark> Tag Examples

Examples of the mark tag in HTML 5
<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>

<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>&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>

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

back to top

Changes in HTML 5 - <mark> Tag

What's new in HTML 5

The <mark> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <mark> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the mark element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

back to top

Valid HTML 5