html

HTML Formatting

HTML formatting determines the formatting of text to achieve a decent appearance. These tags make it possible to format the content without using CSS. In HTML there are multiple tags that are used for text formatting among them most tags are directly related to the document’s physical appearance for example <b>, <i>, <big> etc. While some HTML tags have logical meaning for example <strong>, <address>, etc. This write-up will explain how an HTML element affects the physical appearance of any HTML document.

Each HTML document must have some text such as headings, paragraphs, etc. So a question must be knocking at your mind! i.e. how to add the text on the page and how to style the text i.e. how to highlight the important content, how to bold the content, etc. The bellow-given HTML tags will provide the solution of all the above mentioned questions:

HTML Headings

The HTML headings determine the headings or subheadings in any webpage. The HTML headings are graded between <h1> to <h6>. <h1> shows maximum priority while <h2> has slightly less priority and so on up to <h6> which shows minimum priority.

Example
These headings play a significant role to format an HTML document as shown in the following example:

<html>
<head>
<title>HTML Formatting Tags</title>
</head>
<body>
<h1>Content within h1</h1>
<h2>Content within h2</h2>
<h3>Content within h3</h3>
<h4>Content within h4</h4>
<h5>Content within h5</h5>
<h6>Content within h6</h6>
</body>
</html>

The above piece of code will provide the following output:

HTML <b> tag

<b> tag used to bold the text.

Example

Below given code enclosed “linuxhint.com” in the <b> tag:

<p>Welcome to <b>linuxhint.com</b></p>

As a result we will get the following output:

HTML <i> tag

<i> tag convert the text into italic style.

Example

The below given code utilizes the <i> tag to show important content in italic style:

HTML <strong> tag

<strong> tag is used to make the content prominent.

Example

The following piece of code will implement the <strong> tag to emphasize the important content:

<p>Welcome to <strong>linuxhint.com</strong></p>

It generates the following output:

HTML <mark> tag

It is used to highlight some specific content

Example

The below piece of code will highlight the content that comes within the <mark> tag.

<p>This paragraph will provide some <mark>important</mark> content</p>

The <mark> tag will generate the following output:

HTML <em> tag

<em> used to emphasize the certain text. The content enclosed within <em> tag appear in italic font style.

Example

This piece of code will emphasize the significant text:

<p><em>This paragraph shows emphasized content</em></p>

Output will be something like this:

HTML <small> tag

It decreases the text size.

Example

This example elaborates the working of <small> tag:

<p>Welcome to linuxhint.com</p>
 <p><small>This paragraph utilized small tag</small></p>

Above given code includes two paragraphs. A normal paragraph and a paragraph with <small>tag. Observe the difference in the following output:

HTML <big> tag

It increases the text size.

Example

The below piece of code creates two paragraphs first one is a normal paragraph while the second one utilizes the <big> tag:

<p>normal paragraph</p>
<p><big>big tag is utilized in this paragraph</big></p>

The above code will show the following output:

HTML <u> tag

<u> tag is used to underline the content.

Example

The below code underlined the text that is enclosed in the <u> tag

<p>Underline the <u>important </u> content</p>

Above code generates the following output:

HTML <sub> & <sup> tag

<sub> used to make the content subscript, while <sup> tag makes the content superscript.

Example

This code creates two paragraphs, first one utilizes the <sup> tag while second paragraph utilizes the <sub> tag:

<p>This paragraph contain <sup>superscripted</sup> content </p>
 <p>This paragraph contain<sub>subscripted</sub> content</p>

Following output will appear for the above code:

HTML <ins> & <del> tag<

The <ins> tag specify the inserted content, while <del> specify the deleted content in the document.

Example

This example will utilize the insert and delete tags in a paragraph:

<p>Delete <del>unnecessary</del> content and insert <ins>relavent</ins></p>

The below given output will determine the working of <ins>, <del> tag:

HTML Preformatted tag

HTML offers a <pre> tag to show the preformatted content i.e. it will show the same content as written in the HTML file.

Example

The following example will help you understand the concept of <pre> tag:

<body>
<pre>
 this   is
 an example to show
 you how predefined tag
 works
</pre>

Normally if we write something in the <p> tag, the <p> tag automatically eliminates the extra spaces, line breaks, etc. However, the predefined tag works differently. The following output will verify that <pre> tag display the exact content as written in the HTML document:

Conclusion

HTML formatting tags can perform multiple functionalities on the text like bold, italic, subscript, superscript, highlight, emphasize, insert, delete, underline, using <b>, <i>, <sub>, <sup>, <mark>, <em>, <ins>, <del>, <u> tags respectively. This write-up described a comprehensive overview of different formatting tags along with their appropriate examples to have profound understanding of each formatting tag.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.