HTML <mark> Tag
Our goal in this chapter is to cover the learning requirements by studying Tag mark with examples.
The HTML <mark> tag is used to highlight text within a document or web page. When you wrap text in the <mark> tag, it will be displayed with a yellow background color by default, indicating that it is highlighted.
A text can be highlighted in the following ways:
Example:
Here is another example of the mark tag:
Example:
The mark tag also be style by using CSS properties:
Example:
Tag mark Usage
A Tag mark <mark> specifies the content that shall be highlighted or marked.
Here are some common uses for the <mark> tag:
- You can use the <mark> tag to draw attention to important information or to highlight key points in a document, making it easier for users to find and understand.
- When quoting text from another source, you can use the <mark> tag to indicate the portion of text that you are highlighting or referencing.
- The <mark> tag can be used to highlight search terms or keywords within search results, making it easier for users to find the information they are looking for.
- When adding notes or annotations to a document, you can use the <mark> tag to highlight the specific text that the note pertains to.
- When editing or proofreading text, you can use the <mark> tag to highlight sections of text that need to be revised or corrected.
Attributes
Global
The Tag mark <mark> is also compatible with Global Attributes in HTML.
Event
The Tag <mark> is also compatible with Event Attributes in HTML.
Pre Defined CSS
The following values are set by default for the <mark> element in almost all browsers:
mark {
background-color: yellow;
color: black;
}Browser Compatibility
Numbers in the table indicate which browser version was the earliest to include the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <mark> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
HTML <mark> Tag Benefits
Here are some benefits of using the <mark> tag:
- The <mark> tag provides visual cues for users who rely on screen readers or other assistive technologies to navigate the web.
- By highlighting important text, the <mark> tag makes it easier for users to quickly scan and understand the content on a page.
- Search engines use the <mark> tag to identify and rank important keywords on a page, which can improve the page’s visibility in search results.
- The <mark> tag can be styled using CSS to match the design of a website, allowing developers to create visually appealing and effective highlighting.
