Pub Pixel Avatar Image

How To Highlight Or Mark Text In Your Web Pages With HTML5

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1024

First Published:

Word Count: 470

Edition: 1

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>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.