Navigation path

Links

HTML hypertext links have four main properties:

  • Label:
    The label of a link is the visual part of a link: it can be text, image or image map. This is also the active area that reacts to user action.
  • Target :
    The target URL designates the destination of the link.
  • Target page:
    The window in which the target URL should be open.
  • State:
    Links have four states depending on previous user actions: visited, hover, active and focus.

A hypertext link is created with this kind of HTML tag:

<a href="http://europa.eu/” target=”_blank”>Document</a>

The target is 'http://europa.eu'.
The window is '_blank'.
The label is 'Document'.

 

General rules

Label

The label of a link is the visual part of a link: it can be text, image or image map. This is also the active area that reacts to user action.

Recommendations for this part of the link: Clearly identify the target of each link.

In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g. the "title" attribute in HTML).

Read more to write good link labels on Menus and links - Helping users navigate page.

 

Target URL

The URL of the link can be specified in several ways:

Absolute URLs

These URLs are complete and include the protocol, for example "http://domain.eu/site/index.htm".

This is the format to use to create a link to a document that is on another domain (external link). This also includes links from europa.eu to ec.europa.eu or any other subdomain and vice-versa.

For internal links, this format must not be used as it destroys the independence of the test and production environments by crossing over between them.

Relative URLs

These URLs define the path to follow from the calling document to the destination document. For example: "../../index.html". This is the preferred method within a EUROPA site.

Semi-absolute URLs

These URLs start with the root folder of the web server, for example "/site/index.html".
This is particularly useful to return to higher levels of EUROPA or other sites and also to reference standard elements, because the HREF value remains the same at whichever level it is used.

 

Target page

All links should open in the current window.

 

State

The appearance of a link can be defined for each of its state, thanks to CSS.

The only restrictions are the following:

  • Non-visited text link should always be underlined.
  • Links in other states (visited, active, hover, focus) should be readable, especially regarding contrast between text colour and background colour.

It is also recommended to keep the same font size for each state.

 

Colour

  • Link colour should be #027AC6.
  • Visited link should be #551A8B.
  • A special colour for "hover", "active" and "focus" status is optional.
 

Specific rules

Multilingualism

The basic rule is that links must always point to a page in the same language as the source page.

However, the destination document does not always exist in the appropriate language. In addition, depending on the context, the target document type and language availability, a significant number of situations could occur and for each case a rule should be defined for your website.

Here are the most common situations and some advices:

Navigation links

The situation must be evaluated and defined on a site-by-site basis.

  • The website owner is free to decide about the link policy he wants to apply for its website.
  • Using language and file type icons with file size may alter the design of web page.

Navigation path and service tools must not contain file type and language icons in order to preserve design.

Text links

The target link does not exist in the same language as the calling page.

Create a link to the document in the same language as the source page. By clicking on the link, a linguistic redirection page will appear offering the user with the list of available languages.

Example: The EU in Spain

The target link exists or does not exist in the same language as the calling page but you want to show the languages available for this document.

  • Create a link to the document regardless of the fact whether the document in the language of the page exists. In case it does not exist, a linguistic redirection page will appear offering the user with the list of available languages.
  • Following the linked text, insert the single language-choice icon that will trigger a pop-up showing the linguistic coverage of the document. This icon will call a web service that will detect automatically all languages available for static pages on the EUROPA file system and RAPID.

Example: European Commission template Choose translations of the previous link 

Please note that the automatic redirection and the web service described above are only available for static pages (managed manually or by means of the CWCMS). Dynamic applications should create their own web service and linguistic redirection page. This way other websites could link to dynamic pages using the web service and detect automatically the available languages. You can look into the instructions on how to set up a web servicepdf(57 kB) for dynamic applications.

Read more about Multilingualism.

 

Links to binary documents (PDF and others)

  • Create a link to the document regardless of the fact whether the document in the language of the page exist. In case it does not exist, a linguistic redirection page will appear offering the user with the list of available languages.
  • Following the linked text, insert the file type icon indicating the type of file.
  • Following the file type icon, indicate the size of the file in brackets in Kb, Mb or b.
  • The document icons and size should be included within the <a> tag.
  • If you want to show for PDFs or other documents the whole linguistic coverage, add the clickable single language-choice icon that will trigger a pop-up displaying all the available languages.

More information on links to binary documents on the Document icons page.

Examples: Templatezip(498 kB) (displaying single language) - Test filertf(960 b) Choose translations of the previous link  (displaying multiple languages).

See also the remark on how to set up a Web service for dynamic applications mentioned in the sub-title above.

 

Image links

  • The target link is always on the image.
  • The image must have an alternative text, describing the target page. If the language of the alternative text is in a different language than the rest of the page, the lang attribute must be specified in the <img> tag.
  • If the language of the target page is different, it must be specified with the href lang attribute in the <a> tag.
  • Language and file type change will be indicated in alternative text and language attribute. No additional icons should be used.
 

Image map links

Several different links may be attached to different areas of an image (common examples are links to different countries from a map or to different persons from a photo).

Image maps must be client-side, meaning that they must be inserted in the HTML code of the page. This is normally done by all web editing software.

The image must have an alternative text for each link of each area in the language of the page, describing the target page of the link, and also indicating the language of the target page if it’s different (same rule as above for Image links).