How to Bold, Italicize & Format Text in HTML

Download Now: 25 HTML & CSS Hacks
Anna Fitzgerald
Anna Fitzgerald

Published:

If you work exclusively in a content management system like WordPress, you can bold, italicize, and underline text with a click of the button. But if your toolbar doesn’t offer the exact formatting option you want, or you’re not working in a CMS, you’ll need to know how to bold in HTML.

Person learns to bold, italicize, and format text in html

No problem — in this post, we’ll start by discussing some use cases for formatting text. Then, we’ll walk through the process for creating bold, italicized, underlined, strikethrough, inserted, marked, subscript, and superscript text.

Download Now: 25 HTML & CSS Hacks [Free Guide]

How to Bold Text in HTML

To bold the text in HTML, you can use either the <strong> tag or the <b> (bold) tag. Browsers will bold the text inside both of these tags the same way, but the <strong> tag indicates that the text is of particular importance. You can also bold text with the CSS font-weight property set to bold.

When bolding text, it’s considered a best practice to use the <strong> tag. This is because it is a semantic element, whereas <b> is not. Non-semantic elements are worse for accessibility and can make content localization and future-proofing difficult. 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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more
Featured Resource

25 HTML & CSS Coding Hacks

Fill out the form to access your coding tips and templates.

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 for decoration, use the CSS font-weight property. Say you want to bold a word in a paragraph — you can 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 HTML and CSS:

<p>This is some normal paragraph text, and this <span class="bolded">word</span> is bold for decoration.</p> .bolded { font-weight: bold; }

Here’s the result:

example of how to bold text in html

How to Italicize Text in HTML

To italicize the text in HTML, you can use either the <em> tag or the <i> (italics) tag. Both of these tags italicize the text, but the <em> tag indicates that the text has stress emphasis when read. You can also italicize text with the CSS font-style property set to italic.

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.

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 HTML and CSS:

<p>This is some normal paragraph text, and this <span class="emphasized">word</span> is italicized for decoration.</p> .emphasized { font-style: italic; }

Here’s the result:

example of how to add italics to text in html

How to Underline Text in HTML

To underline text in HTML and CSS, use the CSS text-decoration property set to underline.

You can also underline text with the <u> element, but this should generally not be used. 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 HTML and CSS:

<p>This text is normal, and <span class="underlined"> this text is underlined</span>.</p> .underlined {text-decoration: underline;}

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, use the CSS text-decoration-line property and set this property to line-through.

Also, 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 of the three methods supported in the current version of HTML.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

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.

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>3PM</del></li> <li><del>4PM</del></li> <li>5PM</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 HTML and CSS:

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

Here’s the result:

example of how to strikethrough text in html and css

How to Show Inserted Text in HTML

The <ins> tag is often paired with the <del> element in HTML to show that a piece of text has been inserted in the document in place of another piece of text. Most browsers render inserted text with an underline.

Here’s the HTML:

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Here’s the result:

html bold (tightrope update)-Mar-09-2023-02-06-03-1516-PM

How to Create Marked Text in HTML

To draw attention to text by highlighting it, you can use the <mark> element. Here’s an example:

Here’s the HTML:

<p>Our club meets weekly on <mark>Sunday</mark> at <mark>8 PM</mark>.</p>

Here’s the result:

an example of marked text in HTML

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, and fractions, among other things.

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

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.

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 text 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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more
Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO