## Level

The `level` is required in order to render the correct heading HTML tag (h1-h6), which in turn helps assistive tech to know the structure of your content.

Use one unique h1 (`<Heading level="1" />`) per page that describes what that page is about.
Read more about how to achieve an [accessible heading structure](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/).

```tsx live
<>
  <Heading level={1}>Heading level 1 (h1)</Heading>
  <Heading level={2}>Heading level 2 (h2)</Heading>
  <Heading level={3}>Heading level 3 (h3)</Heading>
  <Heading level={4}>Heading level 4 (h4)</Heading>
  <Heading level={5}>Heading level 5 (h5)</Heading>
  <Heading level={6}>Heading level 6 (h6)</Heading>
</>
```

## As

Prefer not altering the element tag, but if a situation occurs where you need to render the heading as a different HTML element, you can use the `as` prop.

```tsx live
<Heading level={2} as="div">
  This is a H2, as a div
</Heading>
```

This will still be an a11y-friendly heading, because it adds `role="heading" aria-level="2"` to the rendered `<div />`.

## Overriding font styles

Another thing you can do with the `as` prop is to get a semantically correct heading that uses the font styles of another `level`. This is especially useful when designs specify to use a H4 for example, but you need it to render as a H2 for the page content structure to make sense to non-sighted users.

```tsx live
<Heading level={4} as="h2">
  This is a semantic H2, with the level 4 (font styles of a H4)
</Heading>
```

Read more about [ARIA: heading role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role).

Headings are used to summarise text content in a section or page.

Heading

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources