If you work exclusively in a content direction system like CMS Hub or WordPress, y'all're used to being able to bold, italicize, and underline text with a click of the button. Only what if your toolbar doesn't offer the exact formatting option you lot want? Or y'all're not working in a give-and-take 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 assuming, italicized, underlined, strikethrough, subscript, and superscript text.

Download Now: Free Intro Guide to HTML & CSS

How to Bold Text in HTML

To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, just the strong tag indicates that the text is of detail importance or urgency. You can too bold text with the CSS font-weight property set to "bold."

When bolding text, it'due south considered a all-time do to employ the <strong> tag in favor of the <b> tag. This is because the <stiff> a semantic element whereas <b> is non. Non-semantic elements tin can make content localization and time to come proofing hard, co-ordinate to the HTML5 specification. Additionally, if the text bolding is purely stylistic, it'due south better to use CSS and keep all page styling dissever from the content.

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

How to Bold Text in HTML with the Potent Element

To define text with stiff importance, identify the text inside <stiff> tags. Let'due south expect 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 Assuming Text in HTML with the CSS Font-Weight Property

To bold text just for decoration, use the CSS font-weight holding instead of the HTML strong chemical element. Permit's say you lot want to bold a give-and-take in a paragraph — you'd wrap the discussion in <span> tags and apply a CSS class selector to apply the font-weight property to the specific span element only.

Here's the CSS:

                                          
.bolded { font-weight: bold; }

Hither's the HTML:

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

Hither's the event:

example of how to bold text in html

How to Italicize Text in HTML

To italicize the text in HTML, utilise either the em tag or the i (italics) tag. Both of these tags will italicize the text, but the em tag additionally indicates that the text has stress emphasis when read. You can likewise italicize text with the CSS font-manner property set to "italic."

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

How to Italicize Text in HTML with the Emphasis Element

To define text with stress accent, place the text inside <em> tags. Let's come across an instance.

Here's the HTML:

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

Here'southward 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, utilize the CSS font-mode belongings. Imagine you want to italicize a discussion within a paragraph. Outset, wrap the word in <bridge> tags, then apply the font-style property to the span element only.

Here'due south the CSS:

                                          
.emphasized { font-style: italic; }

Here'south the HTML:

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

Here'southward 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, prepare to "underline."

Y'all can likewise underline text with the <u> element, simply this should non be used to underline text for presentation purposes. The <u> element is meant for specific utilize cases like mark upward misspelled words, cogent 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 Note Element

If you'd like to brandish text that is unarticulated or has a non-textual notation, place the text within <u> tags. For example:

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

Here'southward 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 similar to underline text for ornamentation, rather than to represent a not-textual note, and so you'd use the CSS text-decoration property, like so:

Here'due south the CSS:

                                          
.underlined {text-ornament: underline;}

Here'south the HTML:

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

And here'due south the issue:

example of how to underline text in html and css

How to Return Strikethrough Text in HTML

In that location are multiple means to render strikethrough text in HTML, which is text displayed with a horizontal line through information technology. You can employ the <s> tag to indicate that the text is at present incorrect, inaccurate, or irrelevant. If y'all 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 employ the CSS text-decoration-line property and ready this property to "line-through."

It's important to note that the HTML <strike> chemical element has been deprecated and is no longer a feasible option for rendering strikethrough text.

Permit's look at examples for the iii methods supported in the current version of HTML.

How to Strikethrough Text in HTML with the Strikethrough Chemical element

If yous'd like to strikethrough text to bear witness that it is no longer correct, accurate, or relevant, place the text inside <s> tags. Let'south look at an example.

Hither's the HTML:

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

Hither's the result:

example of how to strikethrough text in html

How to Strikethrough Text in HTML with the Deleted Text Chemical 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:

Hither'due south the HTML:

                                          
<p>Appointments are now available for:</p>
                      
<ul>
                      
<li><del>3 PM</del></li>
                      
<li><del>4 PM</del></li>
                      
<li>five PM</li>
                      
</ul>

Here's the issue:

example of how to strikethrough text in html

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

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

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'southward the outcome:

example of how to strikethrough text in html and css

How to Make Text Subscript in HTML

Normally rendered in a smaller only heavier font, subscript text appears half a graphic symbol below the normal line. It can be used in chemical formulas, math equations, fractions, and more.

To create subscript text in HTML, apply the <sub> element. See the case beneath.

Here'south the HTML:

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

Here's the outcome:

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 one-half a character in a higher place the normal line. It can exist used to write footnotes, copyright, registered trademarks, and some chemic formulas as well.

To create superscript text in HTML, apply the <sup> element. See the instance beneath.

Here'due south the HTML:

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

Here's the upshot:

example of how to write superscript text in html

Formatting Text with HTML & CSS

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

Editor'due south notation: This mail service was originally published in October 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published Dec 10, 2021 vii:00:00 AM, updated March 16 2022