HTML stands for HyperText Markup Language, which is the standard language for creating web pages. HTML uses tags to define the structure and content of a web page, such as headings, paragraphs, lists, images, links, etc.

One of the most important aspects of web design is the use of headings and formatting tags to organize and style the web page. Headings are used to divide the web page into sections and sub-sections, and to indicate the hierarchy of information. Formatting tags are used to modify the appearance and behavior of the text, such as bold, italic, underline, color, font, alignment, etc.

In this blog post, we will learn how to use some of the most common heading and formatting tags in HTML, and how they affect the web page layout and presentation.

Heading tags

Heading tags are used to create headings of different levels on a web page. There are six levels of headings in HTML, from <h1> to <h6>, where <h1> is the largest and most important, and <h6> is the smallest and least important. Heading tags should be used in a logical order, starting with <h1> for the main title of the web page, and then using lower levels for sub-headings.

For example, the following HTML code creates a web page with three headings:

<h1>Designing a web page using heading and formatting tags in HTML</h1>
<h2>Heading tags</h2>
<h3>Example of heading tags</h3>

The output of this code looks like this:

Designing a web page using heading and formatting tags in HTML

Heading tags

Example of heading tags

As you can see, the headings are displayed with different sizes and weights, depending on their level. You can also use CSS (Cascading Style Sheets) to change the appearance of the headings, such as color, font-family, margin, padding, etc.

Formatting tags

Formatting tags are used to change the appearance or behavior of the text on a web page. There are many formatting tags in HTML, but some of the most common ones are:

• <b>: makes the text bold
• <i>: makes the text italic
• <u>: underlines the text
• <strike>: strikes through the text
• <sup>: makes the text superscript
• <sub>: makes the text subscript
• <font>: changes the font attributes of the text, such as color, size, face
• <mark>: highlights the text
• <small>: makes the text smaller
• <big>: makes the text bigger
• <center>: aligns the text to the center
• <left>: aligns the text to the left
• <right>: aligns the text to the right
• <justify>: justifies the text

For example, the following HTML code creates a web page with some formatted text:

<p>This is a <b>bold</b> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is an <u>underlined</u> text.</p>
<p>This is a <strike>strikethrough</strike> text.</p>
<p>This is a <sup>superscript</sup> text.</p>
<p>This is a <sub>subscript</sub> text.</p>
<p>This is a <font color="red" size="5" face="Arial">red</font>, <font color="green" size="4" face="Verdana">green</font>, and <font color="blue" size="3" face="Times New Roman">blue</font> text.</p>
<p>This is a <mark>highlighted</mark> text.</p>
<p>This is a <small>small</small> text.</p>
<p>This is a <big>big</big> text.</p>
<p><center>This is a centered text.</center></p>
<p><left>This is a left-aligned text.</left></p>
<p><right>This is a right-aligned text.</right></p>
<p><justify>This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text.</justify></p>

The output of this code looks like this:

This is a bold text.

This is an italic text.

This is an underlined text.

This is a strikethrough text.

This is a ^superscript text.

This is a _subscript text.

This is a red, green, and blue text.

This is a highlighted text.

This is a small text.

This is a big text.

This is a centered text.

This is a left-aligned text.

This is a right-aligned text.

This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text. This is a justified text.

As you can see, the formatting tags change the way the text is displayed on the web page. You can also use CSS to customize the formatting of the text, such as background-color, border, line-height, text-decoration, text-transform, etc.

Conclusion

In this blog post, we have learned how to use some of the most common heading and formatting tags in HTML, and how they affect the web page layout and presentation. Headings and formatting tags are essential for creating a well-structured and attractive web page. However, they are not the only tags in HTML, and there are many more elements and attributes that you can use to create a dynamic and interactive web page. To learn more about HTML, you can visit the following resources:

Download code Youtube