How To Bold, Italicize & Format Text In HTML - HubSpot Blog

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.

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.

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. You can always learn more using an HTML tutorial.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now 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:

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:

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

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:

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:

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:

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:

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.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now Featured Resource

25 HTML & CSS Coding Hacks

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

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:

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:

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:

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:

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:

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₂O.</p>

Here’s the result:

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.¹</p>

Here’s the result:

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.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now