Mastering Text Formatting in HTML: A Comprehensive Guide

Text formatting plays an important role in creating visually attractive and readable web content. Whether you're a beginner or an experienced developer, knowing how to format text in HTML is essential. In this article, we'll cover everything you need to know about HTML text formatting.

How to Bold Text in HTML

How to Bold Text in HTML with the Strong Element

The strong element is used to indicate that the text should be strongly emphasized. By default, browsers render this element as bold. Here's an example usage:

<p>This is the <strong>bold text</strong></p>

The above code would render as:

This is the bold text.

How to Bold Text in HTML with the CSS Font-Weight Property

The font-weight property can also be used to make text bold. You can specify the value as bold or 700:

<p style="font-weight: bold;">This is the bold text</p>
<p style="font-weight: 700;">This is also bold text</p>

Both of the above code snippets would render the text inside the <p> tags as bold.

How to Italicize Text in HTML

How to Italicize Text in HTML with the Emphasis Element

The emphasis element is used to indicate that the text should be emphasized or emphasized in some way. By default, browsers render this element as italic. Here's an example usage:

<p>This is the <em>italicized text</em></p>

The above code would render as:

This is the italicized text.

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

The font-style property can also be used to make text italic. You can specify the value as italic:

<p style="font-style: italic;">This is the italicized text</p>

The above code would render the text inside the <p> tags as italic.

How to Underline Text in HTML

How to Underline Text in HTML with the Unarticulated Annotation Element

The unarticulated annotation element is used to indicate that the text should be underlined. Here's an example usage:

<p>This is the <u>underlined text</u></p>

The above code would render as:

This is the underlined text.

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

The text-decoration property can also be used to underline text. You can specify the value as underline:

<p style="text-decoration: underline;">This is the underlined text</p>

The above code would render the text inside the <p> tags as underlined.

How to Render Strikethrough Text in HTML

How to Strikethrough Text in HTML with the Strikethrough Element

The strikethrough element is used to indicate that the text should be striked through. Here's an example usage:

<p>This is the <strike>strikethrough text</strike></p>

The above code would render as:

This is the strikethrough text.

How to Strikethrough Text in HTML with the Deleted Text Element

The deleted text element is also used to indicate that the text should be striked through. Here's an example usage:

<p>This is the <del>deleted text</del></p>

The above code would render as:

This is the deleted text.

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

The text-decoration-line property can also be used to strikethrough text. You can specify the value as line-through:

<p style="text-decoration-line: line-through;">This text is striked through</p>

The above code would render the text inside the <p> tags as striked through.

How to Show Inserted Text in HTML

The inserted text element is used to indicate that the text has been inserted into the document. Here's an example usage:

<p>This is the <ins>inserted text</ins></p>

The above code would render as:

This is the inserted text.

How to Create Marked Text in HTML

The marked text element is used to highlight text that needs attention. Here's an example usage:

<p>This is the <mark>marked text</mark></p>

The above code would render as:

This is the marked text.

How to Make Text Subscript in HTML

The _subscript element is used to indicate that the text should be subscripted. Here's an example usage:

<p>This is the H<sub>2</sub>O molecule.</p>

The above code would render as:

This is the H₂O molecule.

How to Make Text Superscript in HTML

The ^superscript element is used to indicate that the text should be superscripted. Here's an example usage:

<p>This is the speed of light: 2.998 x 10<sup>8</sup> m/s.</p>

The above code would render as:

This is the speed of light: 2.998 x 10⁸ m/s.

Formatting Text with HTML & CSS

In addition to the formatting elements discussed above, you can also format text using CSS. Here are some CSS properties you can use:

• color - changes the color of the text
• font-size - changes the size of the text
• text-align - aligns the text to the left, right or center
• line-height - changes the height of the text lines
• text-transform - changes the case of the text (e.g. uppercase, lowercase)

With these properties and the formatting elements discussed earlier, you can create a wide range of text styles in your HTML content.

Now that you know how to format text in HTML, experiment with different styles and make your web content stand out!