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><hgroup>
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.
👉 Next tutorial: HTML Text Content Elements