Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Detect compatibility of the new HTML5 tag with jQuery.
Use the following to check the compatibility of the HTML5 tag <mark> with jQuery:
Method: Testing Default Styling
This method creates a <mark> element and checks if the browser applies the default yellow background color, indicating HTML5 support.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
function checkMarkTagSupport() {
var $myEL = $('<mark>');
$myEL.appendTo('body');
var bgColor = $myEL.css('backgroundColor');
// Check for yellow background (default for mark tag)
var isSupported = /rgb\(255, 255, 0\)/.test(bgColor) ||
/rgba\(255, 255, 0, 1\)/.test(bgColor);
$myEL.remove(); // Clean up
return isSupported;
}
var supported = checkMarkTagSupport();
$('#result').html('HTML5 <mark> tag supported: ' + supported);
</script>
</body>
</html>
Alternative Method: Feature Detection
A more reliable approach checks if the browser recognizes the element as a valid HTML element:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
function checkHTML5TagSupport(tagName) {
var element = document.createElement(tagName);
return element.toString() !== '[object HTMLUnknownElement]';
}
var markSupported = checkHTML5TagSupport('mark');
$('#result').html('HTML5 <mark> tag supported: ' + markSupported);
// Test the mark element
if (markSupported) {
$('body').append('<p>This text has <mark>highlighted content</mark> in it.</p>');
}
</script>
</body>
</html>
Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome 6+ | Yes | Full support |
| Firefox 4+ | Yes | Full support |
| Safari 5+ | Yes | Full support |
| IE 9+ | Yes | Full support |
| IE 8 and below | No | Requires polyfill |
Key Points
- The styling method relies on default browser CSS for the <mark> tag
- Feature detection is more reliable than style checking
- Always clean up test elements to avoid DOM pollution
- Modern browsers have excellent HTML5 support
Conclusion
Both methods effectively detect HTML5 <mark> tag support. The feature detection approach is more reliable as it doesn't depend on browser styling, making it the preferred method for production use.
Updated on: 2026-03-15T23:18:59+05:30
203 Views
Advertisements