HTML headings are used to define the headings of a web page. Headings are important for both organizing content and improving accessibility and SEO (Search Engine Optimization). HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the highest level (most important) and <h6> being the lowest level (least important).
Syntax and Usage
<h1> to <h6> Tags
each heading level is defined with a specific tag:
<h1>: Defines the most important heading.
<h2>: Defines the second most important heading.
<h3>: Defines the third most important heading.
<h4>: Defines the fourth most important heading.
<h5>: Defines the fifth most important heading.
<h6>: Defines the least important heading.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>This is an H1 heading</h1>
<p>This is a paragraph under the H1 heading.</p>
<h2>This is an H2 heading</h2>
<p>This is a paragraph under the H2 heading.</p>
<h3>This is an H3 heading</h3>
<p>This is a paragraph under the H3 heading.</p>
<h4>This is an H4 heading</h4>
<p>This is a paragraph under the H4 heading.</p>
<h5>This is an H5 heading</h5>
<p>This is a paragraph under the H5 heading.</p>
<h6>This is an H6 heading</h6>
<p>This is a paragraph under the H6 heading.</p>
</body>
</html>
Importance of Headings
Organizational Structure: Headings help to structure the content, making it easier for readers to understand and navigate through the document.
SEO (Search Engine Optimization): Search engines use headings to understand the content of a webpage. Proper use of headings can improve the page’s ranking in search results.
Accessibility: Screen readers and other assistive technologies use headings to help users navigate through the content. Properly structured headings can enhance the accessibility of a web page.
Best Practices
Use headings hierarchically: Start with <h1> for the main heading and use <h2> to <h6> for subheadings in a hierarchical manner.
Avoid skipping heading levels: Do not skip heading levels (e.g., from <h1> directly to <h3>) as it can confuse both users and search engines.
Keep headings concise and descriptive: Headings should clearly indicate the content of the section they introduce.
Use one <h1> per page: Typically, a webpage should have only one <h1> element that represents the main topic or title of the page. Use <h2> to <h6> for subheadings.