HTML Heading – H1 to H6 Tags in HTML
Free Web development courses with real-time projects Start Now!!
HTML heading is a basic need to make our web-page attractive and systematic. In order to achieve this, HTML 5 provides six basic headings tags (h1 to h6) that are displayed on the web-page as titles, subtitles or any other relevant details. Let us learn these heading in HTML in details now.
Importance of HTML Heading
1. In order to attract and engage the users, it is important to drive their attention to the most important domains of the web page. HTML headings highlight these important domains and provide a proper structure to the HTML document.
2. Headings are useful for various such engines, such as Google, to index the layout and content of their web pages.
3. Headings offer an efficient and fast perusal of the web-page, for the users.
4. HTML headings can be nested with other elements and provide a better structure to the HTML document.
5. The purpose of the overall page can be depicted using these headings.
HTML Header Tags
There are six different heading tags in HTML <h1> to <h6>. The heading defined within <h1> is the most important i.e. larger font-size and font-weight whereas <h6> is the least important i.e. least font-size. The heading tags can be styled using the style attribute and its properties. By default, the CSS styling used for headings by most of the browsers are:
1. H1 tag in HTML
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
2. H2 tag in HTML
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
3. H3 tag in HTML
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
4. H4 tag in HTML
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
5. H5 tag in HTML
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
6. H6 tag in HTML
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
These default CSS attributes can be overwritten using the style attribute. Following is the code representing the six HTML headings:
<html> <head> <title>DataFlair</title> </head> <body> <h1>DataFlair Heading 1</h1> <h2>DataFlair Heading 2</h2> <h3>DataFlair Heading 3</h3> <h4>DataFlair Heading 4</h4> <h5>DataFlair Heading 5</h5> <h6>DataFlair Heading 6</h6> </body> </html>
Output
CSS Styling
The heading elements can be styled using CSS using the style attribute. We can set their alignment, font color, font family, etc. Their existing CSS properties can also be overridden as per the developer’s preference.
1. Setting Alignment in HTML
By default, the alignment is set to left. This can be overwritten using the text-align property of style attribute.
<html> <head> <title>DataFlair</title> </head> <body> <h1 style="text-align: center;">DataFlair Heading 1</h1> <h2 style="text-align: right;">DataFlair Heading 2</h2> <h3 style="text-align: left;">DataFlair Heading 3</h3> <h4 style="text-align: justify;">DataFlair Heading 4</h4> </body> </html>
Output
2. Setting Background-color property in HTML
<html> <head> <title>DataFlair</title> </head> <body> <h1 style="background-color: rgb(50, 168, 164);">DataFlair Heading 1</h1> <h2 style="text-align: right;">DataFlair Heading 2</h2> </body> </html>
Output
3. Setting text-color in HTML
<html> <head> <title>DataFlair</title> </head> <body> <h1 style="color: rgb(127, 158, 219);">DataFlair Heading 1</h1> <h2 style="text-align: right;">DataFlair Heading 2</h2> </body> </html>
Output
Other CSS properties can also be set or overwritten using a similar approach.
Nested HTML Heading
We can nest headings with other HTML elements or heading elements themselves in order to show some content under them or provide a structure to the document. Following are some examples of nested HTML heading:
1. Heading Element and Paragraph Element in HTML
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <h1>Welcome to DataFlair </h1> <p>Walking with the crowd is good. But performing outstanding in the crowd is what makes you different. This is what DataFlair aims to make its students</p> <h2>Vision</h2> <p>To provide the best training in latest cutting edge technologies across the globe and help learners carve their career.</p> <h3>Mission</h3> <p>To provide quality education at an affordable price to help everyone develop their career in the latest technologies. We aim to reach the mass through our unique pedagogy model for Self-paced learning and Instructor-led learning that includes personalized guidance, lifetime course access, 24×7 support, live project, resume and interview preparation and ready to work level learning. We aim to provide real-time technical experience to learners through our expert instructors. We will strive to continuously upgrade our offerings ensuring that we can cover all technologies and courses that are up-to-date with the latest industry needs.</p> <br> <p>(We can use h1 to h6 tags to use the different sub-heading with their paragraphs if required.)</p> </body> </html>
Output
2. Headings Nested with headings in HTML
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <h1>Welcome to DataFlair </h1> <h2> HTML 5</h2> <h3> Data Science </h3> <h4> Big Data </h4> </body> </html>
Output
Tips while using HTML Heading
- Use only one <h1> tag in an HTML document, as it gives the overall purpose of the web-page.
- Do not use headings for setting the font-size or font-weight. Use CSS properties instead i.e. headings should be used as headings only.
- Browsers automatically set a default margin everytime we use headings. This can be easily overwritten as per the preference.
- Use the heading levels consecutively i.e. do not jump to h3 after h1.
Summary
Html headings are of great importance in the development of HTML pages. They help in navigation of important topics, section designing and an efficient perusal. We have looked at the basic six HTML heading tags (h1 to h6), their default CSS settings and how to override or set their CSS properties. We’ve also looked at nesting of heading elements in order to achieve a proper and attractive structure for the web-pages.
Hope you liked the article. Do share your feedback in the comment section!!
Did we exceed your expectations?
If Yes, share your valuable feedback on Google
