Format Headings With HTML Heading Tags

HTML is one of the languages that web developers use to create and render the pages of a website. Heading tags in HTML are interpreted by the website’s style sheet in a consistent way (size, color, font) depending on their level (h2, h3, h4, and so on).

Web writers use the different levels of the heading tag to show the hierarchy or organization of the content. We do this in print, too. How the heading appears to readers (e.g., its color, its size, its position on the page) signals which ideas are overarching and which are related but subordinate.

Why are we going into all this detail?

  • Search engines use the <H> tags in HTML to categorize the importance of information on a webpage
  • Screen readers can use the <H> tags to jump through a webpage’s sections - critical for accessibility  
  • Web visitors scan headings to see what content they’ll find in a particular section or subsection of the page

H2s serve as subheaders on a webpage. Remember, you can have more than one H2 on each page. They are good to use when you have long blocks of content that you want to break up for readability purposes. For example, you may want to break up sections of body text on your main Admissions page for undergraduate, graduate, and transfer. Like with H1s, it is always a good idea to include keywords in your H2s. Therefore, if your main keyword was “admissions,” then you would want to label your H2s: Undergraduate Admissions, Graduate Admissions, and Transfer Admissions. 

Page Hierarchy Example:

  • Think of your page as an outline of an essay.
  • Your page title is always your h1 since can ONLY have ONE h1 on a page. 
  • The first level of bullets would start with h2s in this example.
  • Then under the first level would be your second level and you would label those as your h3.

Choose Your Heading Style

In the WYSWYG editor, use the dropdown menu under "Normal" to choose your paragraph format.  "Normal" refers to the basic paragraph text, or body text

screenshot

This is an Example of a Headline h2

Here is the paragraph underneath. It has styling of "Normal". 

  • lists have "Normal" styling as well
  • lists have "Normal" styling as well
  • lists have "Normal" styling as well
  • lists have "Normal" styling as well

This is an Example of a Headline h3

Here is the paragraph underneath. It has styling of "Normal". 

This is an Example of a Headline h4

Here is the paragraph underneath. It has styling of "Normal". 

This is an Example of a Headline h5

Here is the paragraph underneath. It has styling of "Normal". 

This is an Example of a Headline h6

Here is the paragraph underneath. It has styling of "Normal". 

Other Style Guidelines (h2)

Titles and Headings (h3)

Titles/headings are always title case. This means that the first letter of major words are capitalized, and most minor words are lowercase.

Buttons (h3)

Buttons are always sentence case. This means the only the first letter of the first word is capitalized.

Correct button usage: Button example

Incorrect button usage: Button Example

Choose Your Button Style (h4)

In the WYSWYG editor, use the dropdown menu under "Styles" to choose your button style. The button text must have a link assigned to it for the "Styles" option to become available.

screenshot

 

Button