HTML - <mark> Tag

The HTML <mark> tag is used to mark or highlight text that is important for notation purposes due to the marked passage’s relevance in the enclosing context.

By default, the <mark> tag highlights the text in the yellow background, and this tag is new in HTML 5.

Don’t use the <mark> tag for syntax highlighting purposes; instead of <mark>, we can use the <span> tag with appropriate CSS applied to it.

Syntax

Following is the syntax of <mark> tag −

<mark> .... </mark>

Example

In the following example, we are creating an HTML document and demonstrating the usage of the <mark> tag as follows −

<!DOCTYPE html>
<html>
<body>
   <blockquote> It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. </blockquote>
</body>
</html>

When we run the above code, it will generate an output consistng of the text displayed on the webpage.

Example

Considering the following example, we are using the <mark> tag with CSS properties to change the marked content's color and other properties.

<!DOCTYPE html>
<html>
<head>
   <style>
      mark {
         font-style: italic;
         background-color: green;
      }
   </style>
</head>
<body>
   <blockquote> It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's ultimate weapon, the DEATH STAR, an armoured space station with enough power to destroy an entire planet. </blockquote>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with a CSS applied to it on the webpage.

html_tags_reference.htm
Advertisements