HTML Formatting Text | HTML Formatting Tags with Example

This article will teach you how to format text in HTML. So without any further delay, let's start.

Text can be formatted to convey a specific meaning. As an example:

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <p>Hello, my <b>name</b> is <u>William</u>.</p>

   </body>
</html>

Output

Hello, my name is William.

In the above example, I used the text formatting tags, sometimes also called "phrasing tags," B and U, to make the text bold and underlined.

In this article, you will learn about the tags used to format the text on the web. However, I already listed and briefly described the "phrasing tags" at the start of the course. From the list of phrasing tags, some tags are used to format the text on the web.

HTML Formatting Tags

Some of the most common and well-known HTML formatting tags are briefly explained in the table below.

<b>	represents bolded texts
_<sub>	represents subscripted texts
^<sup>	represents superscripted texts
<strong>	represents important texts
~~<del>~~	represents deleted texts
<ins>	represents inserted texts
<mark>	represents marked texts
<i>	represents italic texts
<em>	represents emphasized texts
<small>	represents small texts

HTML Text Formatting

HTML uses tags like HEAD and BODY to define the structure and appearance of a document. The HTML document is stored in plain text format by default, which means that it contains no formatting. To format text in an HTML document, you must use various HTML tags.

Formatting the text not only enhanced the visual appearance of the content but also improved its readability and comprehension.

The content of a formatted document is presented in an organized manner, which allows readers to easily differentiate between various types of information. For instance, any important piece of information in an HTML document can be enclosed between B or I tags to make it appear in bold or italics, respectively.

Sometimes, you may need to highlight, mark, or emphasize certain important or technical terms to differentiate them from the normal text content. So HTML provides you with the MARK and EM tags to highlight and emphasize the text content.

HTML Text Formatting Tags

HTML provides a set of tags that can be used to change the appearance of text by using formatting features such as bold, italics, subscript, and superscript. These HTML tags are used in conjunction with the beginning and ending tags. HTML formatting tags are classified into two categories:

"Text formatting with physical style tags" is defined in this article, whereas "text formatting with logical style tags" is defined in a separate (next) article.

HTML Text Formatting with Physical Style Tags

HTML uses physical style tags to change the appearance of text. If you want your text to appear in a particular style, such as bold or italics, you must use physical style tags. For example, to ensure that text appears in small font, you must enclose it between the starting and ending tags of the SMALL tag.

The table given below lists and describes the physical style tags used to format the text in an HTML document:

Tag	Description
B	shows the text in bold
I	displays the text in italics
SMALL	The text is displayed in a small font size
SUB	Subscript text is displayed
SUP	displays the text as superscript

Let me now create an example using all of the above tags to demonstrate how these tags can be used in an HTML document.

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <p>The <i>chemical </i><small>formula</small> of <b>Water</b> is H<sub>2</sub>O.</p>
      <p>(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab.</p>

   </body>
</html>

Output

The chemical formula of Water is H₂O.

(a+b)² = a² + b² + 2ab.

The table below lists and describes all physical style tags available in HTML for formatting text in an HTML document.

Attribute	Description
class	Indicates a class name for a tag
dir	Indicates the directionality of the text, such as left to right or right to left
id	Indicates a tag's unique ID
lang	Indicates the language code for the tag's content
style	Indicates an inline style for a tag
title	Specifies a title for a tag

Now in the next tutorial, you will learn about "text formatting with logical tags."