In this tutorial, we will explore the concept of an HTML subheader. An HTML subheader, also known as an HTML subheading, can be generated using HTML tags and CSS attributes.
Two approaches exist for generating subheadings in HTML:
- Using HTML tag:
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:
The CSS properties font-size and font-weight can be employed to define the dimensions and thickness of the HTML element when generating subheaders.
Let's delve into the correct usage of HTML heading elements and CSS attributes.
HTML heading tags
In HTML, headings are structured from h1 to h6. Below are the various heading elements in HTML explained:
-
- h1 element:
The h1 element is essential for adding the primary heading to a webpage. Its significance lies in being the most crucial element for structuring content.
Syntax:
<h1>Content…</h1>
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:
The h2 tag is commonly employed to introduce subsections within a webpage and holds a lower level of significance compared to the h1 tag.
Syntax:
<h2>Content…</h2>
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:
The h3 tag is commonly employed to insert subheadings on a webpage, with a lower level of significance compared to the h2 tag.
Syntax:
<h3>Content…</h3>
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:
The h4 element is commonly used for incorporating subsection headings within a webpage, with a lower level of significance compared to the h3 element.
Syntax:
<h4>Content…</h4>
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:
The h5 element is commonly employed for introducing subsection titles within a webpage, with a lower level of significance compared to the h4 element.
Syntax:
<h5>Content…</h5>
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:
The h6 element is commonly used for introducing subheadings within a webpage, with a lower level of significance compared to the h5 element.
Syntax:
<h6>Content…</h6>
The <h6> serves as the commencement tag, while the termination tag is denoted by the </h6>. The actual content is placed between the opening and closing tags 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
In this example, we will make use of the header tags ranging from <h1> to <h6>.
The <h1> tag is employed to designate a heading of greater hierarchy.
The <h2>, <h3>, <h4>, <h5> and <h6> tags are utilized for the lower level of heading, i.e., subheaders.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Subheader</title>
<style>
h1 {
color: brown;
}
</style>
</head>
<body>
<h1>HTML Subheader</h1>
<h2>It is a heading level h2.</h2>
<h3>It is a heading level h3.</h3>
<h4>It is a heading level h4.</h4>
<h5>It is a heading level h5.</h5>
<h6>It is a heading level h6.</h6>
</body>
</html>
Output:
The following result demonstrates the subheadings generated through the use of the HTML heading element.
font-size CSS Property
The font-size CSS attribute can be employed to style subheadings.
Syntax:
font-size: length;
The CSS property "font-size" in the provided syntax allows specifying the size of text content and can be expressed in units such as pixels (px), centimeters (cm), inches (in), millimeters (mm), and more.
Demonstration for creating the subheaders utilizing the font-size CSS property
In this tutorial, we will explore the process of generating a subheading by utilizing the font-size CSS attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creating subheaders utilizing the CSS property.</title>
<style>
h1 {
color: brown;
}
.subheader-h2 {
font-size: 32px;
font-weight: bold;
}
.subheader-h3 {
font-size: 24px;
font-weight: bold;
}
.subheader-h4 {
font-size: 18.72px;
font-weight: bold;
}
.subheader-h5 {
font-size: 13.28px;
font-weight: bold;
}
.subheader-h6 {
font-size: 10.72px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h1>Subheaders</h1>
<div class="subheader-h2">
It is a subheader level 2.
</div> <br>
<div class="subheader-h3">
It is a subheader level 3.
</div> <br>
<div class="subheader-h4">
It is a subheader level 4.
</div> <br>
<div class="subheader-h5">
It is a subheader level 5.
</div> <br>
<div class="subheader-h6">
It is a subheader level 6.
</div> <br>
</div>
</body>
</html>
Output:
Below is the result showcasing the subheadings generated by employing CSS attributes.
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:
In this article, we have explored the concept of HTML subheaders. It has been revealed that subheaders can be generated by leveraging HTML elements along with CSS styles.