If you work exclusively in a content management system like CMS Hub or WordPress, you lot're used to beingness 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 y'all want? Or you're not working in a discussion processor or a CMS?

No problem. All you need is some HTML and CSS. Below we'll talk over some utilise cases for formatting text. Then, nosotros'll walk through the process for creating assuming, italicized, underlined, strikethrough, subscript, and superscript text.

Download Now: Free Intro Guide to Java & JavaScript

How to Assuming Text in HTML

To assuming the text in HTML, use either the potent tag or the b (assuming) tag. Browsers will assuming the text inside both of these tags the aforementioned, but the strong tag indicates that the text is of particular importance or urgency. Y'all can besides bold text with the CSS font-weight holding set to "bold."

When bolding text, it's considered a all-time practice to use the <strong> tag in favor of the <b> tag. This is because the <strong> a semantic element whereas <b> is non. Not-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 utilize 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 belongings.

How to Bold Text in HTML with the Strong Chemical element

To define text with strong importance, place the text inside <strong> tags. Permit'due south wait at an example.

Here'south the HTML:

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

Hither'southward the effect:

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 belongings instead of the HTML strong element. Let'south say you want to bold a word in a paragraph — you'd wrap the word in <span> tags and use a CSS grade selector to use the font-weight property to the specific span element only.

Here's the CSS:

                                          
.bolded { font-weight: assuming; }

Here'due south the HTML:

                                          
<p>This is some normal paragraph text, and this <span class="bolded">give-and-take</span> is bold for ornament.</p>

Here's the result:

example of how to bold text in html

How to Italicize Text in HTML

To italicize the text in HTML, utilize either the em tag or the i (italics) tag. Both of these tags will italicize the text, just the em tag additionally indicates that the text has stress emphasis when read. You tin can also italicize text with the CSS font-style property prepare to "italic."

Like <strong> and <b>, the <em> tag is by and large preferred over the <i> tag every bit 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.

How to Italicize Text in HTML with the Accent Element

To define text with stress accent, place the text inside <em> tags. Let's encounter an example.

Here'due south the HTML:

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

Hither's the result:

example of how to add italics to text in html

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

To italicize text for decoration, apply the CSS font-way holding. Imagine you desire to italicize a discussion inside a paragraph. Beginning, wrap the word in <span> tags, so apply the font-manner belongings to the span element only.

Here's the CSS:

                                          
.emphasized { font-style: italic; }

Hither's the HTML:

                                          
<p>This is some normal paragraph text, and this <bridge course="emphasized">discussion</bridge> is italicized for decoration.</p>

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, employ the CSS text-ornament belongings, gear up to "underline."

Y'all can also underline text with the <u> element, simply this should not be used to underline text for presentation purposes. The <u> element is meant for specific use cases similar marking upwardly misspelled words, denoting proper names in Chinese text, or indicating family names.

Let's expect at both methods beneath.

How to Underline Text in HTML with the Unarticulated Annotation Element

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

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

Hither'due south the upshot:

example of how to underline text in html

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

If you'd similar to underline text for ornament, rather than to correspond a non-textual annotation, and then you'd utilize the CSS text-decoration belongings, similar so:

Here's the CSS:

                                          
.underlined {text-decoration: underline;}

Hither's the HTML:

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

And hither'south 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 information technology. Y'all tin can utilize the <s> tag to indicate that the text is at present incorrect, inaccurate, or irrelevant. If you want to indicate text that has been deleted, use the <del> tag.

If you want to prove the text as strikethrough for another reason, so you'd use the CSS text-decoration-line belongings and set this property to "line-through."

It's of import to annotation that the HTML <strike> element has been deprecated and is no longer a viable option for rendering strikethrough text.

Allow's expect at examples for the three methods supported in the current version of HTML.

How to Strikethrough Text in HTML with the Strikethrough Element

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

Here's the HTML:

                                          
<p>The coming together will begin at v:00 PM on <southward>Saturday</s> now on Sunday.</p>

Here'southward the effect:

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 information technology has been deleted, identify the text inside <del> tags. Let'due south 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 Holding

To strikethrough text for some other purpose, use the CSS text-ornamentation-line belongings.

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 consequence:

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

Here's the HTML:

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

Here's the consequence:

example of how to write subscript text in html

How to Brand Text Superscript in HTML

Ordinarily 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 chemic formulas as well.

To create superscript text in HTML, apply the <sup> element. See the example below.

Here's the HTML:

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

Here'southward the upshot:

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 aid your readers to ameliorate understand and retain information from your site. Whether you want to bold keywords or include subscript in chemical formulas, formatting text just requires basic noesis of HTML and CSS.

Editor's annotation: This mail was originally published in Oct 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published December 10, 2021 7:00:00 AM, updated March 16 2022