How to Style Text in HTML

Styling text in HTML is an important way to emphasize important information or add decorative elements to your content. In this guide, we'll cover how to bold, underline, italicize, strikethrough, insert, highlight, and use subscript and superscript text in HTML.

Bolding Text

To make text bold, you can use either the or tag. Both tags will result in bold text, but it's recommended to use the tag for important text. For decorative bolding, use CSS instead. Simply enclose the text within the tags to define it as important.

Underlining Text

For underlining text, use the CSS text-decoration property and set it to underline. While the tag is another option, it is typically used for specific cases and not for decoration. For example:

• If the text has a non-textual annotation, use the tags. For instance, <p>This <u>wrd</u> is misspelled, so we've underlined it.</p>
• If the text needs to be underlined for decoration, use the CSS text-decoration property. For example, <p>This text is normal, and <span class="underlined"> this text is underlined</span>.</p>

Italicizing Text

To make text italic, use either the or tag. The tag is preferred for semantic purposes. Simply wrap the text inside tags to define it as stressed. For decorative italicizing, use the CSS font-style property instead.

Strikethrough Text

To show that text is no longer correct or relevant, use the or tag. For other purposes, use the CSS text-decoration-line property and set it to line-through. Note that the tag is no longer recommended. For example:

• If you want to show deleted text, use the tags. For instance, <p>The meeting will be on <del>Saturday</del> now on Sunday.</p>
• To show text as strikethrough, but not because it has been deleted, use the CSS text-decoration-line property. For example, <p>This text is normal, and <span class="strike"> this text is line-through</span>.</p>
• If you'd like to show deleted text in a list, use tags within a list element. For example, <p>Appointments are now available for-</p><ul><li><del>3PM</del></li><li><del>4PM</del></li><li>5PM</li></ul>

Inserted Text

To show that text has been inserted in place of another, use the tag. Most browsers will display inserted text with an underline. For example, <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Highlighting Text

To highlight text, use the tag. The text will typically be displayed with a yellow background.

Using Subscript and Superscript Text

HTML provides the use of subscript and superscript text for various contexts, such as chemical formulas, mathematical equations, and fractions. These elements are useful for adding additional information or symbols to text without disrupting the overall flow of a document.

To create superscript text, use the tag. This will render the text in a smaller, raised font, half a character above the normal line. It's commonly used for footnotes, copyright and registered trademarks, and certain chemical formulas. Here is an example of HTML code:

Adding Superscript and Subscript Text in HTML

If you want to make certain parts of your HTML text stand out, you can use superscript and subscript text. These effects can be achieved through the use of specific HTML tags. For superscript text, you can use the element. This will make the text appear smaller and slightly elevated from the normal line. It is commonly used for footnotes, ordinal numbers, and citations.

To achieve subscript text, the element can be used. This will make the text appear smaller and slightly lower from the normal line. It is often used for chemical formulas, mathematical equations, and fractions. Here is an example of the HTML code:

The result will be displayed as:

The chemical formula for water is H₂O.

Using these HTML elements, you can easily incorporate superscript and subscript text into your documents. This will not only make your content more informative, but also visually appealing. So, don't hesitate to add these effects to your HTML code to make your text stand out.