Now what if you want to highlight or bring attention to a section of text in-order to indicate that it is relevant to the user. For instance, lets say that you are looking at a list of search results, you will sometimes see the search term or terms highlighted within each search result. In the past you would have used a <span> element with some CSS applied to it in-order to achieve the highlighted effect, which is semantically meaningless. HTML5, however introduced us to a new element called the <mark> element, which actually gives semantic value to the contents of the <mark> element.
Now the <mark> element, which is an inline element that highlights or marks a selection of text for reference purposes or for the purpose of bringing it to the attention of the user, due to its relevance in another context. Marked text is considered to be of particular relevance or importance to the user. The <mark> element requires both a start tag and an end tag.
The <mark> element can contain the phrasing element's, like for instance the <a>, <span> and <img> element's.
The <mark> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?".
As of this writing the browsers Chrome version 9.0.597.107 and up as well as Firefox version 4.0 are the only browsers that support the <mark> element. When the <mark> element is rendered in the supported browsers Chrome version 9.0.597.107 and up as well as Firefox version 4.0, a yellow background is displayed for the <mark> element's contents.
Here is how to code the <mark> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <p>Give me all your <mark>money</mark> when you get your check!</p> </body> </html>
And here is how to code the new <mark> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <p>Give me all your <mark>money</mark> when you get your check!</p> </body> </html>
