HTML5 <mark> Tag
Introduction to HTML5 <mark> Tag
जब एक writer किसी text को reader के लिए अतिमहत्वपूर्ण मानता है तो वह उसे highlight करता है। Writer के text को highlight करने से वह text user का ध्यान आकर्षित करता है। इससे reader को भी पता चल जाता है की पुरे text में highlight किया गया text महत्वपूर्ण है।
Web developers किसी text को highlight करने या फिर उस पर जोर देने के लिए <strong> और <em> जैसे HTML element को use करते रहे है। <strong> tag के प्रयोग से text bold हो जाता है और <em> tag के प्रयोग से text की style italic हो जाती है।
इन tags के अलावा text को highlight करने के लिए CSS को भी प्रयोग में लिया जाता रहा है। CSS के द्वारा text की advanced highlighting की जाती है। इसका एक उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
span{
background-color:yellow;
color:black;
}
</style>
</head>
<body>
<p>I like Best <span>Hindi</span> Tutorials</p>
</body>
</html>
ऊपर दिए गए उदाहरण में CSS द्वारा Hindi word को highlight किया गया है।
जैसा की आप देख सकते है text को highlight करने के कई options developer के पास available है लेकिन उसकी प्रासंगिकता (relevance) show करने का कोई भी option developers के pass नहीं था। प्रासंगिकता से मतलब उस text से है जो किसी तरह से original text के context में है।
इसके लिए HTML5 में <mark> tag introduce किया गया है। इस tag के द्वारा आप relevant text को highlight कर सकते है। उदाहरण के लिए यदि आप महात्मा गाँधी पर कोई article लिख रहे है तो महात्मा गाँधी के अलावा आप स्वतंत्रता संग्राम की कोई बात <mark> tag द्वारा present कर सकते है।
HTML5 specification में बताया गया है की <mark> tag को original article से referred किसी text के block जैसे की कोई paragraph में use किया जाता है जो original article में नहीं था लेकिन उसे article कि किसी बात पर जो देने के लिए use किया गया है।
साथ ही <mark> tag को document के लिए भी use किया जाता है उस सन्दर्भ में यह उस text को highlight करता है जो user की current activity से सम्बंधित है। इस प्रकार <mark> सिर्फ text को highlight करने के लिए नहीं बल्कि relevant information पर user का ध्यान आकर्षित करने के लिए use किया जाता है।
Syntax of HTML5 <mark> Tag
<mark> tag का general syntax निचे दिया जा रहा है।
<mark>text here</mark>
जैसा की आप ऊपर दिए गए syntax में देख सकते है starting और closing <mark> tags के बीच वह text लिखा जाता है जिसे आप mark करना चाहते है। By default <mark> tag के द्वारा mark किये गए text का background yellow और text color black होता है। लेकिन आप चाहे तो इसे CSS द्वारा change कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
mark
{
background-color:blue;
color:white;
}
Attributes of HTML5 <mark> Tag
<mark> tag का कोई भी element specific attribute नहीं है। लेकिन यह tag सभी global attributes (class, id) और event attributes (onmouseover, onclick आदि) को support करता है।
Example of HTML5 <mark> Tag:
<html>
<head>
<title>HTML5 mark Tag Demo</title>
<style>
mark
{
background-color:#75bfe3;
color:white;
}
</style>
</head>
<body>
<p>I like Best <mark>Hindi</mark> Tutorials</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output return करता है।
