If you work exclusively in a content management system like CMS Hub or WordPress, you’re 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 a CMS?

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.

Download Now: Free Intro Guide to HTML & CSS

When bolding text, it’s considered a best practice to use the <strong> tag in favor of the <b> tag. This is because the <strong> a semantic element whereas <b> is not. Non-semantic elements can make content localization and future proofing difficult, according to the HTML5 specification. Additionally, if the text bolding is purely stylistic, it’s better to use CSS and keep all page styling separate from the content.

For this reason, we’ll only be showing examples using <strong> and the CSS font-weight property.

Featured Resource

The Beginner's Guide to HTML and CSS for Marketers

Fill out the form for the free introductory guide.

How to Bold Text in HTML with the Strong Element

To define text with strong importance, place the text inside <strong> tags. Let’s look at an example.

Here’s the HTML:

 

<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>

Here’s the result:

example of how to bold text in html

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

To bold text simply for decoration, use the CSS font-weight property instead of the HTML strong element. Let’s say you want to bold a word in a paragraph — you’d wrap the word in <span> tags and use a CSS class selector to apply the font-weight property to the specific span element only.

Here’s the CSS:

 

.bolded { font-weight: bold; }

Here’s the HTML:

 

<p>This is some normal paragraph text, and this <span class="bolded">word</span> is bold for decoration.</p>

Here’s the result:

example of how to bold text in html

Like <strong> and <b>, the <em> tag is generally preferred over the <i> tag as it is a semantic element, so we’ll be using it in our HTML examples. For styling, stick with CSS and avoid the <i> tag.

Learn More: The Beginner's Guide to HTML & CSS

html-css

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML. 

How to Italicize Text in HTML with the Emphasis Element

To define text with stress emphasis, place the text inside <em> tags. Let’s see an example.

Here’s the HTML:

 

<p>This is some normal paragraph text, <em>and this is some emphasized text.</em></p>

Here’s the result:

example of how to add italics to text in html

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

To italicize text for decoration, use the CSS font-style property. Imagine you want to italicize a word inside a paragraph. First, wrap the word in <span> tags, then apply the font-style property to the span element only.

Here’s the CSS:

 

.emphasized { font-style: italic; }

Here’s the HTML:

 

<p>This is some normal paragraph text, and this <span class="emphasized">word</span> is italicized for decoration.</p>

Here’s the result:

example of how to add italics to text in html

You can also underline text with the <u> element, but this should not be used to underline text for presentation purposes. The <u> element is meant for specific use cases like marking up misspelled words, denoting proper names in Chinese text, or indicating 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 display text that is unarticulated or has a non-textual annotation, place the text inside <u> tags. For example:

 

<p>This <u>wrd</u> is misspelled, so we've underlined it.</p>

Here’s the result:

example of how to underline text in html

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, like so:

Here’s the CSS:

 

.underlined {text-decoration: underline;}

Here’s the HTML:

 

<p>This text is normal, and <span class="underlined"> this text is underlined</span>.</p>

And here’s the result:

example of how to underline text in html and css

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 through 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 the HTML <strike> element has 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, place the text inside <s> tags. Let’s look at an example.

Here’s the HTML:

 

<p>The meeting will begin at 5:00 PM on <s>Saturday</s> now on Sunday.</p>

Here’s the result:

example of how to strikethrough text in html

How to Strikethrough Text in HTML with the Deleted Text Element

To strikethrough text to show that it has been deleted, place the text inside <del> tags. Let’s see an example with a list element:

Here’s the HTML:

 

<p>Appointments are now available for:</p>

<ul>

<li><del>3 PM</del></li>

<li><del>4 PM</del></li>

<li>5 PM</li>

</ul>

Here’s the result:

example of how to strikethrough text in html

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

To strikethrough text for another purpose, use the CSS text-decoration-line property.

Here’s the CSS:

 

.strike { text-decoration-line: line-through; }

Here’s the HTML:

 

<p>This text is normal, and <span class="strike"> this text is line-through</span>.</p>

Here’s the result:

example of how to strikethrough text in html and css

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 in chemical formulas, math equations, fractions, and more.

To create subscript text in HTML, use the <sub> element. See the example below.

Here’s the HTML:

 

<p>The chemical formula for water is H<sub>2</sub>O.</p>

Here’s the result:

example of how to write subscript text in html

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. See the example below.

Here’s the HTML:

 

<p>Water is essential for all forms of life.<sup>1</sup></p>

Here’s the result:

example of how to write superscript text in html

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.

Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Dec 10, 2021 7:00:00 AM, updated May 16 2022

Topics:

HTML