Making it easy to create HTML image hyperlinks for your website.
Adding a compelling image to your link is a great way to encourage clicks! Add your link, image and alternative text to generate HTML code for your image link.
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 (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:
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.