Add Mark Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the mark tag in HTML.
What is Mark Tag in HTML
In HTML, the mark tag is used to highlight or mark a section of text as important or relevant. The marked text is typically highlighted in yellow by default, but this can be customized with CSS.
The syntax for the mark tag is straightforward. It requires an opening and closing mark tag, and the text that needs to be marked in the document is placed between these two tags.
Here's an example of how to use <mark> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mark Tag Example</title>
</head>
<body>
<p>
In computer programming, a <mark>variable</mark> is a value that can change, depending on conditions or on information passed to the program.
</p>
</body>
</html>Attributes of Mark Tag
Here are the attributes we can use with the mark tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the mark tag and use it to apply a specific style to that particular tag.
Example
<p>This is an <mark id="mtext">important</mark> text.</p>In the above example, we assign an id attribute to the mark tag with a value mtext. In CSS and JavaScript, we can use the name mtext to access the specific mark tag whose id value is set to the name mtext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the mark tags and use it to apply a specific style to all the mark tags that belong to a particular class.
Example
<p>This is an <mark class="info">important</mark> text.</p>
<p>This is another <mark class="info">imported</mark> text.</p>In the above example, both mark tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both mark tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the mark tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>This is an <mark style="background-color: green; color: white">important</mark> text.</p>The style="background-color: green; color: white" will change the background color of the mark tag to green and its font color to white.
title
The title attribute can be used to add a tooltip or additional information to the mark tag, which will only appear when the user places the mouse cursor on the marked text.
Example
<p><mark title="He is also known as the father of WWW (World Wide Web)">Tim Berners-Lee</mark> created HTML in 1993.</p>