HTML5 <mark> Element
The <mark> element contains text which has been marked or highlighted to show it has relevance in another context i.e. to bring the users attention to this run
of text because it has relevance to his or her current activity.
Another example of when the <mark> element is appropriate is to highlight a run of text which wasn't relevant when first written but which, in the light
of subsequent actions or constraints, has become relevant.
It could be used to highlight words in a document which match words in a user search, or parts of a text that are relevant to the subject a student is learning at that particular time.
The <mark> element in action.
In the following example a search has been made for the word chihuahua and the matching words have been placed inside <mark> elements.
Code:
Result:
The chihuahua originates from Mexico and although small in stature chihuahuas are known to have large personalities.
As you can see if using Chrome, Firefox or Safari the text is given a yellow background - also shown in IE9 onwards, but the <mark> element is ignored by IE8 or
earlier.
The text colour is also set to black - not so obvious in the first example but illustrated in the following result where the paragraph text has been given a default colour of fuschia:
The chihuahua originates from Mexico and although small in stature chihuahuas are known to have large personalities.
NOTE: This element does not add importance to the text contained it only shows relevance - if you wish to highlight important text then use the <em> or
<strong> elements.