HTML5: Download a file when clicking on the link

Last update on December 22 2023 12:17:56 (UTC/GMT +8 hours)

Solution :

HTML Code:

<!-- Declare the document type as HTML5 -->
<!DOCTYPE html>

<!-- Start the HTML document -->
<html>

<!-- Start the head section containing metadata about the document -->
<head>

<!-- Set the character encoding to UTF-8 -->
<meta charset="utf-8">

<!-- Set the title of the document to "Download a file when clicking on the link" -->
<title>Download a file when clicking on the link</title>

<!-- Close the head section -->
</head>

<!-- Start the body section containing the content of the document -->
<body>

<!-- Create a paragraph containing a hyperlink with a download attribute -->
<p><a href="https://www.w3resource.com/images/w3resource-logo.png" download>Download</a></p>

<!-- Close the body section -->
</body>

<!-- Close the HTML document -->
</html>

Explanation:

The above HTML code defines a basic HTML5 document with metadata in the head section and a body containing a paragraph with a hyperlink. The special addition here is the use of the 'download' attribute within the hyperlink. This instructs the browser to download the linked file ("w3resource-logo.png") when the link is clicked.

<!DOCTYPE html>:

This declaration specifies that the document type is HTML5, indicating the HTML version being used.

<html>:

This tag marks the beginning of an HTML document.

<head>:

The 'head' section contains metadata about the HTML document, such as character encoding and title.

<meta charset="utf-8">:

This meta tag sets the character encoding to UTF-8, a widely used character encoding standard.

<title>Download a file when clicking on the link</title>:

The title tag sets the HTML document title, which is often displayed in the browser's title bar or tab.

</head>:

Closes the HTML document's head section.

<body>:

The body section contains the actual HTML document content.

<p><a href="https://www.w3resource.com/images/w3resource-logo.png" download>Download</a></p>:

Create a paragraph (<p>) containing a hyperlink (<a>) with the text "Download" and a link (href) to "https://www.w3resource.com/images/w3resource-logo.png". The download attribute is added to the <a> tag, indicating that clicking the link should prompt the user to download the linked file.