Links
The internet is a mass of information and data distributed around the world in a web of interconnecting pages.
To access these pages we can simply type a URL address into our favourite internet browser (Chrome, Firefox, Safari, etc).
Typing a different URL address every time we wanted to navigate to another source of information would be slow and frustrating (imagine all those typing errors), so we can thank hyperlinks (links) for making access to the internet easier for us all.
HTML Hyperlinks (links) enable users to navigate to internal or external web content, information and resources by clicking or tapping on a hyperlinked text, image or graphic.
Internal links (relative links) are hyperlinks that connect users to other pages and resources within the same domain name.
External links (absolute links) are hyperlinks to websites, apps or resources which can be located anywhere on the internet.
How to write <a> link
All hyperlinks elements use the <a> tag or anchor tag. A href attribute is added to the opening <a> tag with the hyperlink address, so the opening tag becomes <a href ="url">. The link text is added next, this is the clickable text link the user will see. The closing anchor tag </a> finishes the element.
<a href="url">link text</a>External links
Hyperlinks to external resources and information must use the absolute URL address as they are connecting to files outside the current domain.
<a href="https://www.twitter.com/points_pixels">Follow us on twitter</a>The above link opens the new content in the same browser window.
To create a hyperlink that opens in a new browser window or tab, we need to add a target attribute with its value set to blank, this is added after the URL. When this type of link is clicked, it will open a new blank page where the linked content will be displayed.
<a href="https://twitter.com/points_pixels" target="_blank">Follow us on twitter</a>Internal links
Internal links (relative path links) do not require the full URL address. To illustrate this, both the following links point to the same file, the first is an absolute link, the second is a relative link.
<a href="http://www.points-pixels.com/contact.html">Contact us</a><a href="contact.html">Contact us</a>This first link above is called an absolute link as it contains the full URL address and can be accessed from anywhere online.
The second link, is a relative link which locates the linked content by following a relative path from its current location to the linked content.
Internal links and navigating folders
The internal hyperlink (above) locates a target file at the same folder level as the current page and does not require http://www..
If a target file is not located in the same folder the link address needs to include the folder structure to target the correct file. To do this we use / and the folder name.
<a href="html/contact.html">Contact us</a>The link above targets the contact.html page in the html folder in the same domain. This link connects to file in a folder that is located one level below the current file.
<a href="../html/contact.html">Contact us</a>To link to a file in a folder above the current level we need to use ../ to navigate to the higher level. Repeating these symbols takes you to higher levels, so to get two levels higher we use ../../ .
Relative links still work even if a website domain is changed, this can make them particularly useful for developing websites as it allows files to be transferred from local or staging environments without having to change all URL addresses of the linked content.
Bookmark links
Bookmark links allow users to quickly navigate (jump) to content within a page. When the user clicks on a bookmark link the browser scrolls to a specified target area on the page.
For a bookmark link to work an area of the website needs to be identified as the target for the link. To achieve this an id="" attribute is added to a target element. The link <a href=""> URL address needs to include a # hashtag (number/pound sign), which represent an id, followed by the id name. Now when the bookmark link is clicked the content will scroll to the position of the id attribute.
<h2 id="jump-link"> This headline has an ID link</h2><a href="#jump-link">Link to content</a>Image links
Image links can be photographs, logos, icons or graphic images. To create an image a link image source <img src=""> is added after the opening anchor tag <a href=""> and before the closing </a>. This replace where the link text would appear in a text hyperlink. Inside the <img src=""> image quotations, we add the link path for the image and the image file name.
<a href="http://www.points-pixels.com"> <img src="http://www.points-pixels.com/images/logo.jpg" </a>
Email links
Email links include the mailto: followed by the email address.
<a href="mailto:hello@points-pixels.com">Email me</a>Mail links can also be formatted to include subject title, body text and add CC and BCC recipients using the attributes listed below:
| mailto: | recipient email | |
| &cc= | adds CC recipients | |
| &bcc= | adds BCC recipient(s) | |
| &subject= | to set the email subject | |
| &body= | to set the body of the message | |
Below is an example of a more advanced mailto: link using options from the table above. Important the ? is needed to add addtional mail fields. The %20 is used to define a space in the text.
<a href="mailto:hello@points-pixels.com?&cc=one@points-pixels.com, two@points-pixels.com, three@points-pixels.com&bcc=last@points-pixels.com&subject=Email%20with%20cc%20bcc%20subject%20and%20body%20message&body=Body%20message">Email Us</a>Download links
To create a download link downloadis added to the end of this opening anchor tag, just after the URL.
<a href="http://www.domain.com/filename.pdf" download>Click to Download</a>
Next step
HTML – 5 – Images