Formatting in HTML is the process of modifying the appearance and structure of text content on the web pages. This includes tasks such as altering font size, color, applying styles like bold or italic, adjusting alignment, and organizing the content into lists or tables.
Proper formatting makes the text content easier to read and understand as well as significantly increases user engagement. HTML provides a standard way to implement these formatting tasks through various tags and attributes, so that content is displayed systematically across different web browsers.
In this tutorial, we will learn some of the most commonly used text formatting tags in HTML and how can we implement them to enhance the presentation of text.
HTML Text Formatting Tags
Text formatting tags are essential elements in HTML that allow us to style the appearance and structure of text content on the web page. HTML provides a variety of tags for styling text, including making text bold, italicizing it, underlying it, and more.
In HTML, we can broadly classify formatting tags into two types: physical tags and logical (or semantic) tags. This classification helps differentiate between tags based on their purpose and effect on the text.
Physical Tags
Physical tags are mainly concerned with the visual appearance of the text on a webpage. They change how the text looks without necessarily conveying any additional meaning or importance to the content. Some of the examples of physical tags are: <b>, <i>, <u>, etc.
These tags directly influence the style of the text, but they do not provide any semantic meaning about why a text is styled in a certain way.
Logical (Semantic) Tags
Logical or semantic tags, on the other hand, are used to add some logical or semantic meaning to the text. These tags provide information about the nature of the text. Some of the examples of logical tags are: <strong>, <em>, <mark>, etc.
Important Text Formatting Tags with Example
Important text formatting tags in HTML are listed below, along with a brief description and examples for each.
HTML Bold Text
(1) <b>: This tag is one of the most basic text formatting tags that is used to make the text bold. It does not imply any additional importance or emphasis. This tag is considered a physical tag because it directly affects how text looks on the web page but does not tell semantic or logical meaning to the content.
Example:
<!DOCTYPE html> <body> <p>This is regular text and <b>this is bold text</b>.</p> </body> </html>
Output:
(2) <strong>: This is a logical tag that defines text with strong importance. The text content inside formatting <strong> and </strong> tags is typically displayed in bold on the web page.
Example:
<!DOCTYPE html> <body> <p><strong>This is an important text</strong>, this is a normal text.</p> </body> </html>
HTML Italic Text
HTML provides two formatting tags to make text italic: <i> and <em>.
(1) <i>: This is a physical tag which defines italic text without implying any additional importance or emphasis.
Example :
<!DOCTYPE html> <body> <p>The word <i>pizza</i> comes from Italian.</p> </body> </html>
Output:
(2) <em>: The <em> tag is a logical tag in HTML which defines the emphasized text. The text content inside the <em> tag typically display in italic. However, the main purpose of using the <em> tag is semantic rather than stylistic. It tells browsers the text inside this tag should be pronounced with emphasis.
Here’s a simple example of how we can use the text formatting <em> tag in HTML:
Example:
<!DOCTYPE html> <body> <p>Do not turn off the device when it is <em>updating</em>.</p> </body> </html>
HTML <small> Tag
This text formatting tag defines smaller text. The content inside <small> element displays the text one font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has no effect. Here’s a simple example demonstrating how can we use the <small> tag:
Example:
<!DOCTYPE html> <body> <p>This is a normal text and <small>this is small text</small>.</p> </body> </html>
HTML <mark> Element
The <mark> element in HTML highlights text with a yellow background by default. We generally use this tag to draw attention to a specific part of text, such as terms found in a search within a document or important snippets of information. Here’s a simple example showing how the <mark> tag can be used to highlight text:
Example:
<!DOCTYPE html> <body> <p>Do not forget to buy <mark>fruits</mark> today.</p> </body> </html>
Output:
HTML <del> Element
In HTML, the <del> tag defines text that has been deleted from a document. The web browsers will usually strike a line over deleted text, indicating that it has been removed. The text enclosed within <del> tag not only changes the appearance of the text but also carries semantic meaning by explicitly marking the text as deleted. Look at the below example.
Example:
<!DOCTYPE html> <body> <p>My favorite fruit is <del>banana</del>, apple.</p> </body> </html>
HTML <ins> Tag
In HTML, the <ins> tag defines a text that has been inserted into a document. The browsers often display the newly added text with an underline. We usually use this tag in editing document where we need to add some new texts to an existing content.
Example:
<!DOCTYPE html> <body> <p>The meeting will be held on <ins>Thursday</ins>, not Tuesday as previously stated.</p> </body> </html>
Output:
HTML <sub> Tag
The <sub> tag in HTML defines a subscript text that appears half a character below the normal line. Sometimes, it appears in a smaller font. This tag is commonly used in mathematical expression, chemical formulas, or other contexts where a character needs to appear at the half a character below the normal line.
Example:
<!DOCTYPE html> <body> <p>Water is chemically represented as H<sub>2</sub>O.</p> </body> </html>
HTML <sup> Tag
In HTML, the <sup> tag defines a superscript text that appears half a character above the normal line. Sometimes, it is rendered in a smaller font. This tag is commonly used for footnotes, mathematical exponents, and other contexts where we need to appear a character slightly above the normal line of type.
Example:
<!DOCTYPE html> <body> <p>The formula for water is H<sub>2</sub>O and the speed of light in a vacuum is approximately 3 x 10<sup>8</sup> meters per second.</p> </body> </html>
Output:
HTML Text Formatting Tags
HTML formatting involves writing text contents more attractive and informative on a web page by writing bold, italic, and underlined. The formatting tags tell the browser how to display and format text. Here, we have listed commonly used formatting tags with short description in a table.
| Tag | Description |
|---|---|
| <b> | This tag defines a bold text. |
| <em> | This tag defines an emphasized text. |
| <i> | This tag defines italic text. |
| <small> | This tag defines smaller text. |
| <strong> | This tag defines an important text. |
| <sub> | This tag defines subscripted text. |
| <sup> | This tag defines superscripted text. |
| <ins> | This tag defines inserted text. |
| <del> | This tag defines deleted text. |
| <mark> | This tag defines marked or highlighted text. |
In this tutorial, we have explained various text formatting tags or elements in HTML through examples. We hope you will have understood the basic definition of each tag and practiced all examples.
Happy coding!!!