---
# System prepended metadata

title: 'HTML-Schnellkurs: Emmet-Shortcuts und Effizienter Markup-Aufbau'

---

# HTML-Schnellkurs: Emmet-Shortcuts und Effizienter Markup-Aufbau

## Einführung zu Emmet

Emmet ist ein leistungsstarkes Tool, das in den meisten modernen Code-Editoren integriert ist (VS Code, Sublime Text, Atom usw.) und dir erlaubt, HTML und CSS mit minimaler Tipparbeit zu schreiben.

## Grundlegende Emmet-Syntax

Emmet verwendet eine CSS-ähnliche Abkürzungssyntax, die in HTML-Code umgewandelt wird.

### Grundlegende Operatoren

| Operator | Beschreibung | Beispiel | Ergebnis |
|----------|--------------|----------|----------|
| `>` | Kind-Element | `div>p` | `<div><p></p></div>` |
| `+` | Geschwister-Element | `div+p` | `<div></div><p></p>` |
| `^` | Eine Ebene nach oben | `div>p^span` | `<div><p></p></div><span></span>` |
| `*` | Multiplizieren | `ul>li*3` | `<ul><li></li><li></li><li></li></ul>` |
| `()` | Gruppieren | `div>(header>ul>li*2)+footer` | Verschachteltes Ergebnis |
| `{}` | Text-Inhalt | `p{Hallo}` | `<p>Hallo</p>` |
| `$` | Nummerierung | `ul>li.item$*3` | `<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>` |
| `@` | Nummerierungsoptionen | `ul>li.item$@3*3` | Nummerierung startet bei 3 |

## Praktische Beispiele

### 1. Listen erstellen

#### Ungeordnete Liste mit 5 Elementen
```
ul>li*5
```
Ergebnis:
```html
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

#### Nummerierte Liste mit Text
```
ol>li{Element $}*5
```
Ergebnis:
```html
<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>
</ol>
```

### 2. Tabellen erstellen

#### Einfache Tabelle (3x3)
```
table>tr*3>td*3
```
Ergebnis:
```html
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
```

#### Komplexe Tabelle mit Header
```
table>thead>tr>th*3^^tbody>tr*3>td*3
```
Ergebnis:
```html
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
```

### 3. Links erstellen

#### Einzelner Link
```
a
```
Ergebnis:
```html
<a href=""></a>
```

#### Mehrere Links mit Klassen
```
a.link*3
```
Ergebnis:
```html
<a href="" class="link"></a>
<a href="" class="link"></a>
<a href="" class="link"></a>
```

#### Links mit unterschiedlichen Klassen
```
a.link$*3
```
Ergebnis:
```html
<a href="" class="link1"></a>
<a href="" class="link2"></a>
<a href="" class="link3"></a>
```

#### Links mit Text
```
a{Link $}*3
```
Ergebnis:
```html
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
```

### 4. Formulare erstellen

#### Einfaches Kontaktformular
```
form>input:text+input:email+textarea+button:submit
```
Ergebnis:
```html
<form action="">
    <input type="text" name="" id="">
    <input type="email" name="" id="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button type="submit"></button>
</form>
```

#### Formular mit Labels
```
form>(div>label+input:text)*2+(div>label+textarea)+(div>button:submit{Absenden})
```
Ergebnis:
```html
<form action="">
    <div>
        <label for=""></label>
        <input type="text" name="" id="">
    </div>
    <div>
        <label for=""></label>
        <input type="text" name="" id="">
    </div>
    <div>
        <label for=""></label>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div>
        <button type="submit">Absenden</button>
    </div>
</form>
```

### 5. Div-Container und Layout-Strukturen

#### Einfaches Grid-Layout
```
.container>.row*3>.col*3
```
Ergebnis:
```html
<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>
```

#### Header, Main, Footer Layout
```
header+main>section*3+aside^footer
```
Ergebnis:
```html
<header></header>
<main>
    <section></section>
    <section></section>
    <section></section>
    <aside></aside>
</main>
<footer></footer>
```

### 6. Komplexe Strukturen

#### Navigationsmenü
```
nav>ul>li*5>a{Menüpunkt $}
```
Ergebnis:
```html
<nav>
    <ul>
        <li><a href="">Menüpunkt 1</a></li>
        <li><a href="">Menüpunkt 2</a></li>
        <li><a href="">Menüpunkt 3</a></li>
        <li><a href="">Menüpunkt 4</a></li>
        <li><a href="">Menüpunkt 5</a></li>
    </ul>
</nav>
```

#### Artikel mit Kommentarbereich
```
article>h2{Artikeltitel}+p*3>lorem^section.comments>h3{Kommentare}+ul.comment-list>li.comment*3>div.comment-header>h4{Nutzer $}+span.date{01.01.202$}^^p>lorem
```
Ergebnis:
```html
<article>
    <h2>Artikeltitel</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <section class="comments">
        <h3>Kommentare</h3>
        <ul class="comment-list">
            <li class="comment">
                <div class="comment-header">
                    <h4>Nutzer 1</h4>
                    <span class="date">01.01.2021</span>
                </div>
                <p>Lorem ipsum dolor sit amet...</p>
            </li>
            <li class="comment">
                <div class="comment-header">
                    <h4>Nutzer 2</h4>
                    <span class="date">01.01.2022</span>
                </div>
                <p>Lorem ipsum dolor sit amet...</p>
            </li>
            <li class="comment">
                <div class="comment-header">
                    <h4>Nutzer 3</h4>
                    <span class="date">01.01.2023</span>
                </div>
                <p>Lorem ipsum dolor sit amet...</p>
            </li>
        </ul>
    </section>
</article>
```

## Spezielle Emmet-Kürzel

### ID und Klassen

```
div#container.wrapper.content
```
Ergebnis:
```html
<div id="container" class="wrapper content"></div>
```

### Attribute

```
a[href="https://example.com" target="_blank" rel="noopener"]
```
Ergebnis:
```html
<a href="https://example.com" target="_blank" rel="noopener"></a>
```

### Input-Elemente

```
input:email
```
Ergebnis:
```html
<input type="email" name="" id="">
```

Weitere Beispiele:
- `input:text`
- `input:password`
- `input:checkbox`
- `input:radio`
- `input:submit`
- `input:reset`
- `input:hidden`
- `input:file`

### Lorem Ipsum Generator

```
p>lorem
```
Ergebnis:
```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
```

Du kannst auch die Anzahl der Wörter angeben:
```
p>lorem10
```
Ergebnis:
```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quis.</p>
```

## HTML5-Doctype und Grundgerüst

Um ein komplettes HTML5-Dokument zu erstellen:

```
!
```
oder
```
html:5
```

Ergebnis:
```html
<!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>
```

## Tastenkombinationen in VS Code

Neben Emmet bietet VS Code weitere nützliche Shortcuts für die HTML-Entwicklung:

- `Strg+/` - Zeile kommentieren/auskommentieren
- `Alt+Shift+F` - Dokument formatieren
- `Strg+D` - Nächstes Vorkommen des ausgewählten Textes auswählen
- `Strg+Shift+L` - Alle Vorkommen des ausgewählten Textes auswählen
- `Alt+Klick` - Mehrere Cursors an Klickposition
- `Alt+Shift+I` - Cursor am Ende jeder ausgewählten Zeile
- `Alt+Pfeil hoch/runter` - Zeile nach oben/unten verschieben
- `Alt+Shift+Pfeil hoch/runter` - Zeile kopieren und nach oben/unten verschieben

## Praxisübungen

### Übung 1: Erstelle eine Produkt-Listenansicht
```
section.products>h2{Unsere Produkte}+ul.product-list>li.product*5>img[src="product$.jpg"]+h3{Produkt $}+p.price{€ 99,99}+button{In den Warenkorb}
```

### Übung 2: Erstelle ein Login-Formular
```
form.login-form>h2{Login}+div.form-group*2>label+input^div.form-actions>button:submit{Anmelden}+a{Passwort vergessen?}
```

### Übung 3: Erstelle eine Tabelle mit Kundendaten
```
table.customers>thead>tr>th{ID}+th{Name}+th{Email}+th{Status}^^tbody>tr*5>td{$}+td{Kunde $}+td{kunde$@gmail.com}+td>{Aktiv}
```

## Tipps für den Alltag

1. **Speichere häufig verwendete Snippets**: Erstelle benutzerdefinierte Snippets in VS Code für Code-Strukturen, die du häufig verwendest.

2. **Lerne die am häufigsten verwendeten Emmet-Kürzel**: Konzentriere dich zunächst auf die grundlegenden Operatoren (`>`, `+`, `*`, `^`), und erweitere dann dein Repertoire.

3. **Benutze lorem für Platzhaltertext**: `p>lorem` generiert einen Absatz mit Platzhaltertext, sehr praktisch für das Layout.

4. **Verschachtelung beachten**: Bei komplexen Verschachtelungen helfen die Operatoren `(` und `)`, um Gruppen zu bilden, und `^`, um eine Ebene nach oben zu gehen.

5. **Nutze Tastenkombinationen effizient**: Kombiniere Emmet mit anderen Editor-Shortcuts für maximale Effizienz.

## Fazit

Mit Emmet kannst du HTML und CSS deutlich schneller und effizienter schreiben. Die Lernkurve mag am Anfang etwas steil sein, aber die Zeitersparnis ist die Mühe wert. Beginne mit einfachen Abkürzungen und erweitere dein Wissen nach und nach.

Happy Coding!