Headings (<h1> to <h6>) html tag
Heading tag is used to represent web page title/heading, title or topic information in large size in HTML web page. Heading tag displays your web page content information structure and heading text hierarchy order in largest text size to smallest text size order. Generally, HTML heading tag is used to display text or web page title information from heading h1 <h1> to heading h6 <h6>, where in HTML web page <h1> displays text title or heading information in largest font size and heading <h6> displays text or web page content information in smallest font size.
So let’s understand heading tag in HTML web page.
HTML Heading Tag Overview.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Explore Html Heading Tag</title>
</head>
<body>
<h1>You Can See Heading 1 Tag</h1>
<p>You Can See Heading 1 Above</p>
<h2>You Can See Heading 2 Tag</h2>
<p>You Can See Heading 2 Above</p>
<h3>You Can See Heading 1 Tag</h3>
<p>You Can See Heading 3 Above</p>
<h4>You Can See Heading 4 Tag</h4>
<p>You Can See Heading 4 Above</p>
<h5>You Can See Heading 5 Tag</h5>
<p>You Can See Heading 5 Above</p>
<h6>You Can See Heading 6 Tag</h6>
<p>You Can See Heading 6 Above</p>
</body>
</html>
Heading tag explanation.
- <h1> – Represents the most important web page title/heading text information in largest font size in any designed HTML web page. Usually, heading h1 tag is used to represent the main title/heading information of the current web page.
- <h2> – Heading h2 tag is smaller in font size than heading h1 tag and it represents the subtitle or subheading information of the web page inside heading h1 <h1>. Heading h2 helps you to divide the web page heading topic into subsections.
- <h3> – Heading h3 HTML tag displays the web page information in smaller font size than heading <h2>. You can represent the heading h3 web page text as per your requirement. Heading h3 tag creates multiple text sections with heading h2 <h2>.
- <h4> – Heading h4 tag helps you to represent the web page text subtitle inside heading h3 <h3> in your web page. Heading h4 tag displays smaller font size than heading <h3>.
- <h5> – Heading tag h5 along with heading h4 <h4> represents web page subtitle or web text or information. You can use heading h5 tag in web page as per your requirement.
- <h6> – Heading h6 represents the smallest font text size information, sometimes you use heading h6 to display smallest text information section, subtitle, heading.
Use of HTML web page headings tag.
So let’s understand a heading tag stylesheet example in HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>use css style to decorate heading tag</title>
<style>
h1 {
color: red;
font-size: 5em;
text-align:center;
font-family:monotype corsiva;
}
h2 {
color: blue;
font-size: 3em;
text-align:center;
font-family:Times New Roman;
}
h3 {
color: lime;
font-size: 2em;
text-align:center;
font-family:bookman old style;
}
h4 {
color: pink;
font-size: 1em;
text-align:center;
font-family:bookman old style;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
About heading tag.
- Hierarchical web page structure – Heading tag displays text information or content written in your HTML web page in increasing font size to decreasing font size order. HTML web developers can use headings from h1 to h6 in web pages as per their requirement in web development.
- Easy accessibility – Online search engine screen readers navigate to web page title heading information through HTML web page content, where it is considered important to use heading tags to increase HTML web page user access.
- Helpful in SEO – Heading tags play an important role in on-page SEO of any web page, and they can be used in Google, Bing, Yahoo and other search engines to explain or divide the web page topic into title or subtitle, sections, the default structure of a web page. In today’s time, heading tags can make the search engine optimization (SEO), web crawling, indexing of your web page or website pages faster.
In the above HTML web page example, heading tags are applied in different colors and font type sizes, you can make necessary changes as per your web development needs.
