How to Highlight Text using Mark tag in HTML
Table of Contents
HTML has a lot of useful and unique tags that help you bring semantic meaning to your markup.
One of these tags is the
<mark> tag, which is used to highlight text so you can differentiate it from the rest of the content.
In this post, we'll learn how to use the
<mark> tag to highlight text in HTML.
How to Highlight Text in HTML using the mark tag
As mentioned before, you can surround text with the
<mark> tag to highlight it.
Let's look at an example of text without the
<p>My favorite color is yellow.</p>
The above code will render as:
Now, let's add the
<mark> tag to the text:
<p>My favorite color is <mark>yellow</mark>.</p>
Here's how that looks:
As you can see, the
<mark> tag highlights the text in yellow by default.
How to Style the Mark Tag
<mark> tag is tag just like any other HTML tag, so you can style it using CSS.
Here's how you can change the default yellow background color to red:
In this post, we learned how to highlight text in HTML using the
Simply wrap the text you want to highlight with the
<mark> tag, and you're good to go.
If you want to change the default yellow background color, you can do so using CSS by targeting the
Thanks for reading!
- Managing PHP Dependencies with Composer
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to build a Discord bot using TypeScript
- How to deploy a Deno app using Docker
- Getting Started with Sass
- How to Scrape the Web using Node.js and Puppeteer
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting Started with Moment.js
- Creating a Twitter bot with Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Using Axios to Pull Data from a REST API