Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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: 10-Oct-2023
201 Views
Advertisements