Headings

On the web, headings are used to structure the content of a page. Headings should be short, and they should not be used to style paragraphs or callouts. 

Headings should always be nested in order, from largest (Heading 1) to smallest (Heading 6). Using Headings in the correct order helps search engines like Google prioritize our content correctly, and makes it easier for users with screen readers to navigate a page.

At Harper, Heading 1 is always used by the page's title at the top of a page.  When creating content in Omni CMS, you should always start with Heading 1 or Heading 2 and work your way down.  When using headings, try to think of them as the outline for a page, the same way a student might outline a paper. 

Example of Heading Nesting:


The Main Title is Heading 1

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

A section using Heading 2

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel. Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

A sub-section using Heading 3

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

A sub-sub-section using Heading 4

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

A sub-sub-sub-section using Heading 5

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

A sub-sub-sub-sub section using Heading 6

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

Another section using Heading 2

Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel. Lorem ipsum dolor sit amet, an quo zril argumentum, ancillae accommodare an qui. Eu idque lucilius vel, augue facilis pri id. Cu mel nemore necessitatibus. Sed sale discere consetetur et. Nam stet viderer suscipiantur an, vocent diceret ut vel.

 

Last Updated: 5/26/22