<a href=”exampleURL”>Example link text</a>
The href attribute specifies the URL of the desired destination. The text between the opening and closing <a> tags is the text that will be displayed for the link. In the above example, clicking ‘Example link text’ would take the user to the ‘exampleURL’ destination.
There are two different ways to format your URL, using an absolute path or a relative path. Let’s break down the difference in detail.
An absolute URL is a path to a resource that can exist anywhere on the web. This means it can link to a completely different website entirely. To use an absolute URL, you must format your URL with the full web address of your desired destination resource, for example ‘http://www.google.com’. Clicking this URL will take the user to google.com.
By contrast, a relative URL is a path to a resource that exists on the same website/server. It is a local link. Because we reference this link from your current document, we simply provide the path relative to the current document. For example, if your desired file was an HTML file that exists in the same folder as your current webpage, you would simply format your URL in the following way: ‘examplefile.html’. This tells the web browser that we are looking for a file relative to the existing file. It is best practice to always use relative file paths where possible. Take the BBC website as an example. All links between the various BBC articles are relative links as they exist on the same website, and therefore the same server.
Sometimes your destination resource resides in a different folder from your current folder. Taking the BBC as an example again, if their website was a static site, then they might have a news folder for articles, then an images folder for the images within the articles. In this case you will need to explain to the web browser how to find the file in the other folder – this can be achieved using a combination of ‘.’ or ‘/’.
Let’s take this document tree as an example:
If we wanted to provide a link from our index.html document to the logo.png file, we would use the following relative URL ‘../images/logo.png’. Let’s break this down further: the syntax ‘../’ denotes to the browser that you would like to traverse up the document tree, meaning to leave the current folder and move up to its parent folder. The first ‘..’ moves up to the www folder, then the forward slash tells the browser to enter this folder. So the first ‘../’ is saying move up to the www folder and enter it, then the second part ‘images/logo.png’ is requesting to enter the images folder and return the logo.png file.
This combination of ‘..’ and ‘/’ allows us to navigate around folder structures in order to return our relative resource.
When creating a hyperlink, you have the option to specify a ‘target’ attribute. The target attribute specifies how you want the browser to open the link. The most commonly used options for this attribute are as follows:
An HTML bookmark is a link that points to a specific part of a webpage. This is achieved by giving your destination an id to then point to. Let’s walk through an example of how this is achieved.
First we give our desired bookmark location an id. Let’s use the <h1> tag that we created earlier as an example. We simply add the following text to the opening tag <h1 id=“bookmark”>. Next we add our newly created id value as the href value, adding a hash at the front to denote that we are looking for a bookmark <a href=“#bookmark”>Link to header</a>.
Now, when the user clicks the link, the page will shift to bring the desired bookmark to the top of the page, regardless of how long the page is.
This functionality is especially useful for long webpages, where these ‘jump links’ can help improve the overall usability of the page.