Missouri State University Pattern Library

Headings

Headings

What is the h1 tag and why is it important?

The h1 (or heading 1) tag is the main title of a web page. This tag essentially tells search engines and web users what your page is about. The h1 tag is automatically generated by the template and is not to be applied within the content of your page.

How do headings affect accessibility?

Headings help define the organization of content, in a hierarchal way, within your page for the website visitor. Using headings in the proper way allows assistive technologies to provide in-page navigation for the visually impaired. Learn more about structuring your page with headings for optimal accessibility.

Title or sentence case. How should headings be treated?

All h1 tags are title case. All h2-h6 tags are sentence case with the exception of proper nouns. Note: department names and position titles are not proper nouns unless qualifying the subject. Within our design system an h2 (headline) is all uppercase.

Review specifications for typography within the Missouri State Web Design System.

  • Handle: @headings
  • Preview:
  • Filesystem Path: src/components/01-brand-toolkit/typography/headings/headings.hbs 
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
 
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
 
/* No context defined. */