Headings

Learn how to use HTML headings to structure your content for better accessibility and SEO.

Loading...
Headings

Headings are crucial for defining the content hierarchy on a web page. They not only improve readability for users but also play a significant role in accessibility and SEO by helping screen readers and search engines understand the structure of your content.

Common elements:


h1 to h6

The <h1> to <h6> elements represent six levels of headings:

  • <h1> is the most important (used once per page for the main title).
  • <h6> is the least important.
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
 </body>
</html>

The <h1> to <h6> HTML elements include both opening and closing tags.


hgroup

The <hgroup> element groups multiple heading levels together, typically a main title with a subtitle.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <hgroup>
   <h1>Product Name</h1>
   <h2>Tagline or Subtitle</h2>
  </hgroup>
 </body>
</html>

The <hgroup> HTML element includes both opening (<hgroup>) and closing (</hgroup>) tags.

Note: <hgroup> has limited browser and screen reader support. It’s rarely used in modern HTML, so prefer simpler semantic patterns unless grouping is necessary.


Support my work!