Das src Attribut in HTML: ein umfassender Leitfaden

Wenn ich sauberen HTML-Code schreibe, ist das src Attribut in HTML eines der ersten Dinge, auf die ich achte. Warum? Weil es direkt bestimmt, welche Ressource geladen wird. Bild, Video, Audio, Script, iframe: Ohne src läuft nichts.

Und genau deshalb lohnt es sich, das Attribut wirklich zu verstehen. Nicht nur oberflächlich. Sondern so, dass du Fehler vermeidest, Ladezeiten verbesserst und deine Inhalte sauber strukturierst.

Was ist das src Attribut in HTML?

src steht für source. Es zeigt dem Browser die Quelle einer Datei. Diese Datei kann lokal sein oder von einer anderen URL kommen.

Ein simples Beispiel:

<img src="bild.jpg" alt="Produktfoto">

Hier sagt src: Lade bild.jpg und zeige es als Bild an. Ohne src weiß der Browser nicht, was er laden soll.

Wo ich das src Attribut in HTML nutze

Das src Attribut in HTML kommt in mehreren Elementen vor. Die wichtigsten sind:

• <img> für Bilder
• <script> für JavaScript-Dateien
• <iframe> für eingebettete Inhalte
• <video> und <audio> für Medien
• <source> innerhalb von Audio-, Video- oder Picture-Elementen

Jedes davon hat seinen eigenen Zweck. Aber das Prinzip bleibt gleich: src = Quelle.

Das src Attribut in HTML bei Bildern

Bei Bildern ist src wahrscheinlich die bekannteste Variante. Ich nutze es so:

<img src="produkt.webp" alt="Schwarzer Rucksack auf weißem Hintergrund">

Hier sind zwei Dinge wichtig:

• src zeigt auf die Bilddatei
• alt beschreibt das Bild für Barrierefreiheit und SEO

Ich würde nie nur das Bild einbauen und den Rest ignorieren. Wenn das Bild nicht lädt, bleibt alt als Ersatztext. Das ist gut für Nutzer und Suchmaschinen.

Das src Attribut in HTML bei Scripts

Bei JavaScript sieht es so aus:

<script src="app.js"></script>

Das bedeutet: Lade die Datei app.js und führe sie aus. Wenn ich Scripts einbinde, denke ich sofort an Performance. Denn externe Dateien können deine Seite bremsen, wenn du sie falsch platzierst.

Mein einfacher Grundsatz:

• Wichtige Scripts gezielt laden
• Unnötige Scripts vermeiden
• Beim Bedarf defer nutzen

Mehr zum Verhalten von Scripts findest du direkt in der offiziellen MDN-Doku: MDN: script.

Das src Attribut in HTML bei Videos und Audio

Bei Medien geht es genauso klar weiter. Beispiel für ein Video:

<video controls src="video.mp4"></video>

Oder mit mehreren Quellen:

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Ich mache das oft so, weil verschiedene Browser unterschiedliche Formate besser unterstützen. Das gleiche Prinzip gilt für Audio.

Wenn du tiefer einsteigen willst, ist die MDN-Seite zu video und audio hilfreich.

Relative vs. absolute Pfade beim src Attribut in HTML

Hier passieren die meisten Fehler. Ich sehe das ständig.

Relative Pfade beziehen sich auf den aktuellen Standort deiner Datei:

<img src="images/team.jpg" alt="Teamfoto">

Absolute Pfade enthalten die komplette Adresse:

<img src="https://example.com/images/team.jpg" alt="Teamfoto">

Was ich nutze:

• relativ für interne Projektdateien
• absolut für externe Ressourcen oder wenn Klarheit wichtig ist

Mein Rat: Bleib in Projekten möglichst konsistent. Misch nicht wild beides, wenn du es vermeiden kannst.

Häufige Fehler beim src Attribut in HTML

Ich halte Fehler gern simpel. Hier sind die Klassiker:

• Falscher Pfad – Datei existiert nicht dort, wo du sie verlinkst
• Groß-/Kleinschreibung – auf Servern oft wichtig
• Leerzeichen im Dateinamen – unnötig fehleranfällig
• Fehlender Dateityp – vor allem bei source sinnvoll
• Kein Fallback – bei Medien kann das Probleme machen

Wenn etwas nicht lädt, prüfe zuerst den Pfad. Nicht den Browser. Nicht das CSS. Den Pfad.

Best Practices für das src Attribut in HTML

Wenn ich das src Attribut in HTML sauber einsetzen will, halte ich mich an einfache Regeln:

• Saubere Dateinamen ohne Sonderzeichen und Leerzeichen
• Klare Ordnerstruktur für Bilder, Scripts und Medien
• Passende Formate für den Einsatzzweck, etwa WebP für Bilder
• Barrierefreiheit mit alt, Untertiteln oder Fallback-Text
• Performance im Blick durch optimierte Dateien und gezieltes Laden

Für Bildoptimierung ist die offizielle Web.dev-Ressource stark: web.dev: Bilder lernen.

Das src Attribut in HTML und SEO

Direkt rankt src nicht. Aber indirekt hat es Einfluss. Warum? Weil Medien, Scripts und iFrames Ladezeit, Nutzererlebnis und Crawlbarkeit beeinflussen.

Ich achte besonders auf drei Dinge:

• Schnelle Ladezeiten durch optimierte Dateien
• Saubere Struktur für bessere Wartbarkeit
• Barrierefreie Inhalte für mehr Nutzbarkeit

Das ist kein theoretischer Luxus. Das ist Basics, die Ergebnisse bringen.

Wann ich src nicht allein verwende

Es gibt Fälle, in denen src nicht ausreicht oder ergänzt werden sollte. Beispiel: Bilder mit verschiedenen Auflösungen oder Formaten. Dann nutze ich oft srcset oder das picture-Element.

<img src="bild.jpg" srcset="bild-2x.jpg 2x" alt="Produktfoto">

Das ist kein Ersatz für src. Es ist eine Erweiterung. Der Browser bekommt mehr Optionen und kann besser entscheiden.

Das src Attribut in HTML: Kurz zusammengefasst

Das src Attribut in HTML definiert die Quelle einer Datei. Es ist zentral für Bilder, Scripts, Videos, Audio und eingebettete Inhalte. Wer es sauber verwendet, baut bessere Websites: schneller, klarer, robuster.

Mein einfacher Workflow:

• Datei sauber benennen
• Pfad prüfen
• Passendes HTML-Element wählen
• Fallbacks ergänzen
• Performance und Barrierefreiheit mitdenken

Wenn du das konsequent machst, sparst du dir Fehler, Nacharbeit und Frust.

Das src Attribut in HTML ist kein kleines Detail. Es ist eine der wichtigsten Verbindungen zwischen deinem Code und dem, was der Nutzer sieht.