---
title: Heading
description: >-
  The heading component renders hierarchical titles to communicate the structure
  and organization of page content. Use heading to create section titles and
  content headers that help users understand information hierarchy and navigate
  content.


  Heading levels adjust automatically based on nesting within parent
  [section](/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/layout-and-structure/section)
  components, ensuring meaningful and accessible page outlines without manual
  level management.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/typography-and-content/heading
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/typography-and-content/heading.md
---

# Heading

The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.

Heading levels adjust automatically based on nesting within parent [section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04-rc/web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Properties

* **accessibilityRole**

  **'heading' | 'none' | 'presentation'**

  **Default: 'heading'**

  Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

  * `heading`: defines the element as a heading to a page or section.
  * `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.
  * `none`: a synonym for the `presentation` role.

* **id**

  **string**

  A unique identifier for the element.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/heading-default-DWta1gYD.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-heading>Contact</s-heading>
  ```

## Useful for

* Creating consistent titles and subtitles throughout a page.
* Helping users with assistive technology (such as screen readers) navigate content.

## Considerations

* The heading level is determined by the level of nesting, starting at h2.
* Prefer using the `heading` prop in `s-section`. Only use `s-heading` when you need a custom heading layout.

## Best Practices

* Use short headings for quick scanning.
* Use plain, clear terms.
* Avoid jargon and technical language.
* Avoid using different terms for the same concept.
* Avoid duplicating content from the surrounding context.