Headings

Headings are used to define the structure and hierarchy of content within a page. The theme supports all standard HTML heading levels from <h1> to <h6>, each styled to ensure clarity, consistency, and readability across different screen sizes.

1
<h1>Page Title</h1>
1
<h2>Section Heading</h2>
1
<h3>Subsection Heading</h3>
1
<h4>Minor Heading</h4>
1
<h5>Small Heading</h5>
1
<h6>Extra Small Heading</h6>

Heading Hierarchy

Headings should be used in order to maintain a logical document structure:

  • <h1> – Page title or primary heading (use once per page)
  • <h2> – Major section headings
  • <h3> – Subsections under <h2>
  • <h4> – Subsections under <h3>
  • <h5> – Minor section headings
  • <h6> – Lowest-level headings for fine-grained structure

Avoid skipping heading levels, as this can negatively impact accessibility and SEO.

Default Styling

Each heading level has predefined font size, weight, line height, and spacing to create a clear visual hierarchy. Headings scale responsively to remain readable on smaller screens while preserving their relative importance.

Usage Guidelines

  • Use headings to organize content, not for styling purposes.
  • Do not use multiple <h1> elements on the same page unless explicitly required.
  • Keep headings concise and descriptive.
  • Avoid embedding links or complex markup inside headings unless necessary.

Using headings correctly helps improve content readability, accessibility, and search engine indexing.