Emmet – Schnellstart-Guide für Junior HTML-Entwickler

HTML & Werkzeuge. Februar 25, 2026

HTML tippen ist repetitiv. Hunderte von Tags, schliessende Tags vergessen, Attribute abtippen – das kostet Zeit und Nerven. Emmet löst dieses Problem elegant: Du tippst kurze Abkürzungen, drückst Tab, und bekommst fertiges HTML. Dieser Guide zeigt dir alles, was du brauchst, um sofort produktiver zu werden.

1. Was ist Emmet – und warum lohnt es sich?

Stell dir vor, du willst ein ungeordnetes Listenmenü mit fünf Einträgen schreiben. Ohne Hilfe tippst du ul, dann fünfmal li öffnen, Inhalt, li schliessen – und das ist noch eine der einfacheren Strukturen.

Emmet macht daraus: ul>li*5 + Tab. Fertig.

Emmet ist ein Werkzeug, das Abkürzungen in volles HTML (oder CSS) expandiert. Es wurde von Sergey Chikuyonok entwickelt und ist heute in VS Code standardmässig eingebaut – du musst nichts installieren.

Wo läuft Emmet? VS Code (eingebaut), WebStorm, Sublime Text, Brackets und weitere Editoren. In VS Code ist keine Konfiguration nötig – einfach eine .html-Datei öffnen und loslegen.

Das erste Aha-Erlebnis

Öffne eine leere .html-Datei in VS Code, tippe ein einzelnes Ausrufezeichen und drück Tab:

Eingabe

!

Ergebnis nach Tab

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title>
</head>
<body> </body> 
</html>

Ein Zeichen, ein Tastendruck, ein vollständiges HTML-Grundgerüst. Das ist Emmet.

2. Das Grundprinzip verstehen

Emmet-Syntax ist bewusst an CSS-Selektoren angelehnt. Wenn du weisst, wie man CSS-Selektoren schreibt, hast du die halbe Emmet-Logik bereits im Kopf. Das erleichtert den Einstieg enorm.

Das Prinzip ist immer gleich:

  1. Abkürzung tippen (kein Leerzeichen!)
  2. Tab drücken
  3. Fertiges HTML erscheint – der Cursor steht bereits an der richtigen Stelle

⚠️ Wichtig: Emmet reagiert auf Leerzeichen. Sobald du ein Leerzeichen in deine Abkürzung tippst, erkennt VS Code sie nicht mehr als Emmet-Kürzel. Abkürzungen immer ohne Unterbruch schreiben.

3. Die 5 wichtigsten Emmet-Bausteine

Mit diesen fünf Bausteinen deckst du den grössten Teil deines täglichen HTML-Schreibens ab. Lern sie, üb sie, und du wirst nie wieder zurückwollen.

3.1 Einzelne Elemente

Der einfachste Fall: Ein Tag-Name als Kürzel ergibt das entsprechende HTML-Element mit öffnendem und schliessendem Tag, Cursor dazwischen.

div → <div></div> p → <p></p> h1 → <h1></h1> span → <span></span> section → <section></section>

3.2 Verschachteln mit >

Das Kleiner-als-Zeichen (>) bedeutet: das nächste Element wird Kind des vorherigen. Genau wie in CSS-Selektoren.

Eingabe

nav>ul>li

Ergebnis

<nav>
<ul>
<li></li>
</ul>
</nav>

3.3 Geschwister-Elemente mit +

Das Plus-Zeichen erstellt Elemente auf derselben Ebene – Geschwister, keine Kinder. Ideal für typische Seitenstrukturen.

Eingabe

header+main+footer

Ergebnis

<header></header>
<main></main>
<footer></footer>

3.4 Mehrfach wiederholen mit *

Der Multiplikator ist einer der nützlichsten Bausteine. * gefolgt von einer Zahl wiederholt das Element entsprechend oft.

Eingabe

ul>li*5

Ergebnis

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

3.5 Klassen und IDs vergeben

Klassen werden mit einem Punkt angefügt, IDs mit einer Raute – genau wie in CSS-Selektoren. Das macht die Syntax besonders intuitiv.

div.container → <div class="container"></div> section#hero → <section id="hero"></section> p.intro.lead → <p class="intro lead"></p>

Mehrere Klassen? Einfach mehrere Punkte aneinanderhängen.

4. Attribute und Inhalte

Neben Klassen und IDs lassen sich beliebige Attribute und sogar Textinhalte direkt in der Abkürzung definieren.

Attribute mit eckigen Klammern

Attribute werden in eckige Klammern geschrieben, genau wie Attribut-Selektoren in CSS.

a[href="#"] → <a href="#"></a> input[type="email"] → <input type="email"> img[src="" alt=""] → <img src="" alt="">

Textinhalt mit geschweiften Klammern

Mit geschweiften Klammern kannst du Text direkt in das Element schreiben.

P\ wird <p>hallo Welt</p>H1\ wird <H1>Mein Titel</H1>

Nummerierung mit $

Das Dollarzeichen ist ein Zähler, der beim Wiederholen hochzählt. Besonders nützlich für Klassen oder Inhalte, die nummeriert werden sollen.

Eingabe

li.item$*3

Ergebnis

<li class="item1"></li><li class="item2"></li><li class="item3"></li>

5. Praxis-Beispiel: Ein Page-Skeleton in Sekunden

Jetzt kombinieren wir alles. Schau dir an, wie lange du ohne Emmet bräuchtest – und wie schnell es mit Emmet geht.

Ohne Emmet

Du tippst alles manuell: jeden Tag, jeden Attributnamen, jeden schliessenden Tag. Leicht 2–3 Minuten für eine einfache Seitenstruktur.

Mit Emmet

Du tippst diese eine Abkürzung:

Eingabe

header>nav>ul>li*4>a[href="#"]^+main.main-content>h1+p^+footer>p

Ergebnis nach Tab

<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<a href="#"></a>
</ul>
<main class="main-content">
<h1></h1>
<p></p>
</main>
<footer>
<p></p>
</footer>
</nav>
</header>

💡 Was ist das ^? Der Caret-Operator lässt dich eine Ebene im Baum nach oben klettern. Nach ul>li*4>a bist du tief im li drin – mit ^ gehst du zurück auf die Elternebene, um dort ein Geschwister-Element anzufügen.

6. Bonus: Emmet funktioniert auch in CSS

Die meisten kennen Emmet nur für HTML – aber es funktioniert genauso gut in CSS-Dateien. Die Abkürzungen leiten sich oft aus den Anfangsbuchstaben der Property ab.

m10 → margin: 10px; p20 → padding: 20px; df → display: flex; dg → display: grid; w100p → width: 100%; bgc → background-color: ; fz16 → font-size: 16px;

Die CSS-Kürzel sind weniger kritisch als die HTML-Kürzel, weil CSS-Properties schon kurz sind – aber für häufig verwendete Properties wie Flex und Grid können sie trotzdem Tipparbeit sparen.

7. Die häufigsten Anfängerfehler

Emmet ist einfach zu lernen, aber es gibt ein paar Stolperfallen, über die fast jeder am Anfang fällt. Hier sind die häufigsten – damit du sie nicht selbst machen musst.

Leerzeichen in der Abkürzung Sobald du ein Leerzeichen tippst, ist Emmet aus. VS Code sieht ab dem Leerzeichen eine neue Eingabe. Abkürzungen immer in einem Stück schreiben, ohne Unterbruch.

Tab zu früh oder zu spät drücken Wenn du Tab drückst bevor die Abkürzung vollständig ist, expandiert Emmet das Fragment – oft nicht das, was du wolltest. Kurz innehalten, Abkürzung zu Ende schreiben, dann Tab.

Emmet in der falschen Datei Emmet aktiviert sich nur in Dateitypen, die konfiguriert sind – also .html, .css, .jsx und ähnliche. In einer .txt-Datei passiert gar nichts.

Überkomplizierte Abkürzungen Es ist verlockend, riesige Abkürzungen zu bauen. In der Praxis ist es oft effizienter, die Struktur in 2–3 kürzeren Abkürzungen aufzubauen, als eine einzige 80-Zeichen-Abkürzung zu schreiben und zu debuggen.

8. Ressourcen & nächste Schritte

Emmet lernst du nicht durch Lesen, sondern durch Benutzen. Die beste Übung: Bau deine nächste HTML-Seite komplett mit Emmet auf. Schlag nach, wenn du nicht weiterkommst – und nach einer Woche sind die Kürzel in deinen Fingern.

Weiterführende Links

🎯 Deine Aufgabe: Öffne VS Code, erstelle eine neue index.html, tippe ! und drück Tab. Dann bau eine einfache Seite mit Header, Navigation, Main-Bereich und Footer – ausschliesslich mit Emmet-Abkürzungen. Du wirst überrascht sein, wie schnell das geht.

Marcel Heiniger – Webentwickler seit 1995. Ich zeige, wie Webentwicklung in der echten Welt funktioniert – ohne Umwege, ohne unnötige Theorie.

Tags: HTML · Emmet · VS Code · Werkzeuge