This page is part of the California Department of Education (CDE) Web Design Standards, which only applies 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.
"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".
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:
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:
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.).
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
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.
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.).
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):
On a CDE Internet Web page (note, the link to Google would open in a new window in the example below):
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 email@example.com 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 firstname.lastname@example.org.
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 at
email@example.com[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 at
firstname.lastname@example.org[Note, the preceding e-mail address is no longer valid and has been replaced by email@example.com.]
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.
Links within Web pages and documents must adhere to the standards above and must never mix hyperlink styles (i.e., some hyperlinked URL links and some hyperlinked descriptive text links. The only exception is for CDE correspondence, that use hyperlinked URLs. CDE correspondence may use hyperlinked descriptive text for links to "Enclosure(s)" and "Attachment(s)" only. If descriptive text is used for "Enclosure(s)" and "Attachment(s)", the URL must be added with the printurl style in Contribute.
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?
Letterhead and Memorandum Web pages
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.
For details about links in the Questions Line section of CDE Web pages, please see the Questions Line section of these Design Standards.
URL shorteners may be used in place of very long URLs wherever hyperlinked URLs are allowed in CDE Web pages or documents. When the length of a URL is not an issue, URL shorteners should not be used because elements of the URL provide important clues about the link's destination and credibility. When URL shorteners are used to replace hyperlinked URLs, optional use of the PrintURL must also use the shortened version of the URL.
URL shorteners may not be used in place of descriptive links, but they can be used in conjunction with descriptive links in the PrintURL sections if the URL is very long.
For all CDE-developed Web pages and documents, use one of the two CDE-approved URL shortener services:
- Go.USA.gov URL shortener for URLs with the following domains: .gov, .state.xx.us, .fed.us, .si.edu, and .mil.
- Bitly (bit.ly) URL shortener for all other URLs that need to be shortened.
Note, URL shorteners can and should be considered for all links in social media posts.
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
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)