loader image

Basic Formatting Tags in HTML

When we create a web page, we add tags that give meaning to the page and allow browsers to display the appropriate structure to users. In this tutorial, we will learn about basic text formatting tags in HTML.

Headings

In HTML, there are six levels of headings. The tag <h1> is used for main headings. <h2> is used for subheadings. For additional sections beneath the subheadings, you can use <h3>, <h4>, <h5> and <h6> heading elements. The heading <h1> is the largest, and the contents of <h6> are the smallest.

For example:

<h1>This is a Main Heading</h1>
<h2>This is a subheading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
Output

This is a Main Heading

This is a subheading

This is a Level 3 Heading

This is a Level 4 Heading

This is a Level 5 Heading
This is a Level 6 Heading

Paragraphs

In HTML, the <p> tags can be used to define a paragraph of text. To form a paragraph use an opening tag and a closing tag to enclose the words that make up the paragraph. A browser will display each paragraph on a new line, with some space between it and other paragraphs.

For example,

<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. </p>
Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

Line Break

To add a line break, you can use the <br/> tag. <br/> is an empty element which means it does not include any content and need no close tag at all.

For example,

<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.<br/> Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Underline

To display a text with an underline, we can place it between the tags <u> and </u>.

For example,

<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. <u>A small river named Duden flows by their place and supplies</u> it with the necessary regelialia.</p>
Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Bold

To make a text bold, we can place it between the tags <b> and </b>.

For example,

<p>Far far away, behind the word mountains, far from the countries <b>Vokalia</b> and Consonantia, there live the blind texts.</p>
Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Italic

To make text italic, we can enclose it between the tags <i> and </i>.

For example,

<p> Far far away, behind the word mountains, far from the countries <i>Vokalia</i> and Consonantia, there live the blind texts.</p>
Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Superscript

To display some text as superscript, we can enclose it between <sup> and </sup>. Superscripted texts are commonly used to write date suffixes or mathematical concepts such as raising a number to a power.

For example,

<p> The Pythagorean theorem is often expressed as the following equation : a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup> <p>
Output

The Pythagorean theorem is often expressed as the following equation : a 2 + b 2 = c 2

Subscript

To display some text as subscript, we can enclose it between <sub> and </sub>. Subscripted texts are commonly used with foot notes or chemical formulas.

For example,

<p> The chemical formula of water is H<sub>2</sub>O <p>
Output

The chemical formula of water is H2O

Font

To set the font size, color and face for a text, it can be enclosed within the <font> and </font> tag.

For example,

<font color="red" face="Times New Roman" size="2">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</font>
Output
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

This tag is deprecated and should not be used in new websites. For styling text the CSS Fonts properties is used.

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Scroll to Top