This page is part of the California Department of Education (CDE) Web Design Standards, which only apply to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.
Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.
Headings must be used for all Web page headings and sub-headings. Headings provide visual structure to a Web page, but more importantly, they provide logical structure to a Web page. Logical structure is an important compliance factor for Web accessibility.
When bold or italicized text is used in an original document (often created in Word) that will be converted or authored to be a Web page, it is often a sign that a heading will be required.
Do not use bold, italics or underlined text instead of heading styles. Unless the heading will contain text that must be italicized (e.g., Education Code), do not apply bold, italics, or underlined text in addition to the required heading styles.
Headings should never be hyperlinked.
Headings should not be used to replace bold text that is simply being used to highlight a word or two, but headings should be considered in place of bold text for any text that creates page structure. By doing so, logical structure is being created and the Web page is being made accessible.
There are six pre-defined heading styles (heading tags). They are numbered 1-6. The largest visually and the one that is the highest in the heading hierarchy is Heading 1 (<h1>). The smallest visually and the one that is last in the heading hierarchy is Heading 6 (<h6>).
Heading 6 (<h6>)
Heading 6 is important because it has been visually formatted to be identical to regular bold text. While Web Page Creators and Web Application Developers are strongly encouraged to reformat original documents so they have the best logical and visual structure by replacing bold text with a variety of appropriate heading styles, sometimes the original layout with bold text must be maintained.
In these cases, where bold text has been used for "headings", it can be replaced with Heading 6, which will maintain the visual look of the original, while providing logical structure.
Type of Case to Use
Usually title case should be used for headings. Sometimes sentence case is more appropriate for particular headings. Heading 1 (<h1>), should always be used with appropriate title case.
Generally, it is more important to use title case with headings at the top of the heading hierarchy (e.g., 1 through 3 or 4), than lower in the heading hierarchy (e.g., 4, 5, and especially 6).
Consistent use of the same case style for each heading is important throughout related Web pages or an entire Web application. Sometimes this consistency may not apply to Heading 6 (<h6>) because of its use, at times, to create headings that replace and mirror appropriate bold text as it appeared in an original document.
For Contribute Users
Heading styles are available from the formatting menu at the top of the Contribute work area. The default setting for all text is normal. Contribute Web Page Creators should use headings liberally following these standards:
Each page has a page title that should be formatted using the Heading 1 style. The Heading 1 style is used only for page titles. For the Internet, which has page titles created dynamically from their entry into the WebNETS system, Heading 1 is never applied manually by Web Page Creators in the body section of Web pages.
For the Intranet, only the topic pages, sub-topic pages, and sub-sub-topic pages have page titles created dynamically. The Heading 1 style is never applied manually to these page types.
The Heading 1 style must be applied to the page title at the top of each page for all content pages (all pages that are not topic, sub-topic, or sub-sub-topic pages) on the Intranet. The page title at the top of the page should match both the metadata page title, as well as the link text that leads to the page. The Heading 1 style should not be manually used for any other formatting except the page title at the top of content pages.
The other heading styles, Heading 2 through Heading 6, should be used liberally throughout pages created for both the Internet and the Intranet. There is no requirement that all the heading styles be used. They should however be used so that lower numbered heading styles flow down to higher numbered styles in the way an outline would be created.
While color and size are pre-determined for each heading style, please remember that creating the logical structure for the Web page is more important (due to accessibility concerns) than the visual appearance. Color of the heading styles will vary depending on the topic area for the Internet.
A modicum of consistency should be followed for related pages.
No Heading Space (noheadingspace)
When a heading style is applied to text, a single line space is automatically created between the new heading text and the normal text below. Sometimes this space is desirable, but other times it is not.
The Noheadingspace Style will remove the single line space when that is desirable.
Do not apply Noheadingspace to Heading 1 or to non-heading styles. Some consistency of the use of the Noheadingspace Style is required throughout related Web pages. For example, consider one large section of the CDE Intranet site that uses the Noheadingspace Style for Heading 3 through Heading 5, but does not use it for Heading 1, Heading 2, or Heading 6.
Steps for applying this style:
- Highlight the text that is to be the heading.
- Apply a heading style to the text.
- Apply the "noheadingspace" style to the text.
Note, do not apply the Noheadingspace style to the paragraph or text that follows the heading. Applying multiple text styles with Contribute is usually not allowed, but applying a heading style and then applying the Noheadingspace style is allowed.
Heading styles are applied using the HTML tags <h1> through <h6>. The <h1> tag should only be used for the top page title. The page title at the top of the page should match both the metadata page title, as well as the link text that leads to the page.
The <h2> tag should be used below the <h1> tag for page name (or functionality) sub-titiles on each page within a particular Web application. The other heading tags, <h3> through <h6>, should be used liberally throughout pages created for both the Internet and the Intranet. There is no requirement that all the heading styles be used. They should however be used so that lower numbered heading styles flow down to higher numbered styles in the way an outline would be created.
The standard department cascading style sheets (CSS) contain the basic colors and sizes for the heading tags. If the Web application is using a particular topic header for the CDE Internet, then the application must utilize the corresponding CSS for that topic. If a generic (non-topic header) is used for the Internet, then the CSS that corresponds to the Resources section of the Internet must be used. For the Intranet, there is only one standard CSS that must be used.
A headings styles should be used in a consistent manner throughout a Web application.