How to Use Headings in HTML

<!DOCTYPE html>
<html>
<head>
  <title>Headings Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    h1 { color: #2563eb; border-bottom: 2px solid #2563eb; }
    h2 { color: #16a34a; }
    h3 { color: #dc2626; }
  </style>
</head>
<body>
  <h1>Main Title (h1)</h1>
  <p>This is the main heading of the page. Use only one h1 per page.</p>
  
  <h2>Section Heading (h2)</h2>
  <p>Major sections use h2 tags.</p>
  
  <h3>Subsection Heading (h3)</h3>
  <p>Subsections use h3 tags.</p>
  
  <h4>Sub-subsection (h4)</h4>
  <p>Even deeper nesting uses h4.</p>
  
  <h5>Minor Heading (h5)</h5>
  <p>Rarely used, but available.</p>
  
  <h6>Smallest Heading (h6)</h6>
  <p>The smallest heading size.</p>
  
  <h2>Best Practices</h2>
  <ul>
    <li>Use only one h1 per page</li>
    <li>Don't skip heading levels (h1 to h3 is bad)</li>
    <li>Use headings for structure, not styling</li>
    <li>Keep headings concise and descriptive</li>
  </ul>
</body>
</html>