Working almost exclusively in Google Docs and CMS Hub, I’m used to being able to bold, italicize, and underline text with a click of the button.

But what if your toolbar doesn’t offer the exact formatting option you want? Or you’re not working in a word processor or content management system?

No problem. All you need is some HTML and CSS. Below we’ll discuss some use cases for formatting text. Then, we’ll walk through the process for creating bold, italicized, underlined, strikethrough, subscript, and superscript text.

Free Intro Guide to HTML & CSS [Download Now]

Note: I’ll be using the W3Schools Online Code Editor to create the examples below. You can click any of the Source links to see the full code snippet behind the example and try your own.

Formatting Text in HTML

Formatted text can serve a variety of purposes. It can draw a reader's eye to specific parts of a document. It can emphasize important information. It can set certain words apart in a paragraph, like a title, keyword, thought, or phrase in another language.

The screenshot below shows the introduction from The Most Critical Differences Between Squarespace & WordPress. Notice that “Squarespace” and “WordPress” are bolded. This helps emphasize the main topic of the blog post, and differentiates these two keywords from the unformatted paragraphs as well as the formatted internal link and CTA.

Example of bold formatted text in a HubSpot blog post

Let’s look at how you can bold text in HTML so you can recreate this effect in your own blog posts or elsewhere on your website.

There’s another way to bold text in HTML: the <b> tag. But this is only to be used as a last resort because it can make content localization and future proofing difficult, according to HTML5 specification. For that reason, we’ll only show examples using the <strong> tag and CSS font-weight property.

How to Bold Text in HTML with the Strong Element

If you’d like to define text with strong importance, then you can place the text inside <strong> tags. This tag will be nested in another element, like a paragraph or span element. Let’s look at an example.

Here’s the HTML:

 
<h1>Using the HTML strong element</h1>

<p>This paragraph is normal.</p>

<p><strong>This paragraph is important!</strong></p>

Here’s the result:

An unbolded and bolded paragraph using the HTML strong element

Image Source

How to Bold Text in HTML with the CSS Font-Weight Property

If you’d like to simply bold text for decoration, then you’d use the CSS font-weight property instead of the HTML strong element. Let’s say you want to bold a word in a paragraph. Then you’d wrap the word in span tags and use a CSS selector to apply the font-weight property to the span element only.

Here’s the CSS:

 
span {

font-weight: bold;

}

Here’s the HTML:

 
<h1>Using the CSS Font-Weight Property</h1>

<p>This is a <span>keyword</span> so I want to bold it using CSS.</p>

Here’s the result:

A bolded word in a paragraph using the CSS font-weight property

Image Source

There’s another way to italicize text in HTML: the <i> tag. Like the <b> tag, it’s meant to be used as a last resort. For that reason, we’ll only show examples using the <strong> tag and CSS font-weight property.

How to Italicize Text in HTML with the Emphasis Element

If you’d like to define text with stress emphasis, then you can place the text inside <em> tags. This tag will be nested in another element, like a paragraph or span element. Let’s look at an example.

Here’s the HTML:

 
<h1>Using the HTML emphasis element</h1>

<p>This paragraph is normal.</p>

<p><em>This paragraph is emphasized!</em></p>

Here’s the result:

An unemphasized and emphasized paragraph using the HTML emphasis element

Image Source

How to Italicize Text in HTML with the CSS Font-Style Property

If you’d like to simply italicize text for decoration, then you’d use the CSS font-style property instead of the HTML emphasis element. Following the bold example above, say you want to italicize a word in a paragraph. Then you’d wrap the word in span tags and use a CSS selector to apply the font-style property to the span element only.

Here’s the CSS:

 
span {

font-style: italic;

}

Here’s the HTML:

 
<h1>Using the CSS Font-Style Property</h1>

<p>Get to school <span>now</span>!</p>

<p>I wanted the reader to hear this word in a differnet tone, so I italicized it using CSS.</p>

Here’s the result:

An italicized word in a paragraph using the CSS font-style property

Image Source

There’s another way to underline text in HTML: the <u> element. But this should not be used to underline text for presentation purposes. Instead, the <u> element is meant for specific use cases, like to mark up misspelled words, denote proper names in Chinese text, or indicate family names.

Let’s look at both methods below.

How to Underline Text in HTML with the Unarticulated Annotation Element

If you’d like to represent text that is unarticulated or has a non-textual annotation, then you can place the text inside <u> tags. This tag will be nested in another element, like a paragraph or span element. Let’s look at an example.

Here’s the HTML:

 
<h1>Using the HTML unarticulated annotation element</h1>

<p>This paragraph has no spelling mistake.</p>

<p>This paragraph has a spelling <u>mistak</u>.</p>

Here’s the result:

An underlined word in paragraph using the HTML unarticulated annotation element

Image Source

How to Underline Text in HTML with the CSS Text-Decoration Property

If you’d like to underline text for decoration, rather than to represent a non-textual annotation, then you’d use the CSS text-decoration property. You can also use this property to represent a spelling mistake similar to the way that a word processor does.

Because text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, you could underline a spelling mistake with a red, wavy line and a grammar mistake with a green one, for example.

In the example below, we’ll wrap the words in span tags with different class attributes. That way, we can apply unique style properties to each. We’ll also use the hex color codes for red and green.

Here’s the CSS:

 
.spelling {

text-decoration: #FF0000 wavy underline;

}

.grammar {

text-decoration: #008000 wavy underline;

}

Here’s the HTML:

 
<h1>Using the CSS Text-Decoration Property</h1>

<p>This paragraph has a spelling <span class="spelling">mistak</span>.</p>

<p>This paragraph <span class="grammar">has a grammar mistake</span>.</p>

Here's the result:

Spelling and grammar mistake underlined with red and green wavy lines using CSS text decoration property

Image Source

How to Render Strikethrough Text in HTML

There are multiple ways to render strikethrough text in HTML, which is text displayed with a horizontal line over it. You can use the <s> tag to indicate that the text is now incorrect, inaccurate, or irrelevant. If you want to indicate text that has been deleted, use the <del> tag.

If you want to show the text as strikethrough for another reason, then you’d use the CSS text-decoration-line property and set this property to “line-through.”

It’s important to note that there used to be another element: the HTML <strike> element. But this has since been deprecated and is no longer a viable option for rendering strikethrough text.

Let’s look at examples for the three methods supported in the current version of HTML.

How to Strikethrough Text in HTML with the Strikethrough Element

If you’d like to strikethrough text to show that it is no longer correct, accurate, or relevant, then you can place the text inside <s> tags. This tag will be nested in another element, like a paragraph or span element. Let’s look at an example.

Here’s the HTML:

 
<h1>Using the HTML strikethrough element</h1>

<p><s>There are still a few scones available.</s></p>

<p>SOLD OUT</p>

Here’s the result:

Strikethrough text marking text that's no longer accurate with s tag

Image Source

How to Strikethrough Text in HTML with the Deleted Text Element

If you’d like to strikethrough text to show that it has been deleted, then you can place the text inside <del> tags. This tag will be nested in another element, like a paragraph or span element. Let’s look at an example.

Here’s the HTML:

 
<h1>Using the HTML deleted text element</h1>

<p>The event starts at <del>7 p.m. ET</del> 6 p.m. ET. Sorry for the error.</p>

Here’s the result:

Strikethrough text marking deleted text using del tag

Image Source

How to Strikethrough Text in HTML with the CSS Text-Decoration-Line Property

If you’d like to strikethrough text for another purpose, then you’d use the CSS text-decoration-line property.

In the example below, we’ll include class names next to some of the list items. That way, we can apply the text-decoration-line property to those specific line items and not the whole list.

Here’s the CSS:

 
.purchased {

text-decoration-line: line-through;

}

Here’s the HTML:

 
<h1>Using the CSS Text-Decoration-Line Property</h1>

<p>Grocery List</p>

<ul>

<li class="purchased">Jalapeno</li>

<li class="purchased">Bag of frozen corn</li>

<li class="purchased">Cotija cheese</li>

<li class="purchased">Mayo</li>

<li>Chili powder</li>

<li>Cilantro</li>

<li>Lime</li>

</ul>

Here’s the result:

List with items marked as strikethrough using CSS text-decoration-line property

Image Source

How to Make Text Subscript in HTML

Usually rendered in a smaller but heavier font, subscript text appears half a character below the normal line. It can be used to write chemical formulas, mathematical equations, fractions, and more.

To create subscript text in HTML, use the <sub> element. Below is an example, which shows the formula for creating carbonic acid.

Here’s the HTML:

 
<h1>Using the HTML subscript element</h1>

<p>Here's how it looks with the subscript tag.</p>

<p>CO<sub>2</sub> + H<sub>2</sub>O ↔ H<sub>2</sub>CO<sub>3</sub>

<p>Here's how it looks without the subscript tag.</p>

<p>CO2 + H2O ↔ H2CO3</p>

Here’s the result:

Subscript text included in chemical formula

Image Source

How to Make Text Superscript in HTML

Usually rendered in a smaller but heavier font, superscript text appears half a character above the normal line. It can be used to write footnotes, copyright, registered trademarks, and some chemical formulas as well.

To create superscript text in HTML, use the <sup> element. Below is an example, which shows the entire formula for creating a bicarbonate ion.

Here’s the HTML:

 
<h1>Using the HTML superscript element</h1>

<p>Here's how it looks with the subscript and superscript tags.</p>

<p>CO<sub>2</sub> + H<sub>2</sub>O ↔ H<sub>2</sub>CO<sub>3</sub> ↔ H<sup>+</sup> + HCO<sub>3</sub><sup>-</sup></p>

<p>Here's how it looks without the tags.</p>

<p>CO2 + H2O ↔ H2CO3 ↔ H+ + HCO3</p>

Here’s the result:

Subscript and superscript text included in chemical formula

Image Source

Formatting Text with HTML & CSS

By formatting text in any of the ways described above, you can help your readers to better understand and retain information from your site. Whether you want to bold keywords or include subscript in chemical formulas, formatting text only requires basic knowledge of HTML and CSS.

New Call-to-action

 css introduction

Originally published Oct 2, 2020 7:00:00 AM, updated October 02 2020

Topics:

HTML