By Alligator and Matt Abrams
mark
is a new semantic element that you can use to mark/highlight text that’s relevant to a given context. This tutorial reviews the mark
element’s implementation.
mark
ElementA good example of when one might use the mark
elements would be to highlight keywords in search results.
Let’s say for example that we searched for “dog”:
<p>
Tell your <mark>dog</mark> to behave!
</p>
It’s up to you to style the mark element as you see fit. For example:
mark {
background-color: rgba(107, 183, 86, 0.95);
border-bottom: 2px solid rgb(65, 118, 50);
}
This is a basic use case and implementation of the mark
tag.
Note that <mark>
is unlike <em>
or <strong>
in that it doesn’t add importance or emphasis to the highlighted content, which makes its use limited to only a few use cases.
For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
Supporting the open-source community one tutorial at a time. Former Technical Editor at DigitalOcean. Expertise in topics including Ubuntu 22.04, Ubuntu 20.04, CentOS, and more.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.