Halbe Stunde für eine einfache E-Mail. Zehn Minuten für eine Tabelle mit fünf Zeilen. Eine Stunde für eine Landingpage mit wiederholten Karten. Und das ohne Überarbeitungen, nur das Tippen von Tags, ohne einen schließenden zu vergessen, ohne die Verschachtelung durcheinanderzubringen.

Kommt Ihnen das bekannt vor? Routine tötet die Geschwindigkeit, und nach dem dreißigsten <tr><td>...</td></tr> werden die Augen glasig. Sie möchten eine Zeile schreiben, eine Taste drücken und ein fertiges DOM erhalten.

Genau das leistet Emmet. Das Plugin expandiert kurze, CSS-ähnliche Ausdrücke in Sekundenbruchteilen zu sauberem HTML. Und das Team von epixx.github.io hat die Syntax in einen interaktiven Trainer mit Live-Validierung verpackt, der eine Stunde dauert und keine Installation erfordert.

💡 Kurzüberblick:

• Was Emmet ist, woher es kommt und warum es standardmäßig in VS Code integriert ist
• Schritt-für-Schritt-Durchlauf des Epixx-Trainers: wie die Aufgaben und der eingebaute Kurs funktionieren
• Wichtige Syntax-Operatoren an einem realen Beispiel: eine dreizeilige Tabelle aus einer einzigen Abkürzung
• Ressourcen zur Vertiefung: Dokumentation, Screencasts und ein Spickzettel

Was Emmet ist und warum es immer noch relevant ist

Emmet ist ein Code-Editor-Plugin, das Abkürzungen in vollständiges HTML oder CSS umwandelt. Sie tippen ul>li*5>a, drücken Tab und erhalten eine Aufzählungsliste mit fünf Elementen und Links. Kein Kopieren und Einfügen, kein manuelles Schreiben jedes Tags.

Das Projekt startete 2008 als Zen Coding (Autor: Sergey Chikuyonok), wurde später in Emmet umbenannt und ist heute der Standard für schnelles Markup. Seit 2022 ist das Plugin standardmäßig in VS Code integriert: Sie öffnen den Editor und legen sofort los, keine Installation nötig. Es ist auch für Sublime Text, WebStorm, PHPStorm und andere Editoren über den Marketplace auf der Emmet-Website verfügbar.

Der Hauptvorteil gegenüber klassischen Snippets ist die dynamische Expansion. Ein Snippet ist fest codiert und ändert sich nicht on the fly. Ein Emmet-Ausdruck kann erweitert, umstrukturiert oder um bestehenden Code herumgewickelt werden. Die Abkürzung table>tr*3>td>img+p+a liefert unterschiedliche Ergebnisse, wenn Sie den Multiplikator *3 auf *5 ändern oder eine Klasse .footer-row hinzufügen, alles in einer Zeile, ohne Vorlagen neu definieren zu müssen.

Emmet kann außerdem:

• schnell zwischen Knoten springen (Go to Edit Point);
• ausgewählten Code mit einem neuen Tag umschließen (Wrap with Abbreviation);
• die Auswahl ausbalancieren und sie auf das übergeordnete oder untergeordnete Tag erweitern oder eingrenzen;
• „Lorem Ipsum" beliebiger Länge generieren;
• Zahlen in sich wiederholenden Elementen mit $ hochzählen.

Der Epixx-Trainer: Praxis statt Vorträge

Der Epixx-Trainer ist ein Webkurs, der Sie von null zur sicheren Beherrschung der Syntax führt. Keine Installation: Sie öffnen die Seite im Browser und beginnen sofort mit den Aufgaben.

Die Mechanik ist einfach. Links sehen Sie die Theorie und ein Beispielergebnis. Rechts befindet sich ein Eingabefeld für einen Emmet-Ausdruck. Sie schreiben die Abkürzung, klicken auf „Check" und sehen das generierte HTML. Stimmt es mit dem Beispiel überein, gehen Sie zur nächsten Aufgabe über. Wenn nicht, versuchen Sie es erneut, bis es passt.

Der Kurs ist in logische Blöcke unterteilt:

• Grundelemente und Verschachtelung;
• Multiplikations- und Nummerierungsoperatoren;
• Klassen, IDs und Attribute;
• Textknoten und „Lorem Ipsum";
• Aufstieg um eine Ebene (^) und Gruppierung.

Jede Aufgabe liefert genau so viel Theorie, wie zu ihrer Bewältigung nötig ist. Das ist kein Vortrag, das ist ein Fitnessstudio: Sie lesen das Minimum, Sie schreiben das Maximum. Fehler werden nicht bestraft; Sie geben einfach einen neuen Ausdruck ein und sehen sofort, was sich geändert hat.

Halten Sie während der Nutzung des Trainers einen Editor mit Emmet-Unterstützung (VS Code, Sublime) geöffnet und wiederholen Sie die Techniken an einer echten HTML-Datei. Das Muskelgedächtnis setzt schneller ein, wenn Ihre Finger die Abkürzungen speichern, nicht nur Ihre Augen.

Emmet-Syntax: vom Einfachen zum Komplexen

Lassen Sie uns die wichtigsten Operatoren anhand einer konkreten Aufgabe durchgehen. Sie benötigen eine Tabelle mit drei Zeilen, wobei jede Zelle ein Bild, einen Absatz und einen Link enthält.

Statt jeden Tag manuell zu tippen und Zeilen dreimal zu kopieren, schreiben Sie eine Zeile:

1
table>tr*3>td>img+p+a

Nach dem Drücken von Tab (oder Strg+E, je nach Editor) expandiert Emmet dies zu einer fertigen Struktur:

1
<table>
2
  <tr>
3
    <td>
4
      <img src="" alt="" />
5
      <p></p>
6
      <a href=""></a>
7
    </td>
8
  </tr>
9
  <tr>
10
    <td>
11
      <img src="" alt="" />
12
      <p></p>
13
      <a href=""></a>
14
    </td>
15
  </tr>
16
  <tr>
17
    <td>
18
      <img src="" alt="" />
19
      <p></p>
20
      <a href=""></a>
21
    </td>
22
  </tr>
23
</table>

Nun zu den Operatoren:

• > steht für ein Kindelement. table>tr bedeutet „tr innerhalb von table".
• *N ist die Multiplikation. tr*3 erzeugt drei Zeilen.
• + steht für ein Geschwisterelement auf derselben Ebene. img+p+a erstellt drei Elemente in einer Reihe innerhalb eines Elternelements.
• ^ klettert eine Ebene nach oben. Das hilft, wenn Sie aus einer tiefen Verschachtelung herausspringen müssen, ohne einen neuen Ausdruck zu beginnen.
• $ ist die automatische Inkrementierung. li.item$*3 ergibt <li class="item1"> und so weiter bis item3.

Für Attribute verwenden Sie eckige Klammern. Eine Tabelle mit cellpadding und cellspacing schreibt man so:

1
table[cellpadding=0 cellspacing=0]>tr*3>td

Ein Textknoten verwendet geschweifte Klammern: a{Click here} expandiert zu <a href="">Click here</a>. Für die schnelle Erzeugung von Platzhaltertext genügt das Wort lorem, und Emmet gibt einen Füllabsatz aus. lorem10 liefert exakt 10 Wörter.

Viele Entwickler nutzen Emmet nicht nur für das anfängliche Markup, sondern auch zum Umhüllen von bestehendem Code: Einen Block auswählen, den Befehl „Mit Abkürzung umschließen" ausführen, ein Umschließungs-Tag eingeben. Fertig, ohne das schließende Tag manuell zu verschieben.

Wo Sie mehr lernen: vertrauenswürdige Ressourcen

Nach Abschluss des Epixx-Trainers sollten Sie die Fertigkeit an realen Aufgaben festigen und Techniken von erfahrenen Entwicklern lernen. Hier eine Sammlung von Materialien, von der offiziellen Dokumentation bis zu Screencasts.

• Offizielle Emmet-Dokumentation: die vollständige Referenz für Syntax, Aktionen und Konfiguration. Beginnen Sie hier, wenn Sie eine präzise Antwort zu einem bestimmten Operator oder Filter benötigen.
• CSS-Tricks-Screencast: „Emmet is Awesome": ein kurzes Video mit Echtzeit-Techniken von einer der maßgeblichsten Quellen in der Frontend-Community.
• Smashing Magazine: Goodbye Zen Coding, Hello Emmet: ein historischer Artikel über den Übergang von Zen Coding zu Emmet. Nützlich, um die Philosophie des Werkzeugs zu verstehen.
• Atomic Object: Easy HTML with Emmet: eine praktische Einführung mit Fokus auf den täglichen Gebrauch statt auf eine Syntax-Referenz.

Und für eine schnelle Syntax-Auffrischung vor der Arbeit halten Sie den Emmet-Spickzettel griffbereit: alle Operatoren auf einen Blick.

Video: Emmet in 15 Minuten

Wenn das Textformat nicht Ihr Ding ist, sehen Sie sich den Screencast von Web Dev Simplified an. Kyle demonstriert den Workflow mit realen Beispielen: von einfachen Tags bis zu komplexer Verschachtelung mit Klassen und Textknoten.

⁉️🤔 Häufig gestellte Fragen

Muss ich Emmet separat installieren?

In VS Code nicht. Seit 2022 ist Emmet in der Standarddistribution des Editors enthalten und funktioniert direkt nach dem Start. Für Sublime Text, WebStorm, PHPStorm und andere Editoren installieren Sie das Plugin aus dem Marketplace, dem „Download"-Bereich auf der offiziellen Website. VS Code verwendet die Emmet-2.0-Syntax, die bei Leerzeichen in Ausdrücken etwas strenger ist. Wenn eine Abkürzung nicht expandiert wird, stellen Sie sicher, dass die Datei als HTML gespeichert ist, nicht als reiner Text.

Kann ich Emmet für CSS verwenden?

Ja. Abkürzungen wie m20 expandieren zu margin: 20px;, und bdrs5 expandiert zu border-radius: 5px;. Emmet generiert auch Herstellerpräfixe (-webkit-, -moz-) und Farbverläufe. Die vollständige Liste der Abkürzungen finden Sie im Abschnitt „CSS Abbreviations" der offiziellen Dokumentation.

Wie unterscheidet sich Emmet von gewöhnlichen Snippets?

Ein Snippet ist eine starre Vorlage: Was Sie codiert haben, bekommen Sie. Ein Emmet-Ausdruck ist dynamisch: Sie ändern den Multiplikator, fügen eine Klasse hinzu, umschließen ihn mit einem weiteren Tag, und das Ergebnis wird in Echtzeit neu aufgebaut. Ein Snippet für table>tr*3>td liefert Ihnen kein table>tr*7>td, ohne eine neue Vorlage zu erstellen, Emmet hingegen schon, indem Sie einfach eine Ziffer ändern.

Warum den Epixx-Trainer nutzen, wenn es eine Dokumentation gibt?

Die Dokumentation erklärt das „Was", der Trainer übt das „Wie". Nach Abschluss des Kurses tippen Ihre Finger automatisch ul>li.item$*5>a{Item $}, ohne zur Maus zu greifen. Der Unterschied ist wie der zwischen einem Fahrschulbuch und Stunden hinter dem Lenkrad: Theorie ist nützlich, aber nur Praxis schafft Können.

Funktioniert Emmet mit JSX und Templates?

Ja. VS Code unterstützt Emmet in JSX-Dateien; aktivieren Sie die Option emmet.includeLanguages und ordnen Sie javascriptreact dem Wert html zu. Ähnliche Einstellungen gibt es für Vue und Angular. Klassen mit Punkten und IDs mit Rautezeichen funktionieren wie gewohnt.

Gibt es 2026 Alternativen zu Emmet?

Es gibt keine direkten Alternativen mit demselben Ansatz „kurze Zeichenkette zu fertiger Struktur". KI-Tools wie Copilot und ChatGPT generieren Code aus Beschreibungen, erfordern aber die Formulierung eines Prompts und die Überprüfung des Ergebnisses. Emmet ist für routinemäßiges Markup schneller: vier Tastenanschläge, und Sie haben eine fertige Struktur aus zehn verschachtelten Tags mit Klassen und Attributen. Diese Werkzeuge konkurrieren nicht, sie ergänzen sich.

In einer Stunde lernen, in einer Woche auszahlen

Emmet erfordert kein tiefgehendes Studium. Den Epixx-Trainer vollständig zu absolvieren, dauert zwischen dreißig Minuten und einer Stunde. Legen Sie den Spickzettel auf Ihren zweiten Monitor und probieren Sie jeden Ausdruck in einem echten Projekt aus. Nach ein paar Tagen werden Sie nicht mehr bemerken, dass Sie Emmet verwenden; es wird zu einer Erweiterung Ihrer Tastatur.

Wenn Sie HTML-E-Mails, Landingpages oder Interface-Komponenten erstellen, macht sich eine Stunde Lernen bereits am Ende der ersten Woche bezahlt. Und der Epixx-Trainer macht diese Stunde so ergiebig wie möglich. Öffnen Sie epixx.github.io/emmet und probieren Sie die erste Aufgabe gleich jetzt aus: keine Installation nötig, Ergebnisse sofort sichtbar.