• Tutorial List

HTML File Linking

Last updated Jul 08, 2020
HTML File Linking

With the help of the anchor (<a>) tag, you can link any kind of files on your webpage, such as images, videos, audio files, PDFs, etc.

Example:

<!DOCTYPE html>
<html>
	<body>

      <a href="./my-image.png">View Image</a>
      <a href="./test.pdf">View PDF</a>
      <a href="./test.mp3">View Audio</a>
      <a href="./test.mp4">View Video</a>

	</body>
</html>

Try It

<a href="https://tutorials.w3jar.com/wp-content/uploads/mountains.png">View Image</a>
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank">View PDF</a>
<a href="https://tutorials.w3jar.com/wp-content/uploads/test.mp3">Audio</a>

How to make a download link in HTML?

In the above examples you can see, when you click on the link, it is opening that file.

But, if you want to download the linked files when you click on the link, then you have to use the download=”…” attribute.

The download="..." attribute takes the name you want to save the file.

<a href="./test.jpg" download="My Test Image">Download Image</a>
<a href="./test.mp3" download="My Test Song">Download Song</a>

👉 Note for the download attribute:

This will only work if the web page (where the file linked) and the linked file host are the same.

Suppose if your website is example.com and you have attached a file from another website, then it will not work.

<a href="https://i.ibb.co/djpfDWr/test.jpg" download="test">Download Image</a>

If your website example.com, then you have to do the follwoing –

<!-- If your website name is example.com -->
<a href="https://www.example.com/test.jpg" download="My Test Image">Download Image</a>

<!-- OR -->
<a href="./my-audio.mp3" download="My Audio">Download Audio</a>
<a href="https://tutorials.w3jar.com/wp-content/uploads/mountains.png" download="Mountains">Download Image</a>

Ask Questions

Your email address will not be published. Required fields are marked *