@n8d/htwoo-patterns/_patterns/atoms/typography/headlines.md

hTWOo Patterns to setup custom style guide

---
title: Headlines
order: 10
---

## Overview
Headlines are semantic heading elements (h1-h4) that provide document structure and establish content hierarchy. HTWOO provides consistent styling for these semantic HTML elements.

## Usage
Use headings to create a logical document hierarchy. Heading levels (h1-h4) should be used in order, with h1 being the main page title and subsequent levels representing subsections.

Example:
```html
<h1>Main Page Title</h1>
<p>Introduction paragraph.</p>

<h2>First Section</h2>
<p>Content of the first section.</p>

<h3>Subsection</h3>
<p>Content of the subsection.</p>

<h2>Second Section</h2>
<p>Content of the second section.</p>
```

## Accessibility

- Use heading elements semantically to create a proper document outline
- Do not skip heading levels (e.g., from h1 to h3)
- Headings should accurately describe the content that follows
- Screen reader users often navigate by headings, so a proper heading structure is essential