Formatting elements

In spite of the HTML language being split into CSS and HTML, there remain some presentational elements in HTML. Most of these elements have been given some new meaning. There were many formatting elements other than these elements. They were deprecated and forgotten by developers over time.

Bold and Strong elements

The bold element is used to make the text appear bold i.e., the thickness of stroke is increased. The strong element also makes the text bold. But the strong element has additional meaning as specified by the HTML5 standard. The content marked by strong has more importance than the surrounding text. Whereas the bold element has no added meaning. There are people who use screen readers to listen to web pages. For those people, the screen reader pronounces strong text differently. So for making text bold only for presentation, use the bold element. In other cases where you need to point out the additional importance to the text, use the strong element.

<p>This text is <b>bold.</b></p>

<p>This text is <strong>strong.</strong></p>

Italics and Emphasis elements

The italics element makes the text appear in italics i.e., makes the text slanted in appearance. Similarly, the emphasis element also has the same italics effect. Similiar to how the strong element has additional meaning, the emphasis element also has additional meaning. To make the text simply in italics, we use the italics tag. In case we need to have the text to be spoken with an accent then we use the emphasis element.

<p>This is in <i>italics.</i></p>
<p>This is in <em>emphasis.</em></p>

Small Element

The small element is used for displaying the content in a size smaller than the surrounding text. Since the small element adapts to the context, it is useful for text that needs to be smaller relatively.

<p> This text is <small>small.</small>

Superscript and Subscript elements

In some situations, it may be necessary to put content in subscript or superscript format. In those cases, we can use the <sup> and <sub> elements for specifying superscript text and subscript respectively. Some useful scenarios may include mathematical formulae and chemical compositions.

<p>The chemical composition of water is H<sub>2</sub>O.</p>


Mark element

In some web pages, we may need to highlight particular portions of text. The mark element is used exactly for that purpose. Any content within the mark element is highlighted.

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

Insert and Delete elements

In some cases, we need to specify the content has been inserted or deleted. In these cases, we use the <ins> and <del> elements for portraying inserted content and deleted content respectively. By default, the browser adds an underline for the insert element and a strikethrough for the delete element.

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

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