The following standards were adopted on May 21, 2012. This page will serve to document this Web standards change. Return to the Web Standards Change Log for May 2012, or visit the current Hyperlinks Section of the Web Design Standards.
*****
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.
Definitions
Hyperlink
"A hyperlink (often referred to as simply a link), is a reference or navigation element in a document to another document, a section of the same document, or a specified section of another document, that automatically brings the referred information to the user when the navigation element is selected by the user." (Source: Wikipedia [slightly modified], "hyperlink", July 2007)
Link Text and Link Destination
Links consist of two main elements, the "link text" and the "link destination". Think of the link text as the selectable description of the link and the link destination as the location of the link. For example, a link to Yahoo!, "Yahoo!" is the link text and "http://www.yahoo.com" is the link destination.
Universal Resource Locator (URL)
The term Universal Resource Locator is also widely known as Universal Resource Indicator (URI) and as simply "Web address".
A URL is described as a "linked URL" when it is selectable (http://www.yahoo.com) and as an "unlinked URL" when it is not selectable (http://www.yahoo.com).
Descriptive Link Text
In addition to a URL, a letter, word, or phrase can be the link text with the actual URL of the link destination remaining in the background of the hyperlink. In the following hyperlink, the "Y" is an example of very basic link text with a destination of http://www.yahoo.com: Y.
At the CDE, we differentiate between "basic link text" and "descriptive link text". Our definition of descriptive link text is when a word or phrase is used as the link text and it is descriptive of the link destination. For example, "Yahoo!" uses text that is more descriptive than the previous example of "Y".
E-mail Addresses
Another type of hyperlink is an e-mail address. When e-mail addresses are hyperlinked, the link destination includes the prefix, "mailto:", which instructs the users computer to open a new e-mail message addressed to the particular e-mail address that is contained in the remainder of the link destination. While e-mail addresses can have descriptive link text, it is more common and required at the CDE (see below) for the e-mail address itself to be hyperlinked.
Internal and External Links
At the CDE, we call links within the same Web site, "internal links" and we call links to another Web site, "external links".
For the purposes of linking, all of the CDE’s externally available Web addresses are to be considered the same Web site—generally to be known as the "CDE Internet Web Site". For example:
- http://www.cde.ca.gov
- http://www3.cde.ca.gov
- http://inet2.cde.ca.gov
- http://star.cde.ca.gov
Also for the purposes of linking, all of the CDE’s internal-only Web addresses are to be considered the same Web site—generally the "CDE Intranet Web Site". For example:
- http://intranet.cde.ca.gov
- http://iapro.cde.ca.gov
Broken Links
A broken link is a hyperlink that does not work correctly. A link is considered broken if choosing it results in a "page not found" error or if choosing it results in opening an incorrect Web page, Web document, or E-mail address. Broken links must immediately be corrected by replacing them with an appropriate link that is not broken or by removing them altogether.
Basic Link Formatting
On CDE Web pages, links must adhere to the same look and feel whether they are formatted automatically by Contribute or manually. Use of the Contribute templates, or the Department-wide cascading style sheets (CSS) will ensure that the proper basic formatting is applied to links.
The default color for Web page and document links must be blue and when visited links are used they must be purple. Link text must always be normal text without additional styles applied such as bold, subscript, superscript, large text, small text, or headings (e.g., heading1, <h3>, etc.).
Italics may only be used in link text when the CDE Style Manual (CDE Intranet) or the CDE Correspondence Guide (CDE Intranet) requires its usage on a particular set of text.
Hyperlinked Descriptive Text or Hyperlinked URL?
Hyperlinking descriptive text is considered a best practice for Web accessibility. For a person using a screen reader, the difference can be significant. For example:
Visit Google…Would be read:
“Visit link Google” by a screen reader.
Visit http://www.google.com/...Would be read, “Visit link h t t p colon back slash back slash w w w dot g o o g l e dot com backslash
Link Notations
It is often important to provide specific information about a link. For example, that the link:
- Opens in a new window
- Points to a non-CDE destination
- Points to a certain type of Web document
- Points to a file of a particularly large size
- Was posted recently or updated on a particular date
At CDE some link notations are required to be used and others are optional. Also, link notations often appear in combination. Standard use of link notations is complex enough that it requires a separate section of these standards. For more information, visit the Link Notations Section of the CDE Web Design Standards.
Link Formatting
Use of the Contribute templates, or the Department-wide cascading style sheets (CSS) will ensure that the proper formatting is applied to link text. On CDE Web pages, link text must adhere to the same look and feel, and functionality as indicated in the templates or the CSS even if the link is formatted manually. For example, unvisited links must be blue and visited links must be purple. Links in Web documents must be formatted like the standard links on Web pages unless there is a strong reason not to do so.
Link text should always be normal text without additional styles applied such as bold, subscript, superscript, large text, small text, or headings (e.g., heading1, <h3>, etc.).
Italics may only be used in link text when the CDE Style Manual (CDE Intranet) or the CDE Correspondence Guide (CDE Intranet) requires its usage on a particular set of text. For example:
When a link is added to any Web page or document, it can be formatted to either open the link destination within the same Web browser window, or to open a new Web browser window for the link destination. For CDE Web sites, internal links must open in the same browser window and external links must open in a new browser window. The CDE Internet and Intranet Web sites are considered neither internal or external to each other, but links between them are set to open in a new window.
Links from the CDE Intranet Site to the CDE Internet must include the notation, "(CDE Internet)" just after the link text. All other external links must include the External Link Icon () just after the link text. Examples:
On a CDE Intranet Web page (note, both links open in a new window):
- Use the CDE School Directory (CDE Internet)
- Search using Google
On a CDE Internet Web page (note, the link to Google would open in a new window in the example below):
- Use the CDE School Directory
- Search using Google
There are rare cases where a link to the private CDE Intranet site may be placed on a publicly available CDE Web page. Prior approval of any link on a public page to the private CDE Intranet must be obtained from the Web Services Office at tsdweb@cde.ca.gov before the link is added to any publicly available page. When publicly available links to the private Intranet are allowed, they would be set to open in a new window and the following example would apply:
On a CDE Internet Web page:
- Contractors must adhere to the Department of Education Administrative Manual (DEAM), Section 3800 (CDE Intranet; PDF; 2.4MB)
Also, all public links to the CDE Intranet must replace "intranet" in the link destination with "igate". The link destination would begin with "http://igate.cde.ca.gov/" (followed by the remainder of the destination) instead of beginning with "http://intranet.cde.ca.gov".
Links to Diagnostic Center and State Special School Web sites must be set to open in a new window, but do not have a location notation such as the External Link Icon or "CDE Internet".
Quality of Link Text
Links to E-mail
E-mail link text must be the same as the e-mail link destination because it is more accessible than descriptive link text. E-mail links must never be left unlinked (non-active) on CDE Web pages. Examples:
Correct E-mail Link Text
Please e-mail Joe Schmoe at jschmoe@cde.ca.gov.
Incorrect E-mail Link Text
For more information, please e-mail Joe Schmoe.
E-mail hyperlinks that point to invalid e-mail addresses must be replaced with valid e-mail addresses. However, sometimes a previously linked e-mail address must be maintained for historical or archival purposes. Removal altogether or replacement of an old e-mail address is always the first choice, but when an old e-mail address must be kept, the old e-mail address must be unlinked, formatted with the strikeout style (x), and must be accompanied by a statement in a standard format that provides additional information. Listed below are the standard formats for the required statements and an example of each.
- "Note, the preceding e-mail address is no longer valid."
Contact Joe Schmoe atjschmoe@cde.ca.gov[Note, the preceding e-mail address is no longer valid.]
- "Note, the preceding e-mail address is no longer valid and has been replaced by <enter e-mail address here>"
Contact Joe Schmoe atjschmoe@cde.ca.gov[Note, the preceding e-mail address is no longer valid and has been replaced by jdoe@cde.ca.gov.]
The link destination of an e-mail address must always be the same as the link text for that e-mail address. For example, the link below is never allowed because it appears to be for Joe Schmoe, but really points to Jane Doe:
Links to Web Pages and Documents
Links in Web documents that are not to e-mail addresses must use URLs for link text. Links in Web pages (including Web application pages) must use descriptive link text that matches the title of the destination page or document title; or that precisely describes the destination page or its content.
Using a URL as link text is not allowed in Web pages except for pages that utilize the Department's Contribute letterhead or memorandum templates. See the Layout and Formatting section of these Design Standards for additional information on Contribute templates and see the CDE Correspondence Guide (CDE Intranet) for more information about adding hyperlinks to Web pages that use the letterhead and memorandum Contribute Templates.
URLs may not be included in letterhead or memorandum Web pages or Web documents as unlinked (non-active) URLs.
For most Web pages and documents, links that have become broken must be removed or replaced with valid links. However, with letterhead and memorandum Web pages and all Web documents, sometimes a previously linked URL must be maintained for historical or archival purposes. Removal or replacement of an old URL is the first choice for letterhead and memorandum Web pages and all Web documents, but when an old URL must be kept, the old URL must be unlinked, formatted with the strikeout style (x), and must be accompanied by a statement in a standard format that provides additional information. Other Web pages that are not letterhead or memorandum may never include old or invalid links or URLs. Listed below are the standard formats for the required statements and an example of each.
- "Note, the preceding Web address is no longer valid."
Visit the Service Learning Web site at http://www.cde.ca.gov/servlearn.html [Note, the preceding Web address is no longer valid.] - " Note, the preceding Web address is no longer valid and has been replaced by <enter URL here>"
Visit the Service Learning Web site at http://www.cde.ca.gov/servlearn.html [Note, the preceding Web address is no longer valid and has been replaced by http://www.cde.ca.gov/ci/cr/sl/ ]
When using a URL as "link text" in letterhead or memorandum Web pages or in Web documents, the URL link destination must be the same as the URL for the link text. For example, the link below appears to be for Yahoo!, but really points to Google:
Page or Document Type |
Linked URL Allowed or Required? |
|---|---|
Web pages |
Not Allowed |
Letterhead and Memorandum Web pages |
Allowed |
Web documents |
Required |
Duplicate Link Text
With the exception of the specific links that are allowed in the Link Notations Section of the CDE Web Design Standards, such as PDF, DOC, XLS, etc. for certain alternate versions of a particular Web page or document, duplicate link text that does not have the exact same link destination is not allowed. Do not use the term "click here" (or similar) in link text. This phrase is device-dependent (it implies a pointing device) and it is not descriptive of the title of the page or document that is being linked to, which must be descriptive of the content at the link destination.
Links to Commercial Web Sites
Because the CDE is a public agency, it does not promote the interests of specific commercial organizations. Consequently, the posting of links to commercial Web sites is prohibited. Links to non-profit organizations or educational institutions are allowed if the link is directly related to the Web site topic and will benefit the user of the CDE Web site. Please see the Department's Linking Policy, for complete policy information about links.
Questions Line
For details about links in the Questions Line section of CDE Web pages, please see the Questions Line section of these Design Standards.
For Contribute Users
Print URL Style
The Print URL Style (printurlstyle) may only be used to augment descriptive link text in order to add a URL that is only visible whenever the Web page is printed. Descriptive link text is followed by all of the following: space ( ), left bracket ([), unlinked URL (http://xxx.xxx.xxx), and right bracket (]). For example:
California Department of Education [http://www.cde.ca.gov]
The Print URL Style must then be applied beginning with the space that follows the descriptive link text, through and including the ending right bracket. Use of the Print URL Style will hide the added URL except when the Web page is printed. Use of the Print URL Style is only allowed in Web pages where descriptive link text is allowed or required.
Setting Relative Internal Links
When creating a page on http://www.cde.ca.gov or http://staging.cde.ca.gov using Contribute, links to other pages on http://www.cde.ca.gov or http://staging.cde.ca.gov must be made to be "relative" links. Relative links allow the destination URL to be accessed correctly whether the linking page is on WWW or Staging. The same is true when creating a page on http://intranet.cde.ca.gov or http://istaging.cde.ca.gov. Be sure to set relative links from one page to another if both are on the CDE Intranet.
Example of a Relative Link
A relative link from http://www.cde.ca.gov/ci/ct/ap/index.asp to http://www.cde.ca.gov/ci/ct/ap/govern.asp would be:
govern.asp
When creating a link in Contribute, always browse to the Web document or file. This creates a "relative link." A relative link will work regardless of the Web server where it’s located. When inserting a link by browsing to a Web page, don't enter the URL into the "HREF" box, instead, enter the URL in the "Web address (URL):" box.
For Web Applications
It is recommended that URL links use the title attribute within the <a> tag in Web applications. (Recommended Only)