Text Formatting Tags in HTML with Examples

Text Formatting Tags in HTML with Examples

HTML Formatting is the process of formatting text to improve its appearance and feel. HTML allows us to format text without using CSS. HTML contains numerous formatting tags, which we will cover today. Text can be bolded, italicised, or underlined using these tags.

Formatting elements were designed to display special types of text. Here, we are going to learn 14 HTML formatting tags.

All of the HTML formatting elements are listed below.

Bold and Strong

Making Text Bold or Strong: The <b> tag can be used to make text bold or strong. Both opening and closing tags are used in the tag. The text that needs to be bolded must be enclosed by the <b> and </b> tags. We can also use the <strong> tag to emphasise the text's semantic importance. It also begins with the <strong> tag and ends with the </strong> tag.

<!-- Bold text -->
<p>Welcome fellow <b>Frontend Developers!</b></p>
 <!-- Strong text -->
<p><strong>This is an important content</strong>, and this is just normal content</p>

Italic and Emphasis

Italicising or emphasising text: To italicise the text, use the <i> tag. It begins with the <i> tag and ends with the </i> tag. The <em> tag is used to emphasise text with additional semantic significance. It begins with the <em> tag and ends with the </em> tag.

<!-- Italic text -->
<p>The term <i>Front end</i> describes all the parts of a website that can be seen and interacted with by users. Front end web development usually involves coding with HTML, CSS, and JavaScript.</p>
<!-- Emphasised text -->
<p>Get out of bed <em>now</em>! And start coding</p>

Highlighting Text

Highlighting text: The <mark> tag can also be used to mark or highlight text in HTML. It has a <mark> opening tag and a </mark> closing tag.

<!-- Highlighted text -->
<p>Do not forget to <mark>comment</mark> your code.</p>

Teletype Text

The <tt> element was used to identify text to be displayed using the browser’s default monospace or fixed-width font as it would appear on a fixed-width device such as a teletype. This element has been deprecated and the <code> element is an appropriate modern replacement for <tt>.

<!-- Teletype text -->
<p><tt>Who is old enough to remember teletype?</tt></p>

Underline and Strike

The <u> tag in HTML stands for underline, and it’s used to underline the text enclosed within the <u> tag. This tag is generally used to underline misspelled words. This tag requires a starting as well as ending tag.

Warning: In older versions of HTML, this element was known as the “Underline” element, and it is still sometimes used in this manner. Instead, use a style that includes the CSS text-decoration property set to underline to underline text.

The <strike> tag defines a strike or line through Text. This tag creates a cut line in the text. This tag is depreciated from HTML5. Now, the <del> tag is used instead of this tag.

<!--Highlighted text -->
<p>This is some <u>misspelled</u> text.</p>
<!--Strikethrough text-->
<p>Invest in your potential. 
Develop skills for as low as <strike>£24.99</strike> 
£14.99 — today only!</p>

Big and Small

Making text larger: If you want to put your font size larger than the rest of the text then put the content within <big>...</big>. It increase one font size larger than the previous one.

Making text smaller: The is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small>...</small> tags.

<!-- Big text -->
<p>
  This is the first sentence.
  <big>This whole sentence is in bigger letters.</big>
</p>
<!-- Small text --> 
<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>

Delete and Insert

Striking through the text: The <del> element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.
Adding a text: The <ins> element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag.

<!-- Deleted and inserted text --> 
<p>My favourite code editor is <del>Sublime Text</del> <ins>VS Code</ins>!</p>

Subscript and Superscript

Making a text Subscript or Superscript: The <sup> element is used to superscript a text and the <sub> element is used to subscript a text. They both have an opening and a closing tag.

<!-- Subscript text --> 
<p>Make sure to drink plenty of H<sub>2</sub>O whilst working on your coding skills.</p>
<!-- Superscript text --> 
<p>The world's most famous equation: E = mc<sup>2</sup></p>

Conclusion

This article covered the most commonly used HTML formatting tags. We discussed the following topics:

• <b> – Bold text
• <strong> – Important text
• <i> – Italic text
• <em> – Emphasised text
• <mark> – Marked text
• <tt> – Teletype text (Not Supported in HTML5)
• <u> – Underline text
• <strike> – Draw a strikethrough a section of text (Not Supported in HTML5)
• <big> – Increase font size by one conventional unit (Not Supported in HTML5)
• <small> – Decrease font size by one unit from the base font size
• <del> – Deleted text
• <ins> – Inserted text
• <sub> – Subscript text
• <sup> – Superscript text

I hope you find these HTML formatting elements useful in making your next web page more appealing.

Further reading

Explore some other interesting HTML5 elements; over on MDN Web Docs – HTML elements reference – HTML: HyperText Markup Language | MDN.

See also

What is HTML? Basics Explained

How to Create an HTML Boilerplate
What is an HTML Element? How do you create one?

If you liked this article, then please share. You can also find me on Twitter for more updates.