Skip to main content

System Status: 

Using Headings in the CMS

Learn how to use headings in the campus CMS.

Headings provide important organizational and summary information for users and search engines. They are also essential for web accessibility — for example, screen readers need headers to accurately transcribe pages for differently-abled users.

Proper heading use makes your pages easier to scan:

  • Keep headings aligned with the left margin, like the rest of your page.
  • Don't use heading styles to make your text look bigger or bolder — use headings to organize your content.
  • Do not skip heading levels. Think of headings like levels in an outline. You wouldn't have an 'A' section followed by a 'C' section with no 'B' section between them.
  • Do not use the enter key to create a space after headings. This will create an empty heading that is bad for search engines and screen readers. Headings already have spacing set.

Heading 1: Your page title

The title of your web page should always use Heading 1 <h1>. Put this in the top-most middle block for general CMS sites, and do not center it.

Page titles should use Title Case. See the UC San Diego Editorial Style Guide.

Never have multiple H1s on a page (you can have multiples of all other headings).

Subsequent sections should use Heading 2, Heading 3, etc. Do not skip headings.

Blink and TritonLink editors

In Blink and TritonLink, Heading 1 will be automatically generated from the Title field — do not use H1 in the main body of your page.

Adding headings

If you use the WYSIWYG editor, access Headings through Formats >> Headings (you can also access them through Format >>Formats >> Headings).

WYSIWYG icon:wysiwyg

If you use HTML, wrap the text in the appropriate code: <h1>...</h1> for Heading 1, <h2>...</h2> for Heading 2, etc.

Drawer templates

Drawer titles are automatically Heading 2. Do not place another Heading 2 inside a drawer as this will create an error in the drawer script. Start with Heading 3 inside drawers.