Understanding the <mark> Tag in HTML5
The <mark> tag is an inline HTML5 element used to highlight or mark text that holds special relevance or importance within a given context. By default, browsers render the <mark> element with a yellow background and black text, drawing attention to the enclosed content.
Basic Usage
To highlight a portion of text, simply wrap it with the <mark> tags:
<p>This is a <mark>highlighted</mark> word.</p>Styling the <mark> Tag with CSS
While the default yellow highlight is standard, you can customize the appearance of the <mark> tag using CSS to better fit your website's design:
mark {
background-color: lightgreen;
color: black;
}Alternatively, you can define a custom class and apply it to the <mark> tag:
.custom-mark {
background-color: lightblue;
color: black;
padding: 2px 4px;
border-radius: 3px;
}Then, apply the class to the <mark> tag:
<p>This is a <mark class="custom-mark">custom highlighted</mark> word.</p>Rendered Output:
This is a custom highlighted word.
Rendered Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 <mark> Tag Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
text-align: center;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: auto;
}
mark {
background-color: yellow;
color: black;
padding: 2px 4px;
border-radius: 3px;
}
.custom-mark {
background-color: lightblue;
color: black;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h2>Using the HTML5 <mark> Tag</h2>
<p>
The <mark><mark></mark> tag highlights text that has special relevance in a document.
</p>
<h3>Default Highlighting</h3>
<p>This is a <mark>highlighted</mark> word using the default style.</p>
<h3>Custom Highlighting with CSS</h3>
<p>This is a <mark class="custom-mark">custom styled highlight</mark> using CSS.</p>
</div>
</body>
</html>
Practical Use Cases
- Search Results Highlighting: Emphasize search terms within displayed results to show relevance.
- Review Comments: Highlight specific feedback or important notes within content reviews.
- Educational Content: Draw attention to key terms or concepts within educational materials.
Accessibility Considerations
While the <mark> tag visually highlights text, it's essential to ensure that this emphasis is conveyed to all users, including those using screen readers. By default, some screen readers may not announce the presence of the <mark> tag. To address this, you can use CSS pseudo-elements to provide additional context:
mark::before,
mark::after {
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
mark::before {
content: "[highlight start] ";
}
mark::after {
content: " [highlight end]";
}This approach ensures that screen readers announce the highlighted sections appropriately, improving accessibility.
SEO Considerations
Using the <mark> tag can enhance user experience by drawing attention to relevant content, potentially increasing engagement metrics like time on page. However, it's crucial to use this tag judiciously to avoid overuse, which can diminish its effectiveness and potentially lead to a negative user experience.
Conclusion
The <mark> tag is a valuable tool in HTML5 for highlighting text that holds special relevance within a document. By understanding its default behavior, customizing its appearance with CSS, and considering accessibility and SEO implications, developers can effectively use the <mark> tag to enhance content readability and user engagement.
HTML5 Tags Types of HTML tags