ABOUT IMAGE HYPERLINKS
By wrapping an image in an <a> tag, you can turn static images into links to other web pages, documents or resources. There are a few parts that make up an image hyperlink:
This is the URL of the website, web page or ducument that you would like your image link to take people to. The link can either be external (to another website) or local (to another page or location on the same website). If your hyperlink is to an external website, be sure to include 'http://' or 'https://' at the start of the URL to ensure the link will work correctly. If you are linking to a download, you might want to select 'link is a download' under 'Advanced options' to make sure the resource is downloaded and not opened in the browser.
This is the URI of the image that you would like to appear and be clickable on your web page. Remember to include the full path to your image, and include the file extension (i.e. .jpg, .gif or .png).
Image alternative text
Image alternative (or alt) text provides a description of the content of the image. This is an essential accessibility measure which allows visually and cognitively impaired people understand the content of your images. Alternative text also has big SEO benefits, allowing search engines to understand the content of images that they otherwise wouldn't be able to. Your alternative text should describle the actual image, 'Click here!' is not a good description!
By default an HTML hyperlink will open in the same browser window, but you can optionally choose to have the links open in a new browser tab. This is sometimes preferable for hyperlinks where you wish to keep the previous website open in the background, but can cause usability issues as the user may not realise that a new tab has been opened.
There are also options available for websites which use iFrames: Parent will open the hyperlink in the browser window in which the iFrame is embeded, which Same will open the hyperlink within the iFrame. However, the use of iFrames are deprecated in HTML5, so should be used with caution.
The optional relationship attribute can be used to describe the relationship between the currently open web page and the one that is being linked to. Valid attributes for HTML hyperlinks are:
- Describes hyperlinks which are to an alternative version of the current document, for example a version in a different language, designed for a different medium (i.e. for a mobile device) or in a different format (such as PDF or Word document).
- Describes hyperlinks which provide information about, or ways to contact, the author of the current document.
- Indicated that the hyperlink can act as a permalink for the current article or section of the page, allowing people to save bookmarks to this point in the document.
- Describes hyperlinks leading to external websites, and which when clicked will cause the user to leave the current website.
- Describes hyperlinks which lead to the first web page or document in a lineir series.
- Describes hyperlinks which lead to help documentation about the current document.
- Describes hyperlinks which lead to the last in a series of documents or web page.
- Describes hyperlinks leading to licensing information about the current document.
- Describes hyperlinks which lead to the next part of a series of documents or web page.
- Describes hyperlinks which the owner of the current document does not have any control over and which does not wish to endorse. This is often used to indicate that there is a commercial relationship between the two (for example that it is a paid link), information which is useful for some search engines who use popularity ranking techniques.
- Describes hyperlinks which should not provide the new browsing context access to the document that opened it. This is useful when linking to untrusted websites.
- This attribute prevent the web browser from passing information about the current website to the website being linked to via the 'Referer:' HTTP header.
- Similar to the 'Next' attribute, this describes hyperlinks which navigate to the previous item in a lineer sequence of documents or web pages.
- Describes a hyperlink which points to an interface designed for searching the current document or website.
- Describes hyperlinks that point to a document or web page that describes a 'tag' that applies to the content of the current page or document.
Link is a download
This option can be used to force the web browser to download the resource being linked to, rather than attempting to open in within a browser window.