Learn Java, Angular, SQL with Coding Exercises & Career Tips

Heading

HTML headings are used to define titles or subtitles within a webpage. They help structure the content visually and semantically, making it easier for users and search engines to understand the importance and organization of different sections.
In HTML, there are six levels of headings.
<h1> defines the most important heading and <h6> defines the least important.

Headings are used to define the titles or section names in an HTML document.
There are six heading tags in HTML <h1> to <h6>.
<h1> indicates the highest level or most important heading.
<h6> is used for the least important heading.
Headings are automatically styled by browsers, with <h1> being the largest and <h6> the smallest.
They help in organizing content and improving SEO and accessibility.
Headings should be used in a logical order (Ex- avoid skipping from <h1> to <h4> directly).

Syntax:

<h1>This is a top-level heading</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>This is a the least important heading</h6>

Example of <h1> Heading
<h1> is the most important and largest heading, typically used for page titles.

<!DOCTYPE html>
<html>
 <head>
  <title>H1 Example</title>
 </head>
 <body>
  <h1>This is a Heading 1</h1>
 </body>
</html>

Output:

Example of <h2> Heading
<h2> is used for main section titles or subtitles under an <h1>.

<!DOCTYPE html>
<html>
 <head>
  <title>H2 Example</title>
 </head>
 <body>
  <h2>This is a Heading 2</h2>
 </body>
</html>

Output:

Example of <h3> Heading
<h3> is often used for subheadings inside <h2> sections.

<!DOCTYPE html>
<html>
 <head>
 <title>H3 Example</title>
 </head>
 <body>
  <h3>This is a heading 3</h3>
 </body>
</html>

Output:

Example of <h4> Heading
<h4> is suitable for subsection titles within <h3> sections.

<!DOCTYPE html>
<html>
 <head>
  <title>H4 Example</title>
 </head>
 <body>
  <h4>This is a Heading 4</h4>
 </body>
</html>

Output:

Example of <h5> Heading
<h5> is rarely used but can help in deeply nested or complex documents.

<!DOCTYPE html>
<html>
 <head>
  <title>H5 Example</title>
 </head>
 <body>
  <h5>This is a Heading 5</h5>
 </body>
</html>

Output:

Example of <h6> Heading
<h6> is the smallest and least important heading, mostly used in minor notes or detailed subsections.

<!DOCTYPE html>
<html>
 <head>
  <title>H6 Example</title>
 </head>
 <body>
  <h6>This is a Heading 6</h6>
 </body>
</html>

Output:

Why Are Heading Important ?

Semantic Structure: Headings define a content hierarchy, making it easier for search engines and screen readers to interpret the webpage.
Improved Readability: They break content into readable sections for better user experience.
SEO Benefits: Proper use of headings helps search engines understand the page structure, potentially improving rankings.
Styling: Headings are commonly styled using CSS for font size, color, spacing and more.
Navigation Aid: Especially in long documents, headings act like anchors, helping users jump between sections easily.