How to Highlight Text in WordPress (in 2026)Step-by-Step Tutorials on Highlighting Text in Gutenberg (Modern + HTML Methods) and Classic Editor

Today, we’re talking about how to HTML highlight text in WordPress (in both the Gutenberg editor and Classic editor), to get a highlighted result like this:

Here’s an example of highlighted text.

As a new blogger when you’re just getting your blog off the ground, all of the little technical components of learning WordPress can be a bit of an unwelcome challenge—for example, figuring out things like how to highlight text in WordPress, (or change font colors and font sizes) for the various different text elements on your WordPress blog.

Well, the good news is that highlighting text in WordPress has gotten much easier over the years. As of 2026, Gutenberg (the default WordPress block editor) has a built-in toolbar option for highlighting text in just two clicks — no HTML required. We’ll cover that modern toolbar method first, then the HTML approach (which still works and is useful when you want a custom highlight color or need to do it in the Classic editor).

I’ll show you three ways to highlight text in WordPress: (1) the modern Gutenberg toolbar method (fastest, recommended), (2) the HTML method in Gutenberg (for custom colors or advanced control), and (3) the HTML method in the Classic editor (for those still using it).

Now, let’s walk through highlighting text in WordPress—without performance draining plugins that negatively impact your blog SEO and page load speeds.

How to Highlight Text in WordPress (Gutenberg and Classic Editor) in 2026

1. How to Highlight Text in Gutenberg (Modern Toolbar Method)
2. How to HTML Highlight Text in Gutenberg (Advanced / Custom Colors)
3. How to HTML Highlight Text in the Classic WordPress Editor
4. When to Highlight Text on Your WordPress Blog (and Why)
5. FAQ

Alright, now let’s dive in and talk about highlighting text in WordPress!

1. How to Highlight Text in Gutenberg (Modern Toolbar Method)

This is the easiest and fastest way to highlight text in WordPress — added natively to Gutenberg in WordPress 5.8 (mid-2021) and refined since. It takes about 5 seconds and requires zero HTML knowledge.

Here’s the 3-step process:

Step 1: Select the text you want to highlight. Just click and drag with your cursor inside a paragraph block (or heading block — it works on both).

Step 2: Click the small arrow at the right end of the inline formatting toolbar that appears above your selected text. This opens the additional formatting options dropdown.

Step 3: Click “Highlight” from the dropdown menu, then pick a background color from the color swatches.

That’s it. Your selected text now has a colored highlight applied — visible immediately in the editor with no HTML editing required. You can also re-select highlighted text later and click the same option to change the color or remove the highlight entirely.

Pro tip: If you want the same highlight color across multiple posts (like a brand-consistent yellow highlight for callouts), most modern WordPress themes let you define custom color swatches in your theme settings — which then show up in the highlight color picker, so you don’t have to remember hex codes.

The toolbar method is perfect for 95% of highlight use cases. If you want something more advanced — a custom color not in your theme palette, a highlight on inline code, or you’re still on the Classic editor — keep reading for the HTML methods below.

2. How to HTML Highlight Text in Gutenberg (Advanced / Custom Colors)

The (best) process for highlighting text in both the Gutenberg and Classic editors, is actually exactly the same from a technical standpoint—it just looks a bit different, due to the visual changes in Gutenberg vs the Classic editor.

In both cases, you’ll be adding a background color HTML style attribute to the text you want to highlight.

That’s by far the cleanest, easiest and most performance-friendly way to highlight text in WordPress (without the need for installing plugins or using other tools that inject unnecessary code into your blog). So, let’s walk through this process.

Here’s a quick GIF (looped video demonstration) showing how to highlight text in the Gutenberg WordPress editor:

I know this GIF moves a little quickly (and isn’t easy to read on mobile devices). So, here’s a step-by-step tutorial on highlighting text in WordPress using the Gutenberg editor (in 2 easy steps):

1. Select the “Edit as HTML” option in the paragraph where your text is contained

Once you’ve clicked on the “Edit as HTML” option, you’ll see your paragraph of text converted into something that looks like this (with all of the HTML attributes of your text now visible):

From here, this is where you’ll now add the background color style attribute (into the HTML version of your paragraph) which will highlight your text.

2. Add the background color style attribute (in HTML mode) to highlight your text

This is the step that actually highlights your text, by adding this background color style attribute to the beginning your text:

<span style="background-color: #fdf2d0;">example of text you want to highlight</span>

Know that you can of course swap out the color code here for any 6-digit hex code or HTML color name you want to use as your highlight color—and you’re all set!

Don’t forget to wrap up the portion of text you want highlighted with a closing </span> tag (as pictured in the screenshot above)—otherwise the rest of the text in your paragraph here will automatically become highlighted.

Once you’ve finished highlighting your text, just switch back to “Edit Visually” in the Gutenberg editor like so:

Now, your text will be highlighted, and it’ll look like this:

Alright, you’ve now learned how to highlight text in the Gutenberg WordPress editor—so let’s walk through doing the same thing with the Classic editor.

3. How to HTML Highlight Text in the Classic WordPress Editor (Legacy)

Note for 2026: The Classic Editor is now a legacy choice — it’s been a plugin (not bundled with WordPress core) since 2018, and Gutenberg has matured significantly. If you’re starting a fresh site in 2026, we recommend Gutenberg. But the Classic Editor still works and is officially supported through at least 2027, so if you’re using it, here’s how to highlight text.

If you’re writing a blog post in the Classic WordPress editor and want to emphasize a particular section of text by highlighting it — it’s just as easy as the HTML method in Gutenberg.

Here’s a quick GIF (looped video demonstration) showing how to highlight text in WordPress via the Classic editor:

Because that GIF moves pretty quickly and isn’t as easy to see on mobile as it is on desktop, here’s a step-by-step breakdown of what’s happening when you want to highlight text in WordPress using the Classic editor (in 2 easy steps):

1. Use your cursor to select the text you want to highlight

Once you’ve selected the text you want to highlight, it’s time to switch your editing mode over to “Text Mode” in the upper right hand corner over your editing pane:

Now, you’ll be viewing the HTML version of your blog post—and this is where you’ll add in the attribute that highlights your text.

2. Add a background color HTML style attribute (in text mode) to highlight your text

This is where you’ll actually be highlighting your text, by adding the following background color style attribute to your text:

<span style="background-color: #fdf2d0;">example of soon-to-be highlighted text</span>

Like in the Gutenberg tutorial above, you can also swap out the color code here to set any custom highlight color for your text.

Just remember to close out the portion of text you want highlighted with a closing </span> tag, otherwise you’ll highlight the rest of your content in the post (from where you started the background color change).

Now once you switch back to “Visual Mode” in your Classic Editor, here’s what that highlighted text will look like:

example of highlighted text

And voilá! You’ve highlighted your text in the Classic Editor! 👏

Final Thoughts: When Should You HTML Highlight Text in WordPress (and Why)?

Now that I’ve spent a few minutes showing you how to highlight text in WordPress… we haven’t yet touched on why you’d want to highlight text in the first place, and when the application of highlighted text can actually have a positive impact on the content of your blog.

Here are a few of the reasons why I highlight text within my blog content:

• To draw the reader’s attention to a very important takeaway or lesson
• To make a particular word or sentence stand out visually on the page
• To emphasize that the text is clickable (like a call-to-action)

Alright, that’s all for today!

You just learned how to highlight text in WordPress (both in the Gutenberg editor and Classic editor)—and how to use highlighted text to your advantage.

Like what you see? Sign up to get more technical tutorials and authentic blogging advice from me.

Highlighting Text in WordPress: Frequently Asked Questions

Want More Blogging Tutorials Delivered Straight to Your Inbox?

Sign up today and you’ll join 122,843 other smart bloggers getting my best blogging advice.