Das Wichtigste in Kürze

• HTML-E-Mails basieren auf Tabellen, nicht auf Divs. Die meisten E-Mail-Clients, allen voran Outlook, unterstützen keine modernen CSS-Layouts. Eine tabellenbasierte Struktur ist nach wie vor der zuverlässige Standard.
• Inline-CSS ist Pflicht. Viele E-Mail-Clients entfernen Styles im <head> der E-Mail. Wenden Sie CSS direkt auf jedes Element an, damit Ihr Design erhalten bleibt.
• Responsive Design ist unverzichtbar. Mehr als die Hälfte aller E-Mails wird auf Mobilgeräten geöffnet. Nutzen Sie flexible Layouts, Media Queries und skalierbare Schriften, damit sich Ihre E-Mails an jede Bildschirmgröße anpassen.
• Testen Sie vor dem Versand. E-Mail-Clients stellen HTML unterschiedlich dar. Was in Ihrem Browser perfekt aussieht, kann in Outlook 2019 oder Apple Mail fehlerhaft angezeigt werden. Prüfen Sie die Vorschau und testen Sie immer.
• Sie müssen nicht bei null anfangen. Mit dem HTML-Editor von Benchmark Email können Sie jede beliebige HTML-E-Mail direkt in die Plattform einfügen und versenden.

 

HTML-E-Mail klingt einfach, ist in der Praxis aber alles andere als das. Sie beherrschen HTML. Sie haben schon Webseiten erstellt. Doch sobald Sie dieses Wissen auf eine E-Mail übertragen, funktioniert in Outlook plötzlich etwas nicht mehr, Ihr Bild verschwindet in Gmail oder Ihr Layout bricht auf Mobilgeräten zusammen.

Das liegt daran, dass HTML-E-Mails ihren eigenen Regeln folgen – und diese Regeln haben sich nicht geändert. Geändert haben sich jedoch die Tools rund um diese Regeln. Heute können Sie eine ansprechende, responsive E-Mail von Hand programmieren, einen modernen Editor nutzen, der Ihnen die Komplexität abnimmt, oder beides kombinieren, indem Sie Ihr eigenes HTML direkt in eine Plattform wie Benchmark Email importieren und von dort aus versenden.

In diesem Leitfaden erfahren Sie, was Sie 2026 über HTML-E-Mail-Code wissen müssen: wie er aufgebaut ist, wie Sie ihn responsiv gestalten, was Sie vermeiden sollten und wie Sie die richtigen Tools einsetzen, damit Sie nicht bei jedem Versand gegen Ihren E-Mail-Client ankämpfen müssen.

Warum sich HTML-E-Mails von normalem HTML unterscheiden

Auf den ersten Blick ähneln sich die Erstellung einer Webseite und die einer HTML-E-Mail. Beide basieren auf HTML und CSS. Webbrowser halten sich jedoch seit Jahren an gängige Standards. E-Mail-Clients nicht.

Outlook nutzt zur Darstellung von HTML nach wie vor die Rendering-Engine von Microsoft Word und ignoriert daher einen Großteil moderner CSS-Funktionen. Gmail kürzt E-Mails, die eine bestimmte Größe überschreiten. Apple Mail stellt Inhalte anders dar als die Gmail-App auf demselben Smartphone. Das Ergebnis: Eine E-Mail, die in einem Client hervorragend aussieht, kann in einem anderen völlig fehlerhaft wirken.

Das ist kein Fehler in Ihrem Code. So funktionieren E-Mail-Clients nun einmal – und genau deshalb gelten für HTML-E-Mails eigene Konventionen, die sich nicht verändert haben, obwohl sich die Webentwicklung längst weiterentwickelt hat.

Diese Konventionen kurz zusammengefasst:

• Verwenden Sie Tabellen für das Layout, nicht <div> sowie CSS Grid oder Flexbox.
• Wenden Sie Inline-Styles auf jedes Element an, statt sich auf ein Stylesheet zu verlassen.
• Beschränken Sie sich auf websichere Schriftarten oder legen Sie zuverlässige Fallback-Schriftarten fest.
• Verwenden Sie absolute URLs für alle extern gehosteten Bilder.
• Halten Sie die Gesamtdateigröße unter 100 KB, um zu verhindern, dass Gmail Ihre E-Mail abschneidet.

Die Grundstruktur einer HTML-E-Mail

Jede HTML-E-Mail folgt einem ähnlichen Grundgerüst – ganz gleich, ob Sie sie von Hand programmieren oder aus einem Editor exportieren. Im Folgenden sehen Sie, wie dieses Gerüst aussieht und warum jeder Bestandteil wichtig ist.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Email Subject</title>
  <style type="text/css">
    /* Responsive styles go here */
    @media only screen and (max-width: 600px) {
      .wrapper { width: 100% !important; }
      .content { padding: 20px !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
  <!-- Outer wrapper table -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Inner content table -->
        <table class="wrapper" border="0" cellpadding="0" cellspacing="0"
          width="600" style="background-color: #ffffff; border-radius: 4px;">
          <tr>
            <td class="content" style="padding: 40px;">
              <!-- Your content goes here -->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Welche Aufgabe die einzelnen Bestandteile haben:

• Der XHTML-Doctype teilt älteren E-Mail-Clients mit, wie sie Ihren Code interpretieren sollen. 
• Das Viewport-Meta-Tag teilt mobilen Browsern mit, wie die E-Mail skaliert werden soll. 
• Der <style> -Block im <head> enthält Ihre Media Queries (Hinweis: Nicht alle Clients lesen diesen Block aus, deshalb übernehmen Inline-Styles alles Übrige). 
• Die äußere Tabelle legt den Hintergrund fest, und die innere Tabelle mit 600 px entspricht der Standard-Inhaltsbreite, die in allen Desktop-Clients funktioniert.

Ein praktisches Codebeispiel für HTML-E-Mails

Hier sehen Sie ein Praxisbeispiel für einen einspaltigen E-Mail-Abschnitt: einen Header, einen kurzen Absatz und einen Call-to-Action-Button. Wiederholen und stapeln Sie dieses Muster, um eine vollständige E-Mail aufzubauen.

<!-- Header image -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" style="padding: 0 0 24px 0;">
      <img src="https://yourdomain.com/header-image.png"
        alt="Your Brand Name"
        width="600"
        style="display: block; max-width: 100%; height: auto;" />
    </td>
  </tr>
</table>
<!-- Headline -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 0 0 16px 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 28px;
                font-weight: bold;
                color: #111111;
                line-height: 1.3;">

      Your headline goes here

    </td>
  </tr>
</table>
<!-- Body text -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 0 0 24px 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                color: #444444;
                line-height: 1.6;">

      This is your body copy. Keep it short, clear, and focused on one
      message. Every element of this email should point your reader toward
      the action you want them to take.

    </td>
  </tr>
</table>
<!-- CTA Button -->
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"
        style="border-radius: 4px; background-color: #0066CC;">
      <a href="https://yourdomain.com/your-page"
         target="_blank"
         style="display: inline-block;
                padding: 14px 28px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                text-decoration: none;
                border-radius: 4px;">

        Click Here to Learn More

      </a>
    </td>
  </tr>
</table>

Einige Punkte an diesem Beispiel sind besonders erwähnenswert:

• Der Button wird aus einer Tabelle aufgebaut, nicht aus einem <div> oder <button>. So erreichen Sie am zuverlässigsten eine einheitliche Darstellung von Buttons in allen Clients, einschließlich Outlook.
• Alle Styles werden inline definiert. Schriftart, Schriftgröße, Farbe, Zeilenhöhe, Innenabstand: Alles wird direkt im Element selbst deklariert. Das macht den Code zwar umfangreich, sorgt aber dafür, dass das Design erhalten bleibt, wenn E-Mail-Clients den folgenden Abschnitt entfernen: <head>.
• Bilder haben feste Breitenangaben und die Eigenschaft display: block. So vermeiden Sie in bestimmten Clients unerwünschte Lücken unter Bildern und verhindern, dass sich das Layout beim Laden des Bildes verschiebt.
• Links in Buttons erhalten ihr eigenes Styling. Verlassen Sie sich in einer E-Mail nie auf die Farbe des übergeordneten Elements, um ein Anchor-Tag zu gestalten.

So gestalten Sie Ihre HTML-E-Mail responsiv

Da mehr als die Hälfte aller E-Mails auf Mobilgeräten geöffnet wird, ist ein Design, das nur bei 600 px funktioniert, noch nicht fertig. Responsive HTML-E-Mails basieren in der Regel auf zwei Techniken: flexiblen Layouts und Media Queries.

Flexible Layouts

Verwenden Sie für innere Elemente statt fester Pixelbreiten prozentuale Breiten, damit sich Spalten auf natürliche Weise verkleinern. Ihr äußerer Container kann bei 600 px bleiben, alles darin sollte sich jedoch flexibel anpassen.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <!-- Left column -->
    <td width="50%" valign="top"
        style="padding: 0 12px 0 0;">
      <!-- Left content -->
    </td>
    <!-- Right column -->
    <td width="50%" valign="top"
        style="padding: 0 0 0 12px;">
      <!-- Right content -->
    </td>
  </tr>
</table>

Media Queries

Bei Bildschirmen unter 600 px sollten Sie Spalten in der Regel untereinander anordnen und die Schriftgrößen erhöhen. Media Queries im <head> übernehmen dies bei E-Mail-Clients, die sie unterstützen (Gmail auf den meisten Plattformen, Apple Mail, iOS Mail).

@media only screen and (max-width: 600px) {
  /* Stack two-column layouts */
  .two-col td {
    display: block !important;
    width: 100% !important;
    padding: 0 0 16px 0 !important;
  }
  /* Larger body text on small screens */
  .body-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
  /* Full-width CTA button */
  .cta-button {
    width: 100% !important;
    text-align: center !important;
  }
}

Fügen Sie Ihren Tabellenelementen die passenden Klassennamen hinzu (class=”two-col”, class=”body-text”, usw.), und schon greifen die Styles auf Mobilgeräten, während die Inline-Styles die Desktop-Darstellung übernehmen.

Häufige Fehler bei HTML-E-Mails, die Sie vermeiden sollten

• Hintergrundbilder in Outlook verwenden. Outlook ignoriert CSS-Hintergrundbilder bei den meisten Elementen. Verwenden Sie stattdessen <img> -Tags oder greifen Sie auf den VML-Workaround von Microsoft zurück, wenn ein Hintergrundbild unverzichtbar ist.
• Sich auf JavaScript verlassen. Kein E-Mail-Client führt JavaScript aus. Jede interaktive Funktion gehört auf eine Landingpage, nicht in die E-Mail selbst.
• Die Angabe von alt -Text vergessen. Viele E-Mail-Programme blockieren Bilder standardmäßig. Ist Ihr Alt-Text leer, sehen Leser nur leere Kästen und erhalten keinerlei Hinweis darauf, was dort zu sehen sein sollte.
• Schriften aus Google Fonts oder eigenen Quellen einbetten. Webfonts funktionieren in Apple Mail und einigen wenigen anderen E-Mail-Programmen, versagen in vielen anderen jedoch ohne jede Warnung. Legen Sie deshalb immer eine Fallback-Schriftenfolge fest: font-family: ‘Your Font’, Georgia, serif;.
• Die Nur-Text-Version vergessen. Die meisten E-Mail-Marketing-Plattformen versenden zusätzlich zu Ihrem HTML eine Nur-Text-Alternative. Erstellt Ihre Plattform diese nicht automatisch, schreiben Sie sie selbst. Sie ist wichtig für die Zustellbarkeit und die Barrierefreiheit.
• Dateigrößen über 100 KB. Gmail kürzt E-Mails oberhalb dieses Grenzwerts und versteckt Ihre Inhalte hinter dem Link „Gesamte Nachricht anzeigen“. Halten Sie Ihr HTML schlank und hosten Sie Bilder extern, statt sie einzubetten.

Tools zum Erstellen von HTML-E-Mails im Jahr 2026

Je nachdem, wie viel Sie selbst in die Hand nehmen möchten, stehen Ihnen mehrere Wege offen.

Von Hand programmieren

Wenn Sie sicher mit HTML und CSS umgehen, haben Sie beim Programmieren von Hand die volle Kontrolle. Nutzen Sie einen modernen Code-Editor (VS Code, Sublime Text oder Ähnliches) und kombinieren Sie ihn mit einem lokalen Vorschau-Tool. Das MJML-Framework ist einen Blick wert, wenn Sie besser wartbares Markup wünschen, das sich in E-Mail-kompatibles HTML kompilieren lässt. Es übernimmt einen Großteil des Tabellen-Grundgerüsts für Sie.

Spezielle Design-Tools für E-Mails

Mit Plattformen wie Litmus und Email on Acid können Sie Ihr HTML vor dem Versand in Dutzenden E-Mail-Clients in der Vorschau prüfen. Besonders nützlich sind sie für die Qualitätssicherung einer von Hand programmierten Vorlage.

Der HTML-Editor von Benchmark Email

Wenn Sie bereits eine HTML-E-Mail erstellt haben – ob von Hand programmiert, aus einem Design-Tool exportiert oder aus einer Vorlagenbibliothek übernommen –, können Sie den Code mit dem HTML-Editor von Benchmark Email direkt in die Plattform einfügen und an Ihre Liste senden.

So funktioniert es:

1. Kopieren Sie das HTML aus Ihrer E-Mail-Datei oder Vorlage.
2. Erstellen Sie in Benchmark Email eine neue Kampagne und wählen Sie die Option für den HTML-Editor.
3. Fügen Sie Ihr HTML in den Editor ein.
4. Prüfen Sie die Vorschau auf verschiedenen Geräten, um sicherzustellen, dass alles korrekt dargestellt wird.
5. Senden Sie die E-Mail wie jede andere Kampagne an Ihre Liste.

Sie nutzen dabei die gesamte Versandinfrastruktur von Benchmark Email – darunter Tools für die Zustellbarkeit sowie Listenverwaltung, Öffnungs- und Klick-Tracking und Reporting –, ohne Ihre E-Mail in einem Drag-and-Drop-Editor neu aufbauen zu müssen. Wenn Sie bereits Zeit in eine individuelle Vorlage investiert haben, können Sie sie auf diesem Weg am schnellsten einsetzen.

Der HTML-Editor bietet außerdem eine Codeansicht. So können Sie schnelle Anpassungen vornehmen – etwa Texte ändern, einen Link aktualisieren oder eine Bild-URL austauschen –, ohne die Plattform zu verlassen.

HTML-Code für E-Mails mit KI erstellen

KI-Coding-Tools haben das manuelle Programmieren von HTML-E-Mails deutlich zugänglicher gemacht. Wenn Sie genau wissen, was Sie möchten, sich aber nicht zutrauen, tabellenbasiertes HTML von Grund auf zu schreiben, können Tools wie ChatGPT, Claude und GitHub Copilot aus einer einfachen Beschreibung eine funktionsfähige E-Mail-Struktur erzeugen. Das geht schneller, als jedes Mal die Dokumentation zu durchforsten, wenn Sie ein zweispaltiges Layout oder einen Bulletproof-Button benötigen.

Einige Möglichkeiten, wie KI Sie bei der Arbeit mit HTML-E-Mails unterstützt:

Eine Ausgangsvorlage erstellen. Beschreiben Sie den Aufbau Ihrer E-Mail (zum Beispiel „ein Header-Bild, ein zweispaltiger Abschnitt und ein CTA-Button, auf Mobilgeräten einspaltig“), und ein KI-Tool erstellt daraus ein tabellenbasiertes HTML-Grundgerüst, das Sie anschließend bearbeiten können. Das spart Zeit bei der Einrichtung, und Sie können schneller mit der individuellen Anpassung beginnen.

Bestimmte Komponenten schreiben. Sie benötigen einen Bulletproof-VML-Hintergrund für Outlook oder einen Preheader-Text, der visuell ausgeblendet wird, aber in der Posteingangsvorschau erscheint? Dabei handelt es sich um gut dokumentierte Muster, die KI zuverlässig umsetzt. So müssen Sie die genaue Syntax nicht jedes Mal nachschlagen.

Fehlerhaften Code debuggen. Fügen Sie einen fehlerhaften HTML-Abschnitt in einen KI-Chat ein und fragen Sie, wo das Problem liegt. KI-Tools erkennen nicht geschlossene Tags, fehlende Inline-Styles oder Attribute, die von E-Mail-Clients nicht unterstützt werden – besonders hilfreich, wenn Sie vor 300 Zeilen Tabellen-Markup sitzen und den Fehler einfach nicht finden.

Einfaches HTML in E-Mail-taugliches HTML umwandeln. Wenn Sie ein Webseiten-Layout für eine E-Mail anpassen möchten, kann KI Ihnen dabei helfen, die CSS-Grid- oder Flexbox-Struktur in tabellenbasierte Entsprechungen umzuschreiben – einer der mühsameren Schritte bei der Umwandlung.

Ein wichtiger Hinweis: KI-generierter HTML-E-Mail-Code ist ein guter Ausgangspunkt, aber kein fertiges Produkt. Testen Sie KI-generierten Code vor dem Versand immer in echten E-Mail-Clients. KI-Tools erzeugen gelegentlich Muster, die zwar im Browser funktionieren, in Outlook aber nicht korrekt dargestellt werden, oder übermäßig komplexes Markup, das sich nicht sauber komprimieren lässt. Nutzen Sie KI, um den Prozess zu beschleunigen, und prüfen Sie das Ergebnis anschließend mit Ihrem üblichen Test-Workflow.

HTML-E-Mails vor dem Versand testen

Ganz gleich, wie sorgfältig Sie programmieren, nur Tests in echten E-Mail-Clients zeigen Ihnen, ob Ihre E-Mail tatsächlich funktioniert. Einige Ansätze:

Nutzen Sie ein Vorschau-Tool. Litmus und Email on Acid erstellen Screenshots Ihrer E-Mail in mehr als 90 E-Mail-Clients. Wenn Sie regelmäßig an eine gemischte Zielgruppe versenden, lohnt sich die Investition.

Senden Sie die E-Mail an sich selbst. Bevor eine Kampagne verschickt wird, senden Sie eine Test-E-Mail an Ihr eigenes Postfach und prüfen Sie sie mindestens in Gmail, Apple Mail und Outlook. Diese drei decken die Mehrheit Ihrer Abonnenten ab.

Prüfen Sie die Darstellung auf Mobilgeräten. Öffnen Sie die Test-E-Mail auf Ihrem Smartphone. Prüfen Sie Schriftgrößen, die Tippflächen von Buttons und ob zweispaltige Layouts korrekt untereinander angeordnet werden.

Überprüfen Sie Ihre Links. Klicken Sie jeden Link in der Test-E-Mail an. Schnell bleibt eine Platzhalter-URL oder ein Tippfehler in einem UTM-Parameter unbemerkt – und solche Fehler fallen sofort auf, sobald die E-Mail verschickt ist.

Prüfen Sie die Nur-Text-Version. Falls Ihre Plattform diese automatisch erstellt, prüfen Sie, ob sie gut lesbar ist und alle wichtigen Links enthält.

Häufig gestellte Fragen

Was ist eine HTML-E-Mail und wie unterscheidet sie sich von einer Nur-Text-E-Mail?

Eine HTML-E-Mail nutzt Markup, um Layout, Schriftarten, Farben, Bilder und Buttons zu steuern – so entsteht ein gestaltetes Erlebnis im Look Ihrer Marke. Eine Nur-Text-E-Mail ist genau das, was der Name verspricht: keine Formatierung, nur Text. Die meisten Marketing-E-Mails sind HTML-E-Mails, doch zu jeder HTML-Kampagne sollte aus Gründen der Zustellbarkeit und Barrierefreiheit auch eine Nur-Text-Alternative gehören.

Muss ich programmieren können, um eine HTML-E-Mail zu versenden?

Nein. Drag-and-Drop-E-Mail-Editoren wie Benchmark Email erzeugen im Hintergrund sauberen HTML-Code. Wenn Sie bereits eine HTML-Vorlage haben, die Sie verwenden möchten, können Sie sie mit dem HTML-Editor von Benchmark Email einfach einfügen und direkt versenden, ohne selbst programmieren zu müssen.

Warum muss ich in HTML-E-Mails Tabellen anstelle von modernem CSS verwenden?

E-Mail-Clients, insbesondere Outlook unter Windows, nutzen ältere Rendering-Engines, die CSS Grid, Flexbox und viele moderne Layout-Eigenschaften nicht unterstützen. Tabellen sind seit über einem Jahrzehnt die zuverlässige Ausweichlösung für E-Mail-Layouts und liefern bis heute die einheitlichsten Ergebnisse in allen Clients.

Wie gestalte ich meine HTML-E-Mail responsiv?

Verwenden Sie ein flexibles Layout mit prozentualen Breiten für innere Elemente, legen Sie die maximale Breite auf 600 px fest und fügen Sie im Abschnitt <head> Media Queries für mobilspezifische Anpassungen hinzu, etwa um Spalten untereinander anzuordnen und Schriften zu vergrößern. Stellen Sie außerdem sicher, dass Bilder mit max-width: 100%; height: auto; skaliert werden, damit sie auf kleinen Bildschirmen nicht über den Rand hinausragen.

Wie groß darf eine HTML-E-Mail maximal sein?

Halten Sie Ihre HTML-Datei unter 100 KB. Gmail kürzt E-Mails, die diese Grenze überschreiten, und blendet Inhalte hinter dem Link „Gesamte Nachricht anzeigen“ aus. Hosten Sie Bilder extern, statt sie als Base64 einzubetten, und halten Sie Ihren Code sauber und frei von unnötigen Kommentaren oder Leerzeichen.

Kann ich meine eigene HTML-Vorlage in Benchmark Email verwenden?

Ja. Der HTML-Editor von Benchmark Email ist genau dafür gemacht. Kopieren Sie Ihren HTML-Code, fügen Sie ihn in den Editor ein, prüfen Sie die Vorschau und versenden Sie die E-Mail. So nutzen Sie alle Versand- und Reporting-Funktionen von Benchmark Email mit Ihrem eigenen, individuellen Design.