Highlight HTML content for reference purposes

The <mark> tag is used to mark or highlight the text in HTML. It is one of the new tags used in HTML5.

  • It supports global and event attributes.

  • we can include <mark> tag in between the statement also, like −

<p>I play with <mark> Coding</mark> </p>

Syntax

Following is the syntax of <mark> tag in HTML document −

<mark> Contents... </mark>

Example

In the following HTML example, we are trying to print some text and highlighting it using the <mark> tag in HTML -

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: blue;">TutorialsPoint</h1>
   <h2>Using Mark Tags</h2>
   <p>
      <mark>TutorialsPoint:</mark> is a leading <mark>Ed Tech company</mark> Where all computer related Courses are provided.
   </p>
</body>
</html>

Applying CSS to <mark> tag

Many browsers display the <mark> element by applying some default values.

Syntax

Following is the syntax of style in HTML −

mark { 
   background-color: orange;
   color: black;
}

Example

In this example we are trying to mark the content in a document using CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      mark {
         background-color: orange;
         color: black;
      }
   </style>
</head>
<body>
   <p>A mark Display's Like This:</p>
   <mark>TutorialsPoint:</mark> is a leading <mark>Ed Tech company</mark>
   <p>Where all computer related Courses are provided.</p>
   <p>TO see effects, <mark>change the default CSS settings.</mark></p>
</body>
</html>

Example

Following is another example −

<!DOCTYPE html>
<html>
<head>
   <style>
      mark.orange {
         background-color: orange;
         color: white;
      }

      mark.pink {
         background-color: pink;
      }

      mark.lime {
         background-color: lime;
      }
   </style>
</head>
<body>
   <p>A mark Display's Like This:</p>
   <mark class="pink">TutorialsPoint:</mark> is a leading <mark class="orange">Ed Tech company</mark>
   <p>Where all computer related Courses are provided.</p>
   <p>TO see effects, <mark class="lime">change the default CSS settings</mark>. </p>
</body>
</html>
Updated on: 2023-10-10T14:19:01+05:30

336 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements