Introduction
Historically, web authors have used font properties and CSS styles to highlight sections in the web pages. There was no uniformity in how web author went about their “highlighting” business. Sensing a requirement to bring uniformity, HTMl5 specification introduced a new markup element “mark” for marking text on web pages.
The HTML5 specification says…
The HTML5 specification defines the “mark” element as an element which represents a run of text in one document marked or highlighted for reference purposes. Mark element is used to tag content which has relevance.
Source: http://dev.w3.org/html5/markup/mark.html
“mark” element can be used in one or more of the following scenarios
The “mark” element is a type of phrasing content element. Any phrasing element can be the parent of a “mark” element, and all global attributes are permitted.
Unlike a few other phrasing elements, “mark” element must have both a start tag as well as an end tag.
“Mark” element supports the following default display properties:
Background-color – Which defines the color of the background, default is yellow
Color: which defines the color of the text, default is black.
mark {
background-color: yellow;
color: black; }
Hands On
Let us look at the source code of a simple HTML5 page which shows the “mark” element.
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<title>Mark element sample</title>
<body>
<article>
<header>
<h1>Mark element sample</h1>
<p>Demo showing <mark>mark</mark> element in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
</body>
</html>
When the above code is rendered in a browser which understand HTML5 (latest versions of browsers do), you will notice that the “mark” element is highlighted in yellow.
If we want to customize the default look of the “mark” element, we can define it under a style section in the web page.
//Listing 2
<!DOCTYPE html>
<html>
<meta charset=“utf-8”>
<title>Mark element sample</title>
<body>
<article>
<header>
<h1>Mark element sample</h1>
<p>Demo showing <mark>mark</mark> element in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<style>
mark {
background-color: red;
font-weight: normal;
font-style: normal;
}
</style>
</body>
</html>
In the above HTML, we has changed the default background-color to red, so now, when the page is rendered, it appears as under.
We have seen how easy it is to highlight sections in your webpage using the “mark” element.
Summary
In this article, we learned how to use the mark element in HTML5 web pages. I hope you have found this information useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
