# 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:

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

#### Nummerierte Liste mit Text

ol>li{Element $}*5

Ergebnis:

<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:

<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:

<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:

<a href=""></a>

#### Mehrere Links mit Klassen

a.link*3

Ergebnis:

<a href="" class="link"></a>
<a href="" class="link"></a>
<a href="" class="link"></a>

#### Links mit unterschiedlichen Klassen

a.link$*3

Ergebnis:

<a href="" class="link1"></a>
<a href="" class="link2"></a>
<a href="" class="link3"></a>

#### Links mit Text

a{Link $}*3

Ergebnis:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<div id="container" class="wrapper content"></div>

### Attribute

a[href="https://example.com" target="_blank" rel="noopener"]

Ergebnis:

<a href="https://example.com" target="_blank" rel="noopener"></a>

### Input-Elemente

input:email

Ergebnis:

<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:

<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:

<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:

<!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!