Planning

Titles/Headings

Window Titles

A Window Title allows you to assign a unique and descriptive name that appears in the window frame title bar located at the upper left corner of the browser window. Short, unique, and descriptive titles should be given to every page.

Required: All official Cal Poly Web pages must have the <Title> tag populated with a unique and descriptive name. (See University Identity and Communication Elements Required for Official Cal Poly Web Pages)

Titles serve four main purposes:

Image Identifying Window Title Bar

  1. Titles properly identify the page for the user.Image identifying Window Title Bar
  2. Search engines use titles to search for pages.
  3. Search engines use titles as the primary identifier for listing the page on search results.
  4. Titles commonly differentiate pages when book marked or saved as favorites.

Without titles, pages cannot be found, bookmarks are difficult to use, and users become confused. Titles should be placed between the title tags in the head of your HTML pages as follows:

<html> <head> <title>"Descriptive Title"</title> </head>

Page Titles

A page title should be applied in the body content of each page of a Web site (in the case of a home page this may be the department or program name). This quickly orients a user who arrives at a page from a destination link. If a destination link is worded such that it coordinates with your page title, a user will know immediately that they have arrived at a page that is exactly as they expected. For example, the page title of this page is "Titles and Headings".

Headings (section headings)

Headings orient users to the page, and inform them about the page's organization and structure. They classify the information on the page and allow users to scan the text to easily find the information they are looking for. Headings should be written so that they are unique, descriptive, and clearly identify the purpose of the content the heading represents. Take time to develop headings that make sense to users even if taken out of context. Headings should also be used consistently across your Web site.

Headings should always be marked up using the HTML heading tags and properly nested by level, e.g. h1, h2, h3, and so on. The h1 tag should always be used for the page title. The style (look and feel) of the heading should be controlled with CSS. Use of the correct markup allows screenreader users to browse a web page using only the headers, much the same way a sighted user scans a page.

Graphic headers should not be used. The use of graphic headers creates problems for screen reading technologies where the heading mode is used to read the page (as described above).