How to Bold, Italicize & Format Text in HTML

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

Updated:

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: 50 Code Templates [Free Snippets]

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.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!
Learn more

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

    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.

    50 Free Coding Templates

    Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

    • Navigation Menus & Breadcrumbs Templates
    • Button Transition Templates
    • CSS Effects Templates
    • And more!
    Learn more

      Download Free

      All fields are required.

      You're all set!

      Click this link to access this resource at any time.

      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:

      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.

      New Call-to-action

      Topics: HTML

      Related Articles

      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