HTML Subheader

We will discuss the HTML subheader in this article. HTML subheader means the HTML subheading and we can create subheadings utilizing HTML tags and CSS properties.

There are two methods by which we can create subheadings in HTML:

• Utilizing HTML element:

In HTML, there are various heading tags that define different levels of headings. The HTML heading tags are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The HTML heading tags are the block-level element. The <h1> is the highest level of heading and <h6> is the lowest level of heading.

We can create subheaders utilizing the <h2>, <h3>, <h4>, <h5> and <h6> HTML elements.

Note: Heading tags are not used for defining the heading size or making the bold font but headings are used to tell the importance of the content on the web page.

• Utilizing CSS property:

We can utilize the font-size and font-weight CSS properties to set the size and weight of the HTML element for creating the subheaders.

Let us understand HTML heading tags and CSS properties properly.

HTML heading tags

Headings are defined from h1 to h6 in HTML. Following are the heading elements in HTML which are described below:

• h1 element:

It is utilized to add the main heading on the web page. The h1 element is the most important.

Syntax:

The <h1> is the opening tag, the </h1> is the closing tag and the content is written inside the opening and closing tags of the h1 element.

• h2 element:

It is utilized to add subheadings to a web page. The h2 element is of less importance than the h1 element.

Syntax:

The <h2> is the opening tag, the </h2> is the closing tag and the content is written inside the opening and the closing tag of the h2 element.

• h3 element:

It is utilized to add subheadings to a web page. The h3 element is less important than the h2 element.

Syntax:

The <h3> is the opening tag, the </h3> is the closing tag and the content is written inside the opening and the closing tag of the h3 element.

• h4 element:

It is utilized to add subheadings to a web page. The h4 element is of less importance than the h3 element.

Syntax:

The <h4> is the opening tag, the </h4> is the closing tag and the content is written inside the opening and closing tag of the h4 element.

• h5 element:

It is utilized to add subheadings to a web page. The h5 element is of less importance than the h4 element.

Syntax:

The <h5> is the opening tag, the </h5> is the closing tag and the content is written inside the opening and the closing tag of the h5 element.

• h6 element:

It is utilized to add subheadings to a web page. The h6 element is of less importance than the h5 element.

Syntax:

The <h6> is the opening tag, the </h6> is the closing tag and the content is written inside the opening and the closing tag of the h6 element.

Note:

• The <h1> element should only be used once on the same web page. It should only be used for creating the main heading.
• There are no limits for the usage of <h2>, <h3>, <h4>, <h5> and <h6> tags on the same web page.

Demonstration for creating the subheaders utilizing the HTML subheading tags

We will utilize the heading tags from <h1> to <h6> in this demonstration.

The <h1> tag is utilized for a higher level of heading.

The <h2>, <h3>, <h4>, <h5> and <h6> tags are utilized for the lower level of heading, i.e., subheaders.

Code:

Output:

Here is the output in which we can witness the subheaders created by utilizing the HTML heading tag.

font-size CSS Property

We can utilize font-size CSS property for making the sub headers.

Syntax:

The "font-size" is the CSS property in the above-given syntax and length can be written in px, cm, in, mm, etc.

Demonstration for creating the subheaders utilizing the font-size CSS property

Let us understand how to create the subheading with the help of the font-size CSS property.

Code:

Output:

Here is the output in which we can witness the subheaders created through the utilization of CSS properties.

Browsers support

Following are the browsers that support the <h1> tag, <h2> tag, <h3> tag, <h4> tag, <h4> tag, <h5> tag, <h6> tag, font-size CSS property and font-weight CSS property:

• Google Chrome
• Firefox
• Opera
• Microsoft Edge
• Safari

Conclusion:

We have understood the HTML subheader in this article. We have understood that we can create subheaders utilizing the HTML elements and CSS properties.