Facebook Pixel Headings - Web Best Practices | Western Kentucky University Skip to main content

Headings


Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Styles can be applied to headings to help create a visual heirarchy and give your page a unique style, and create sub-headings.

 

Ordering

Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Heading level 1 or Heading 1 is typically reserved for the page title. On your site your Heading 1 will be your page title that is entered in page properties.

When creating headings in page, use Heading 2 and below. Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

 

 

Styles

To differentiate between levels of headers you can add colors or italics to your headings. Use the Advanced Text Styles to choose a color or stick within the WKU color pallete defined above. An easy way to maintain a hierarchy is to alternate between a default style and colors/italics when changing between levels of headers. For example you could leave your Heading 2 as the regular gray style, then use WKU red for Heading 3, and italics for Heading 4.

You can also use the Advanced Text Styles to change the size of your headings. Use the Font h1 - Font h6 styles to change the size of your text to another headings size. This allows you to use the proper heading tag, but make it appear as a smaller heading. It is not reccomened that you increase a header's size, but instead make nested headings smaller as a style change.

 

 

Secondary Heading Text

In cases where your title may be very long, or you simply need to convey an extra message inside a header, use Advanced Text Styles to give part of your header a smaller sub-heading appearance. Combine the small, text muted, and color styles to differentiate between main and sub heading text.

 

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20