Linking to Assets and Resources in HTML

When we talk about links in HTML, we can be focused on one of two types of HTML elements:

  • Anchor Tags/Links: A link to another resource on your site (or another site) that is visible to the user in the body of the HTML
  • Link Elements in the Head: A link element that is used in the head of your HTML document that is not visible or clickable by the user. These links are used to add resources like stylesheets.

It’s important to understand the difference as anchor tags should not be used in the head of your HTML and link tags should not be used in the body of your HTML.

Linking to Resources You Own and Host (Relative Links)

Whether you’re talking about a link or an anchor, for resources that are a part of your site and located inside of your folders, you must use relative links. This means that you DO NOT include any links that include text like "C:Documents/folders/...", "/Users/Downloads/...",  or "https://" in these anchor or link href values. They only include the name of the file/resource you are linking to, and any folders inside of your project that hold that resource.

<link href="styles.css" rel="stylesheet">
<a href="index.html">Home</a>

Examples of Where to Use Relative Links

You will often need to use relative links on your sites and it is is important to know how to create them. Below are some examples of the places where you will use relative links. 

  • The other pages on your site – For the pages on your site, they should all be inside of your project folder and linked relatively.
    <a href="index.html">Home</a>
  • Your stylesheets – Once you start writing CSS to add to your site design, you will have the files you create stored in the same project folder as your HTML files and linked relative to the pages.
    <link href="styles.css" rel="stylesheet">
  • The images used on your pages – The images you add to your pages should be properly named and sized, and saved in a folder inside of your project named “images” which you then link to relative to your page file.
    <img src="images/storefront.jpeg" alt="The Serrano's Chandler storefront
    shows a white stucco building with colorful tile accents and the
    Serrano's name in a red cursive font">
  • Other documents on your site that users can view – Sometimes, you will have documents (like a pdf) that your user needs to be able to view and download from your site. These will likely be stored in a folder inside of your project folder, and can be named something like “forms” or “documents” depending on the contents. Like images, these are a part of your site and hosted with you other files, so they should be added with relative links. <a href=”forms/adoption-application.pdf”>View our pet adoption application</a>.
  • Other resources hosted with your files (audio, video, fonts, etc.) – If you are hosting other content, like audio, video, or font files, they would be stored in your project folder with your other assets, usually inside of their own folder, similar to the organization we use with images.
    <audio controls> <source src="audio/jingle.mp3"> <source src="audio/jingle.wav"> This content is not supported by your browser </audio>
    <video controls width="500">
    <source src="video/commercial.mp4">
    <source src="video/commercial.webm">
    </video>

    <link rel="preload" href="fonts/Roboto-Medium.ttf" as="font" type="font/ttf" crossorigin>

Linking to Resources Hosted Elsewhere (Not In Your Files/Part of Your Site, Absolute Links)

When you are needing to link to a resource that is not part of your site (it isn’t located anywhere in your project folder or subfolder), you will need to use an absolute link. An absolute link will include information about the website where it is hosted. You cannot use an absolute link to link to a file on your computer, so be sure to only use assets you host with relative links, and link properly to resources hosted elsewhere with absolute links. It is generally easiest to go to the URL of the thing you are linking to, then copy your absolute link from there to set your your href attribute.

NOTE:

Do not link to image assets that are part of your content from another site. Download and save your assets to your project folder and subfolder as needed.

Example of When to Use Absolute Links

As mentioned above, there are some specific use cases for using an absolute link. Examples of those uses are below. 

  • The resource is hosted on another server, computer, or website than the one it is being viewed on – This could be a video on YouTube, or fonts hosted by Google Fonts or Adobe Fonts that you are not hosting yourself (which is more advanced that required for this course).
    <!--
    All of the links below would be added to your head to add the single
    Google Font Roboto in a medium weight to your page.
    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
  • You are linking to another website – Sometimes you just need to link to another site for additional information or to link to a product or service. Links that lead off of your site should always use absolute links, and they MUST INCLUDE all parts of the URL, including https:// in order to work.
    <a href="https://www.asu.edu/">Visit the ASU Home Page</a>