In this section, we will learn how to format a string text in an HTML document.

Formatting in HTML

HTML has provided multiple elements that are used for formatting a text content! For example, if you want to make a text into a bold face, you can use the <b> element. If you want to change the style of a text into italic, you can use the <i> element and so on.

There are more elements related to style a text content which in this section we will learn about them.

Bold Text in HTML: <b> and <strong> HTML tags for Bold

Both <b> and <strong> elements are used to turn the face of a text element into bold! You might be thinking if both of these elements are doing the same thing, then what’s the difference here?

Well, the <b> element only turns the face of a text into bold! But when it comes to <strong> element, the content of the element not just turn into bold but also they get strong emphasis as well. Basically, when a text reader software for blind people comes across the content of the <strong> element, it puts stronger weight on the text and reads it with more emphasis on the content.

Example: text bold in HTML

See the Pen text bold in HTML by Omid Dehghan (@odchan1) on CodePen.

Italicize in HTML: <i> and <em> HTML Tags for Italic

The <i> and <em> elements also take text within their content and turn the style of that content into italic.

The main difference between the two, however, is that:

• The <i> element only turns the style into italic.
• But the <em> element not just turn the content into italic style but also when it comes to text reader software for blind people, it will try to read the content within the <em> element with more emphasis.

Example: HTML for Italics

See the Pen HTML for Italics by Omid Dehghan (@odchan1) on CodePen.

HTML Subscript Tag: <sub> Element

The HTML element <sub> stands for subscript text and we use it when we want to add a subscript text to a content. Subscript text is a text that appears half a character below the normal line.

One of the best use cases for this element is when we want to represent chemical formula in a document.

Example: using <sub> tag in HTML

See the Pen using <sub> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML Superscript Tag: <sup> Element

The <sup> element is the opposite of the <sub> element! It stands for superscript and is used when we want to add a text content half a character above the normal line.

For example, for math values, when we want to show the power of a number, this element can become useful.

Example: using <sup> in HTML

See the Pen using <sup> in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML Deleted Text

Sometimes, there is a text content in your document and you know it’s outdated or written in a wrong format and we should make it correct. Now, if you want to hold that content on the page and let people know that the content is deleted, you can use the <del> element.

The <del> element stands for <delete> and we use it when we want to take a mark on a text content as it’s been deleted.

Example: using <del> tag in HTML

See the Pen using <del> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML Mark Text: <mark> Element

The <mark> element is used to mark or highlight part of a text content. We use it when we want to make part of a text content noticeable by putting a mark on it.

Example: using <mark> element in HTML

See the Pen using <mark> element in HTML by Omid Dehghan (@odchan1) on CodePen.