How to Underline Text in WordPress

Have you been trying to figure out how to underline text in WordPress but can't find an underline button? You're not alone. Many WordPress users are surprised when they discover that the Block Editor doesn't include a built-in underline option. This can be frustrating, especially if you want to highlight important words or improve the appearance of your content.

The good news is that underlining text in WordPress is still easy. You just need to know the right method. Whether you prefer using HTML, CSS or a simple keyboard shortcut, there are several ways to underline text depending on the editor you're using.

In this guide, you'll learn how to underline text in WordPress step by step. We'll also explain when you should use underlined text and share best practices to keep your content clear, professional, and easy to read.

What Does Underlining Mean in WordPress?

Underlining is a text formatting style that draws a horizontal line beneath selected text to make it stand out. It's commonly used to emphasize important information, highlight specific terms or indicate clickable links.

In WordPress, however, underlining works a little differently than in traditional word processors. The default WordPress Block Editor doesn't include a dedicated underline button because modern web design standards reserve underlined text primarily for hyperlinks. This helps visitors quickly recognize clickable content and improves the overall user experience.

Although the Block Editor doesn't include a built-in underline button, WordPress still supports underlined text through several alternative methods. You can use HTML tags, CSS styling or keyboard shortcuts in supported editors to underline text when needed.

Because of this flexibility, you can choose the approach that best matches your editing experience and website requirements.

Why Did WordPress Remove the Underline Button?

Many users assume the underline button was removed by mistake, but it was actually an intentional design decision.

Modern web design and usability guidelines recommend avoiding underlined text unless it's used for hyperlinks. Since most website visitors naturally associate underlined text with clickable links, using it for regular content can create confusion and reduce readability.

To encourage cleaner typography and a better user experience, the WordPress Block Editor doesn't include a built-in underline button by default. Instead, WordPress encourages using formatting options such as:

• Bold for highlighting important information.
• Italic for subtle emphasis.
• Headings to organize content.
• Lists to improve readability.
• Buttons or callouts for important actions.

That said, there are still situations where underlining is appropriate. If you need to underline text for educational content, documentation, legal notices, or design purposes, WordPress offers several ways to achieve it.

When Should You Underline Text?

Underlining should be used thoughtfully rather than applied throughout an entire article. When used correctly, it can draw attention to important information without distracting readers.

Good situations to underline text

• Important notices or warnings
• Educational examples
• Definitions or key terms
• Legal statements
• Printed worksheets or forms
• Content that requires visual emphasis

Avoid underlining

• Entire paragraphs
• Large headings
• SEO keywords only for ranking purposes
• Random sentences
• Navigation menus
• Text that isn't meant to look clickable

Remember that many visitors automatically assume underlined text is a hyperlink. If the text isn't clickable, excessive underlining can create confusion and negatively affect the user experience.

Which Method Should You Choose?

There isn't a single best way to underline text in WordPress. The right method depends on how often you need to underline text and how much control you want over the formatting.

Method	Difficulty	Coding Required	Best For
Keyboard Shortcut	Easy	No	Quick editing (supported editors only)
HTML	Easy	Basic HTML	Underlining individual words or sentences
CSS	Medium	Yes	Custom styling and advanced formatting

If you only need to underline text occasionally, HTML or keyboard shortcuts are usually enough. If you want greater control over the underline's appearance, CSS lets you customize properties such as color, thickness, and decoration style.

In the next section, we'll walk through each method step by step so you can choose the one that best fits your workflow.

Method 1: Underline Text in WordPress Using HTML

Using HTML is one of the easiest and most reliable ways to underline text in WordPress. WordPress supports basic HTML in both the Block Editor and Classic Editor, making this method ideal for beginners who only need to underline text occasionally.

There are two common ways to underline text using HTML.

Option 1: Use the <u> Tag

The simplest method is the HTML underline tag.

<u>This text will be underlined.</u>

Output:

Although the <u> tag is still supported in HTML5, it's generally recommended for stylistic annotations rather than general emphasis. Use it only when underlining genuinely improves the meaning of your content.

Option 2: Use Inline CSS

If you want greater flexibility, apply CSS directly to a <span> element.

<span style="text-decoration: underline;">This text will be underlined.</span>

Output:

This approach lets you combine underline styling with other CSS properties, such as color, thickness, or decoration style.

For example:

<span style="text-decoration: underline; color:#0d6efd;">Highlighted underlined text</span>

Output:

How to Add HTML in the Gutenberg Editor

Adding HTML in WordPress is straightforward. Open the page or post you want to edit. Select the paragraph or heading that contains the text. Click the three-dot menu (⋮) in the block toolbar.

Choose Edit as HTML.

Insert your HTML code.

Switch back to Edit Visually to preview the formatting.

Output:

Which HTML Method Should You Choose?

Method	Recommended	Customization	Beginner Friendly
<u> Tag	⭐⭐⭐⭐☆	Low	✅ Yes
text-decoration CSS	⭐⭐⭐⭐⭐	High	✅ Yes

For most users, the <u> tag is quick and easy.

If you need additional styling or want more control over the underline appearance, using text-decoration with CSS is the better option.

Common HTML Mistakes to Avoid

Even though HTML is simple, a few mistakes can prevent underlining from working correctly.

Avoid these common errors:

• Forgetting the closing </u> or </span> tag.
• Typing HTML in the Visual Editor instead of Edit as HTML.
• Nesting HTML tags incorrectly.
• Adding extra quotation marks inside the style attribute.
• Forgetting to preview the page after saving changes.

If your underlined text doesn't appear correctly, double-check the HTML syntax and clear your browser cache before testing again.

Method 2: How to Underline Text in WordPress Using a Keyboard Shortcut

If you're looking for the quickest way to underline text in WordPress, a keyboard shortcut is often the fastest option. However, it's important to understand that this method doesn't work in every WordPress editor.

The shortcut works in some rich text editors and certain plugins, but the default Gutenberg Block Editor doesn't officially support underlined text through a keyboard shortcut. If nothing happens after pressing the shortcut, you'll need to use one of the other methods explained below.

Keyboard Shortcuts

• Windows: Ctrl + U
• Mac: Command (⌘) + U

How to Use It

1. Open the page or post you want to edit.

2. Highlight the text you want to underline.

3. Press Ctrl + U (Windows) or ⌘ + U (Mac). If your editor supports underlining, the selected text will immediately become underlined.

Tip: If the shortcut opens your browser's "View Source" page instead of underlining the text, your editor doesn't support this feature. In that case, use the HTML method described above.

Advantages

• Extremely fast.
• No coding required.
• Great for editors that support underline formatting.

Limitations

• Doesn't work in the default Gutenberg editor.
• Browser shortcuts may override the command.
• Support varies depending on your editor or plugin.

Which Method Is Best?

Each method has its own advantages. The best choice depends on your experience level and how much control you need over the underline's appearance.

Method	Ease of Use	Flexibility	Best For
HTML	⭐⭐⭐⭐☆	⭐⭐⭐☆☆	Occasional underlining
CSS	⭐⭐⭐☆☆	⭐⭐⭐⭐⭐	Advanced styling and custom designs
Keyboard Shortcut	⭐⭐⭐⭐⭐	⭐⭐☆☆☆	Quick formatting (supported editors only)

Our Recommendation

To help you decide, here's our recommendation for different types of WordPress users.

• For beginners: Use the HTML <u> tag. It's simple, reliable, and works in both the Block Editor and Classic Editor.
• For advanced customization: Use CSS if you want to control the underline's color, thickness, spacing, or style.
• For quick edits: Use the keyboard shortcut only if your editor supports underline formatting.

Best Practices for Underlining Text in WordPress

Although underlining can draw attention to important information, it should be used carefully. Excessive underlining can make your content look cluttered and confuse visitors because underlined text is commonly associated with hyperlinks.

Follow these best practices to keep your content clean, professional, and easy to read.

1. Underline Text Only When Necessary

Reserve underlining for information that truly deserves attention, such as:

• Important notices
• Definitions
• Legal disclaimers
• Educational examples
• Key instructions

Avoid underlining large sections of text simply for decoration.

2. Avoid Underlining Non-Clickable Text Excessively

Most users expect underlined text to be a clickable link. If it isn't, visitors may become confused or repeatedly click on text that leads nowhere.

Instead of underlining, consider using:

• Bold
• Italic
• Highlighted callouts
• Headings
• Buttons

These formatting options often improve readability without misleading users.

3. Maintain Good Color Contrast

If you're using CSS to customize underlines, make sure they remain visible on both desktop and mobile devices.

Choose colors that complement your website's branding while providing sufficient contrast for readability.

4. Keep Underline Styles Consistent

Avoid using multiple underline styles throughout your website.

For example, don't mix:

• Thick underlines
• Dotted underlines
• Double underlines
• Colored underlines

unless there's a clear design reason.

Consistent styling gives your website a cleaner and more professional appearance.

5. Test on Different Devices

Always preview your page on:

• Desktop
• Tablet
• Mobile

Different WordPress themes may display underlined text slightly differently, so check that your formatting looks correct across devices.

6. Consider Accessibility

Make sure underlined text is easy to distinguish for all visitors, including people with visual impairments.

Avoid combining underlines with low-contrast colors, and follow accessibility best practices whenever possible.

Common Mistakes to Avoid

Even experienced WordPress users can make formatting mistakes. Avoiding these common errors will help keep your content clear, professional, and easy to read.

1. Using Underlines Instead of Links

Underlined text that isn't clickable can confuse readers because they often expect it to be a hyperlink.

If you're referring to another page or resource, use a proper hyperlink instead of simply underlining the text.

2. Underlining Entire Paragraphs

Large blocks of underlined text are difficult to read and reduce your content's visual hierarchy.

Underline only the words or phrases that genuinely need emphasis.

3. Forgetting to Preview the Page

Different WordPress themes may display underlined text differently.

Always preview your page before publishing to make sure the formatting looks correct.

4. Mixing Too Many Formatting Styles

Avoid combining multiple formatting styles in the same sentence, such as:

• Bold
• Italic
• Underline
• Highlight
• ALL CAPS

Too much formatting can overwhelm readers and reduce readability.

5. Ignoring Mobile Responsiveness

Text that looks good on a desktop may appear crowded or harder to read on smaller screens.

Always check your content on desktop, tablet, and mobile devices before publishing.

Frequently Asked Questions

1. Why was the underline button removed from WordPress?

WordPress doesn't include a dedicated underline button in the Block Editor because underlined text is widely recognized as a hyperlink. This helps improve readability and prevents visitors from confusing regular text with clickable links. However, you can still underline text using HTML, CSS, or keyboard shortcuts in supported editors.

2. How do I underline text in WordPress without a plugin?

The easiest way is to use HTML:

<u>Your text here</u>

Alternatively, you can use inline CSS:

<span style="text-decoration: underline;">Your text</span>

3. Can I underline text in the Gutenberg Editor?

Yes. Although the Gutenberg Block Editor doesn't include a built-in underline button, you can underline text by editing the selected block as HTML or by using inline CSS.

4. Does Ctrl + U work in WordPress?

It depends on the editor you're using. Some rich text editors support the shortcut, but the default Gutenberg Block Editor generally does not. In many browsers, Ctrl + U opens the page source instead of underlining text.

5. Can I underline text in Elementor?

Yes. Elementor lets you underline text using HTML, custom CSS, or typography settings where supported. You can also use custom CSS for more advanced underline styles.

6. Is underlining text bad for SEO?

No. Underlining text doesn't directly affect SEO rankings. However, excessive underlining can reduce readability and create a poor user experience, which may indirectly affect user engagement.

7. Which method is best for beginners?

For most beginners, the HTML <u> tag is the easiest and most reliable option. It works in both the Block Editor and Classic Editor and requires only basic HTML knowledge.

8. Can I customize the underline style?

Yes. CSS lets you customize the underline's color, thickness, style, and spacing using properties such as text-decoration-color, text-decoration-thickness, and text-underline-offset.

9. Why isn't my underlined text showing correctly?

This can happen because of theme styles, CSS conflicts, or browser caching. Double-check your HTML or CSS, clear your browser cache, and preview the page in a different browser to troubleshoot the issue.

10. Should I underline headings?

Generally, no. Headings should rely on typography, spacing, and font weight rather than underlines. Reserve underlining for specific words or phrases that genuinely require emphasis.

11. What's the difference between HTML and CSS underlining?

HTML is best for quickly underlining individual words or phrases using the <u> tag. CSS provides greater control by allowing you to customize the underline's color, thickness, style, and spacing.

12. Can I remove underlined text later?

Yes. Simply remove the <u> tag or the CSS that applies the underline. The text will return to its normal appearance without affecting the surrounding content.

Final Thoughts

Underlining text in WordPress is simple once you know the available options. Whether you prefer using HTML, custom CSS, or a keyboard shortcut in a supported editor, each method has its own advantages depending on your workflow and technical experience.

For most users, HTML is the quickest and most reliable solution for occasional formatting. If you need greater control over your underline's appearance, CSS gives you the flexibility to customize its color, thickness, spacing, and style.

Whichever method you choose, use underlines sparingly. Overusing underlined text can reduce readability and make visitors mistake regular content for hyperlinks. By following the best practices in this guide, you can highlight important information while keeping your WordPress content clean, accessible, and easy to read.