Sample—Formatting Headings

What are styles?

A style is a set of formatting that makes text look a certain way. Every web page on our site will have a title, which is automatically assigned a Heading 1 style. Each web page can also have up to five additional levels in the body (Headings 2–6). And most heading levels will have text below them. The “look” of each of these levels for our campus website have already been designed by a professional designer. This means that the font, font size, font color, and font weight for each heading level is pre-defined, and we don’t get to change them (with a few rare exceptions). The headings for our site look like this:

This is Heading 2

This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. 

This is Heading 3

This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text.This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text.This is text. This is text. This is text. This is text. This is text. This is text. This i

This is Heading 4

This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text.This is text. This is text. Thixt. This is text. This is text. This is text. This is text. This is text.This is text.

This is Heading 5

This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text.This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text.

This is Heading 6

This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text. This is text. This is text. This is text.

Headings are necessary to create the structure, or outline, of a page. The page title is always the top level of the hierarchy (Heading 1). Then there will be a number of main topics, each with one or more sub-topics (etc.) So, for a document with a title and two main topics (each of which has two sub-topics), the heading styles should be assigned this way:

Page Title (Heading 1—automatically set; you don't have to do this)

Topic 1 (Heading 2)

Sub-topic 1 (Heading 3)

Sub-topic 2 (Heading 3)

Topic 2  (Heading 2)

Sub-topic 1 (Heading 3)

Sub-topic 2 (Heading 3)

Important Accessibility Note: Heading numbers must be in order, with no skipping. For example, you should not have a heading that is assigned a Heading 2 style and then assign a Heading 4 style to the very next heading. Headings are not really for formatting: they are to indicate the document structure (that is, outline levels). Do NOT assign an out-of-order style to a heading just because you prefer the way that it looks—that destroys the logical hierarchy of the page, making it less understandable and less accessible.

Interesting note: The purpose of headings (and other HTML tags) is to describe the function of some text in a document. For example, headings are marked with <h> tags, paragraphs are marked with <p> tags, list items are marked with <li> tags, etc. This is called "functional" or "semantic" tagging. HTML tags should not be used for formatting. Another coding system called CSS is what is used to indicate how different semantic units should look. This is an important concept for accessibility, which we'll cover more later.