Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

Dr. Web » HTML/CSS » Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen

Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen

  • Aktualisiert am 18. April 2023
  • Denis Potschien von Denis Potschien
  • HTML/CSS
  •  

Werden Dateien in einem HTML-Dokument verlinkt, versucht der Browser zunächst immer, diese Datei innerhalb der Anwendung zu öffnen und darzustellen. Bei den meisten Bilddateien ist das so gewünscht und auch pei PDF-Dateien, insofern ein Plugin installiert ist, welches die Darstellung von PDFs innerhalb des Browserfensters ermöglicht, hat sich die Vorgehensweise etabliert. Manchmal ist es jedoch sinnvoll, beziehungsweise gewollt, eine Datei explizit zum Herunterladen anzubieten.

html5 download.jpg Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen

Bisher ließen sich Dateien nur über eine Angabe im HTTP-Header ausdrücklich zum Download anbieten:

Content-Disposition: attachment; filename="datei.jpg"

Um Dateien diese Angaben im Header mitzugeben, müssen sie über ein Download-Script angeboten werden. Mit HTML5 kann auf diese Header-Angabe verzichtet werden.

Spezielles Attribut bietet Dateien zum Herunterladen an

Das neue HTML5-Attribut „download“, welches zusammen mit dem A-Element eingesetzt wird, deklariert einen Link als Download-Ressource. In diesem Fall werden verlinkte Dateien – unabhängig davob, ob die Dateien auch im Browser geladen werden können – immer zum Herunterladen angeboten:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
<a href="bild.jpg.webp" download="Bild zum Herunterladen"</a>

Ähnlich wie bei der Angabe im HTTP-Header gibt es auch bei dieser clientseitigen Variante die Möglichkeit, einen alternativen Dateinamen anzugeben, unter dem die Datei beim Herunterladen gespeichert werden soll. Dieser Dateiname wird dem Download-Attribut als Wert zugewiesen:

<a href="bild.jpg.webp" download="datei.jpg">Bild zum Herunterladen</a>

Wird ein separater Dateiname sowohl im HTTP-Header als auch im Download-Attribut angegeben, wird der Dateiname des HTTP-Headers verwendet. Die Angabe im Download-Attribut bleibt in diesem Fall unberücksichtigt.

Für den Einsatz in der Praxis ist das Download-Attribut bisher noch nicht geeignet. Nur Chrome kann die Angabe bislang interpretieren. Andere Browser ingorieren das Attribut.

Gestaltung per CSS

Wer das Download-Attribut dennoch verwendet, hat die Möglichkeit, Download-Links statt über eine Klasse über den Attribut-Selektor zu gestalten:

a[download] {  font-weight: bold;}

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Inhaltsverzeichnis

Lust auf mehr?

Web-Standards-Dokumentation: Microsoft unterstützt das Mozilla Developer Network

Microsoft ist fleißig dabei, diejenigen seiner Dokumente zu exportieren, die sich mit Web-Standards befassen. Ziel ist das MDN, das Mozilla Developer Network.

Ist der Desktop tot? Worauf ihr bei modernem Design achten solltet

Findet modernes Design heutzutage vornehmlich für mobile Nutzer statt? Wann schaltet der letzte Nutzer seinen Desktop-Rechner ab? Ist der Desktop wirklich tot?

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

0 Antworten

  1. Tom sagt:
    18. Juli 2012 um 16:28 Uhr

    Gut zu wissen; diese Info kann ich demnächst mal brauchen.

    Übrigens:

    <a href="bild.jpg" download="Bild zum Herunterladen"

    kann wohl nicht ganz stimmen, oder?
    Das fehlt noch was 😉

    Antworten
    1. Felix sagt:
      19. Juli 2012 um 13:11 Uhr

      Nein, das wird schon alles sein. Das Vorhandensein von “download” löst die Funktion aus, das “Bild zum Herunterladen” ist nur der Text, der dazu angezeigt wird und der ist beliebig.

    2. Stefan sagt:
      20. Juli 2012 um 23:49 Uhr

      Der a-Tag sollte aber vermutlich trotzdem geschlossen werden 😉

  2. Kapcmen sagt:
    3. Januar 2013 um 13:46 Uhr

    Wie sieht es mit den Browsern aus? Funktioniert das auch mit dem IE7+?

    Antworten
    1. mo sagt:
      3. Juli 2013 um 20:22 Uhr

      nope ie 10 kann es nicht…

  3. Burns sagt:
    12. Februar 2014 um 15:30 Uhr

    Hi, leider geht des auch nicht in Chromeium: Version 32.0.1700.102 Ubuntu 13.10 (32.0.1700.102-0ubuntu0.13.10.1~20140128.970.1)

    Schade drum, ich könnte es gerauchen.

    Antworten
  4. Mario Ohibsky sagt:
    1. Februar 2018 um 15:53 Uhr

    Mittlerweile interpretieren alle gängigen Browser dieses Attribut, zum Glück… 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agenturen
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Internetagentur
  • Marketing Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • WordPress Agentur
  • Beste Agenturen
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Internetagentur
  • Marketing Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur
  • Webdesign Agentur
  • Werbeagentur
  • WordPress Agentur

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen