HTML Headings
HTML Headings are used to define the content hierarchy and structure of a webpage. They range from <h1> to <h6>, with <h1> being the most important heading and <h6> the least important. Proper use of headings helps improve readability, SEO, and accessibility.
Syntax of HTML Headings:
Here’s the basic syntax for creating headings in HTML:
<!DOCTYPE html>
<html>
<body>
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>
<h4>This is a Sub-Subheading</h4>
<h5>This is a Minor Subheading</h5>
<h6>This is the Smallest Heading</h6>
</body>
</html>
Note: the ‘h’ inside the tag should always be in lowercase.
Levels of HTML Heading Tags
HTML offers six levels of heading tags, each serving a different purpose in structuring your content:
<h1> – Main Heading (Largest)
- Represents the primary focus of the page, usually used for the main title.
- Use only one <h1> tag per page for the best SEO practices.
- Makes it clear to both users and search engines what the main topic is.
<h2> – Subheadings
- Ideal for dividing the content into major sections.
- If the content has further subsections, use <h3> to create a logical flow.
<h3> to <h6> – Smaller Headings
- These heading levels are used for finer subdivisions, gradually decreasing in size and importance.
- <h3> is used for subsections under <h2>, while <h4> to <h6> are used for additional, less important subdivisions.
- <h6> defines the least important heading.
Customization in HTML Heading Tags
Example: Here’s how you can apply basic styles to HTML heading tags:
<!DOCTYPE html>
<html>
<body>
<h1>H1 Heading</h1>
<!-- With the help of Style attribute you can customize
the size of the heading, As done below-->
<h1 style="font-size: 50px">H1 with new size.</h1>
<!-- Here font-size is the property by which we can
modify the heading. Here we kept it 50px i.e. 50 pixels -->
</body>
</html>
Output:
HTML Headings Example Output
Supported Browsers
Best Practices for Using HTML Headings
- Use Only One <h1> per Page: The <h1> tag should be reserved for the main title of the page. Too many <h1> tags can confuse both users and search engines about the content’s priority.
- Maintain a Logical Structure: Follow a logical hierarchy of headings (<h1> → <h2> → <h3>) to ensure content is organized. Don’t jump directly from <h1> to <h4>, as it can make the content harder to navigate.
- Keep Headings Descriptive: Headings should clearly describe the content that follows. This makes it easier for readers to understand what each section is about.
- Avoid Overusing Heading Tags: Headings are for organizing content, not for styling text. Use them where appropriate and avoid using heading tags for emphasis or styling alone.
HTML Headings – FAQs
What are HTML headings?
HTML headings are defined with the <h1> to <h6> tags, with <h1> being the highest (or most important) level and <h6> the lowest.
How many heading levels are there in HTML?
There are six levels of headings in HTML, from <h1> to <h6>.
What is the purpose of headings in HTML?
Headings are used to define the structure and hierarchy of the content, making it easier to read and navigate. They also help with SEO and accessibility.
What is the difference between <h1> and <h6>?
<h1> is the most important heading and is typically used for the main title, while <h6> is the least important and used for sub-sub-subheadings.
Can you use multiple <h1> tags in a single HTML document?
Yes, you can use multiple <h1> tags, but it is generally recommended to have only one <h1> per page to represent the main title or topic.
Do headings have any default styling?
Yes, headings have default styles that typically include larger font sizes and bold text to indicate their importance. These styles can be customized with CSS.
