Introduction
In this chapter, you will learn about HTML headings, which are used to define the headings of a webpage. Headings help structure the content, making it easier for users to read and understand the information. By the end of this chapter, you will know how to use different heading levels to create a well-organized HTML document.
What are HTML Headings?
HTML headings are used to create titles and subtitles in a webpage. There are six levels of headings, from <h1> to <h6>, with <h1> being the highest level and <h6> the lowest.
Levels of Headings
<h1>: Main Heading
The <h1> element represents the main heading of a webpage. It is the most important heading and should be used only once per page.
<h1>This is the Main Heading</h1>
<h2>: Subheading
The <h2> element represents subheadings that come under the main heading. It is used to divide content into sections.
<h2>This is a Subheading</h2>
<h3>: Sub-subheading
The <h3> element represents subheadings that come under <h2> headings. It is used for further subdivision of content.
<h3>This is a Sub-subheading</h3>
<h4>: Sub-sub-subheading
The <h4> element represents headings under <h3> headings, used for more detailed subdivisions.
<h4>This is a Sub-sub-subheading</h4>
<h5>: Sub-sub-sub-subheading
The <h5> element represents headings under <h4> headings, for very detailed subdivisions.
<h5>This is a Sub-sub-sub-subheading</h5>
<h6>: Sub-sub-sub-sub-subheading
The <h6> element represents the lowest level of heading, used for the smallest subdivisions of content.
<h6>This is a Sub-sub-sub-sub-subheading</h6>
Using Headings for Structure
Headings should be used to create a logical structure for your content. This helps both users and search engines understand the hierarchy and importance of the content on your page.
Example of Structured Headings
<h1>Website Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<p>Content for subsection 1.1</p>
<h3>Subsection 1.2</h3>
<p>Content for subsection 1.2</p>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<p>Content for subsection 2.1</p>
<h4>Subsection 2.1.1</h4>
<p>Content for subsection 2.1.1</p>
Best Practices for Using Headings
Use <h1> for the Main Title
Only use one <h1> per page to represent the main topic or title of the page.
Use Headings in Order
Ensure that headings follow a logical order (e.g., <h2> follows <h1>, <h3> follows <h2>, etc.).
Avoid Skipping Levels
Do not skip heading levels (e.g., avoid using <h4> directly after <h2> without an intervening <h3>).
Use Headings for Structure, Not Styling
Use headings to structure your content, not just for styling. Use CSS for styling headings.
Conclusion
HTML headings are essential for creating a structured and accessible webpage. By using headings correctly, you can improve the readability and SEO of your web pages. Understanding the hierarchy and proper use of headings is a fundamental skill in web development.