HTML heading tags provide users and assistive technologies with information on the hierarchy of content on a webpage or web application.
The h1 to h6 tags provide six levels of semantic HTML headings on a webpage.
Each heading level has pattern styles such as colours, responsive font-sizes and margins.
Example of h1 to h6 headings:
<h1>{{ h1 heading }}</h1>
<h2>{{ h2 heading }}</h2>
<h3>{{ h3 heading }}</h3>
<h4>{{ h4 heading }}</h4>
<h5>{{ h5 heading }}</h5>
<h6>{{ h6 heading }}</h6>In our patterns, all headings inside an article tag will have the same line length as a p tag.
The value for the line length is selected to ensure an optimal reading experience by limiting the number of characters per line.
Example of heading inside an article tag:
Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
<article>
<h1>{{ h1 heading }}</h1>
<h2>{{ h2 heading }}</h2>
<h3>{{ h3 heading }}</h3>
<h4>{{ h4 heading }}</h4>
<h5>{{ h5 heading }}</h5>
<h6>{{ h6 heading }}</h6>
<article>Use h1 to h6 HTML heading tags to provide users or machines with semantic information on the hierarchy of the content.
Start with only one h1 tag as your first level heading on a webpage. Then add additional headings (h2 to h6) as needed to organize your page content hierarchy.
For more information on using headings to create a semantic structure for webpage content view, Semantic Structure on WebAIM.
The Subtitle Block heading provides h2 level headings on a page with 2 options for visual styles to choose from.
This example text is here to show the spacing between the subtitle block and paragraphs after it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut viverra lacus. Quisque consectetur porttitor metus. Suspendisse semper velit vitae elit ullamcorper aliquam. Sed sed arcu sit amet risus sodales interdum eget vitae libero. Ut condimentum vestibulum metus. Mauris nibh libero, efficitur non elit efficitur, fermentum ornare ligula. Integer at posuere magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vel faucibus velit.
<!--'Text align' and 'Line style' options are only available when choosing the red underline layout.-->
<div class="subtitle-block cui {{ red-underline }} {{ text-center }} {{ long-line }}">
<h2>{{ Section heading }}</h2>
<hr aria-hidden="true">
</div>The subtitle block heading can be used to provide emphasis to sections on a page.
