The HTML heading, represented by the <h> tag, identifies the primary or secondary titles of different sections on a webpage. This element assists both users and search engines in understanding the hierarchy of information presented on the page by distinguishing between main and supporting content.
When text is put inside heading tags such as <h1>...</h1>, it is shown in bold by browsers, and its font size is set according to the level of the heading. There is less text size in each heading, beginning with <h1> and decreasing through h2, h3, h4, h5, and h6. HTML headings assist search engines in finding out how a page is organized and stored.
Note: The h1 heading tag should display the main keyword of the whole content of a webpage.
Six Levels of HTML Headings
HTML supports six levels of headings:
Example
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
Different levels in the hierarchy symbolize areas of the document.
- <h1> - The unique main heading for the page
- <h2> - Major sections
- <h3> - Subsections under <h2>
- <h4> - Sub-subsections under <h3>
- <h5> - Less significant sections
- <h6> - Headings that are considered least important
Note: Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big.
HTML headings can be utilized within nested elements as well. Below are various code snippets demonstrating how to incorporate heading elements within HTML markup.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the keyword of page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
required.
</p>
</body>
</html>
Output:
This is main heading of page.
h1 is the most important heading, which is used to display the keyword of page
This is first sub-heading
h2 describes the first sub heading of page.
This is Second sub-heading
h3 describes the second sub heading of page
We can use h1 to h6 tag to use the different sub-heading with their paragraphs if required.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| <h1> to <h6> to <h1> to <h6> | Yes | Yes | Yes | Yes | Yes |
Importance of using headings
In the realm of SEO (Search Engine Optimization), the utilization of headings plays a crucial role in aiding search engines to understand the layout and substance of a webpage.
For End Users: Employing a structured series of headings facilitates a more efficient and expedited browsing experience, aiding in swift navigation throughout a website.
Headings provide enhanced structure that facilitates accessibility for users relying on assistive technologies to navigate and access content.
Note: Headings should not just be used to make your text bold or big. Don't use them as decoration if they are meant to support the structure.
Using Heading tags in a document
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is the main heading of the page</h1>
<p><code>h1</code> is the most important heading, often used to highlight the page's main keyword.</p>
<h2>This is the first subheading</h2>
<p><code>h2</code> divides content into major sections.</p>
<h3>This is a second-level subheading</h3>
<p><code>h3</code> is used for subsections under <code>h2</code>.</p>
<p>Use <code><h1></code> to <code><h6></code> tags as needed to reflect your content structure.</p>
</body>
</html>
Styling headings with CSS
While headings typically adhere to standard sizes, you can adjust their dimensions by utilizing the style attribute or CSS.
<h1 style="font-size: 60px;">Custom H1 Size</h1>
<style>
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
h1 {
font-size: 32px;
color: red;
}
h2 {
font-size: 30px;
color: green;
}
</style>
Enhancing headings with HTML tags
To enhance the readability and semantic value of your content, consider incorporating additional HTML tags within heading tags.
Highlight Text with <mark>:
<h1>Important <mark>Notice</mark></h1>
Add Links with <a>:
<h2><a href="https://logic-practice.com">Visit Section</a></h2>
Emphasize with <em> and <strong>:
<h3>This is <em>emphasized</em> and <strong>important</strong></h3>
Use Superscript and Subscript:
<h4>The 10<sup>th</sup> Edition</h4>
<h5>Formula: H<sub>2</sub>O</h5>
Tooltips with <abbr>:
<h2><abbr title="Hypertext Markup Language">HTML</abbr> Overview</h2>
Insert Line Breaks with <br>:
<h3>This is Line 1<br>This is Line 2</h3>
Best practices for HTML headings
You should use HTML headings in the best way possible to guarantee that your content is easy to read and understand by all users. Put no more than one <h1> tag on each page so everyone - people and search engines - can easily see what the page is about. Titles in a document need to have a logical sequence. Make sure to go from <h1> to <h2>, and then add <h3>, not skipping those levels. Because of this, the document becomes more organized and easier to read.
It is important to provide clear and concise headings that give a brief overview of the upcoming content. Headings should primarily serve the purpose of organizing different sections of a webpage rather than just for visual appeal. Randomly creating headings or using an excessive amount of them can lead to confusion for website visitors and potentially harm your search engine ranking. By maintaining a logical heading structure, both the readability and comprehension of the content can be enhanced.
Conclusion
Utilizing HTML heading elements is crucial for structuring web content both in terms of appearance and semantic meaning. Correct implementation of heading tags such as <h1> through <h6> enables developers to organize content coherently, enhancing user experience, increasing website accessibility, and boosting search engine optimization. It is essential to organize thoughts logically, describe sections effectively with headings, and avoid solely using them for design purposes.
Enhancing the appearance and functionality of your headings can be achieved by incorporating additional HTML tags and CSS styling. By adhering to established guidelines, you ensure that your web pages remain user-friendly and are easily indexed by search engines.