W3docs
de
Anmelden

HTML download-Attribut

The HTML download attribute specifies that the target will be downloaded when clicking on the hyperlink. Read and find out on what elements it can be used.

Das HTML download-Attribut gibt an, dass das Ziel beim Klicken auf den Hyperlink heruntergeladen wird. Es wird nur verwendet, wenn das href-Attribut festgelegt ist.

Hinweis: Das download-Attribut funktioniert nur für URLs derselben Herkunft (same-origin), blob:-URLs oder data:-URLs. Es wird für Ressourcen mit anderer Herkunft (cross-origin) ignoriert.

Der Wert des Attributs gibt den Namen der herunterzuladenden Datei an. Der Browser verwendet den Wert genau so, wie er eingegeben wurde, ohne automatisch eine Dateiendung anzuhängen. Wenn der Wert weggelassen wird, verwendet der Browser den ursprünglichen Dateinamen.

Sie können das download-Attribut für die folgenden Elemente verwenden: <a> und <area>.

Syntax

Syntax des HTML download-Attributs

<a download="filename">&lt;/a&gt;

Beispiel für die Verwendung des HTML download-Attributs am <a>-Element:

Beispiel für die Verwendung des HTML download-Attributs am <a>-Element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Click on the  logo to download it:</h1>
    <p>
      <a href="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" download>
        <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3Docs" width="190" height="45" />
      </a>
    </p>
  </body>
</html>
Probier es selbst »

Beispiel für die Verwendung des HTML download-Attributs am <area>-Element:

Beispiel für die Verwendung des HTML download-Attributs am <area>-Element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on one of the HTML, CSS or PHP logo and download it:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" download />
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" download />
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" download />
    </map>
  </body>
</html>
Probier es selbst »

Praxis

Übung

Was bewirkt das HTML download-Attribut?