Heading
should be used to communicate page organization and hierarchy.
:h1
, :h2
, :h3
, :h4
, :h5
, :h6
based on what is appropriate for the page context.Heading
as the title of a section or sub section.Heading
for styling alone. For simply styling text, consider using Text with relevant Typography
such as font_size
and font_weight
.<h1>
with an <h3>
. Heading levels should increase by one in ascending order.While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out. When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be consistent. See WCAG success criteria: 1.3.1: Info and Relationships
Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience. Learn more about best heading practices (WAI Headings)
Name | Type | Default | Description |
---|---|---|---|
tag | String | N/A | One of :h1 , :h2 , :h3 , :h4 , :h5 , or :h6 . |
system_arguments | Hash | N/A | System arguments |
<%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %><%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %><%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %><%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %><%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %><%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>