Emmet - szybkie pisanie HTML

Lista nawigacji z pięcioma linkami to ponad sto znaków do wpisania: nawiasy ostre, ukośniki, cudzysłowy i w kółko te same nazwy znaczników. Po trzeciej takiej liście zaczynasz robić literówki, a zamiast budować stronę, przepisujesz szablony. W Starożytnym Egipcie skrybowie piszący na papirusie zamiast pełnych hieroglifów używali pisma hieratycznego - uproszczonej, szybkiej formy tych samych znaków. W świecie web developmentu mamy coś podobnego - Emmet! To potężne narzędzie wbudowane w popularne edytory kodu, takie jak VS Code i WebStorm (do innych edytorów dostępne jako wtyczka), które pozwala generować kod HTML i CSS za pomocą krótkich skrótów.

Uwaga: edytor na platformie CodeWorlds nie rozwija skrótów Emmet - Tab wstawia w nim wcięcie. W ćwiczeniach traktuj skrót jak plan budowy i wpisz rozwinięty kod, a samo rozwijanie wypróbuj w VS Code.

Podstawowe skróty HTML

Najprostszy skrót to sama nazwa znacznika. Zamiast pisać cały znacznik ręcznie, wystarczy wpisać skrót i nacisnąć Tab:

1<!-- Wpisz: h1 + Tab -->
2<h1></h1>
3
4<!-- Wpisz: p + Tab -->
5<p></p>
6
7<!-- Wpisz: div + Tab -->
8<div></div>

Emmet dopisał nawiasy i znacznik zamykający, a kursor ustawił w środku, więc od razu możesz pisać treść. Nazwa musi być poprawna: z hh1 Emmet posłusznie zrobi nieistniejący element <hh1>.

Operator potomka (>)

Znak > działa jak zejście piętro niżej w piramidzie: kolejny element trafia do środka poprzedniego. Użyj go, aby tworzyć elementy zagnieżdżone:

1<!-- Wpisz: nav>ul>li + Tab -->
2<nav>
3  <ul>
4    <li></li>
5  </ul>
6</nav>
7
8<!-- Wpisz: div>h1+p + Tab -->
9<div>
10  <h1></h1>
11  <p></p>
12</div>

W drugim skrócie widać już dwa operatory naraz: > wchodzi do <div>, a + dokłada <p> obok <h1>. Emmet czyta skrót od lewej do prawej, krok po kroku.

Operator brata (+)

Znak + tworzy elementy na tym samym poziomie - to rodzeństwo, które stoi obok siebie, a nie jedno w drugim. Tak zbudujesz szkielet strony jednym ruchem:

1<!-- Wpisz: header+main+footer + Tab -->
2<header></header>
3<main></main>
4<footer></footer>

Trzy semantyczne sekcje powstały obok siebie i żadna nie jest zagnieżdżona w innej. Emmet ma też operator ^, który wraca poziom wyżej, oraz nawiasy do grupowania - przydadzą się, gdy podstawy wejdą Ci w krew.

Mnożenie (*)

Gwiazdka * z liczbą powtarza element tyle razy, ile chcesz - koniec z kopiowaniem pięciu identycznych linijek:

1<!-- Wpisz: ul>li*5 + Tab -->
2<ul>
3  <li></li>
4  <li></li>
5  <li></li>
6  <li></li>
7  <li></li>
8</ul>

Mnożenie dotyczy elementu tuż przed gwiazdką razem ze wszystkim, co zagnieździsz w nim dalej. Dlatego nav>ul>li*3>a da jedną nawigację, jedną listę i trzy elementy li, z których każdy ma własny link a.

Klasy (.) i ID (#)

Klasy i identyfikatory dodajesz tymi samymi znakami co w selektorach CSS - kropka oznacza klasę, a krzyżyk id:

1<!-- Wpisz: div.container + Tab -->
2<div class="container"></div>
3
4<!-- Wpisz: h1#title + Tab -->
5<h1 id="title"></h1>
6
7<!-- Wpisz: ul.menu>li.item*3>a + Tab -->
8<ul class="menu">
9  <li class="item"><a href=""></a></li>
10  <li class="item"><a href=""></a></li>
11  <li class="item"><a href=""></a></li>
12</ul>

Kartę wystawy zapiszesz więc jako div.card. Jeśli pominiesz nazwę znacznika i napiszesz samo .card, Emmet też utworzy <div class="card">. Ostatni skrót łączy klasę, mnożenie i zagnieżdżenie, a link dostał pusty href, gotowy do uzupełnienia.

Tekst ({})

Nawiasy klamrowe dodają tekst wewnątrz elementu, więc od razu dostajesz gotowy nagłówek albo link z treścią:

1<!-- Wpisz: h1{Witaj w Egipcie!} + Tab -->
2<h1>Witaj w Egipcie!</h1>
3
4<!-- Wpisz: a{Kliknij tutaj} + Tab -->
5<a href="">Kliknij tutaj</a>

Tekst z klamer trafia dokładnie między znacznik otwierający i zamykający. Przy a Emmet znowu dodał pusty href - adres wpiszesz sam.

Numeracja ($)

Znak dolara w połączeniu z mnożeniem generuje kolejne numery - zarówno w nazwie klasy, jak i w tekście:

1<!-- Wpisz: ul>li.item${Element $}*3 + Tab -->
2<ul>
3  <li class="item1">Element 1</li>
4  <li class="item2">Element 2</li>
5  <li class="item3">Element 3</li>
6</ul>

Każdy $ zamienia się na numer kopii: 1, 2, 3. Dwa dolary z rzędu dadzą numery z zerem na początku: 01, 02, 03.

Skrót na całą stronę HTML5

Najważniejszy skrót Emmet to wykrzyknik - generuje kompletny szkielet HTML5, który w poprzednich modułach pisałeś ręcznie:

1<!-- Wpisz: ! + Tab -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8</head>
9<body>
10
11</body>
12</html>

Emmet wstawia domyślnie lang="en" i tytuł "Document" - na polskiej stronie od razu zmień je na lang="pl" i prawdziwy tytuł. W VS Code możesz ustawić język na stałe w ustawieniu emmet.variables, dodając wartość "lang": "pl", i to polecam: konfigurujesz raz, a każda nowa strona zaczyna się poprawnie.

Moja rada: nie ucz się wszystkich operatorów naraz. Zacznij od !, > i * - te trzy pokrywają większość codziennej pracy. W kolejnej lekcji sprawdzisz walidatorem, czy kod, który tak szybko powstał, jest poprawny.

Praktyka

W edytorze poniżej zobaczysz skróty Emmet obok kodu, który z nich powstaje. Spróbuj przewidzieć wynik, zanim spojrzysz na kod:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Emmet - Szybkie pisanie HTML</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Emmet w praktyce</h1>
11
12    <section>
13        <h2>Skroty Emmet - wyniki</h2>
14
15        <article>
16            <h3>Skrot: nav>ul>li*3>a{Link $}</h3>
17            <nav>
18                <ul>
19                    <li><a href="">Link 1</a></li>
20                    <li><a href="">Link 2</a></li>
21                    <li><a href="">Link 3</a></li>
22                </ul>
23            </nav>
24        </article>
25
26        <article>
27            <h3>Skrot: header+main+footer</h3>
28            <div class="demo-layout">
29                <header class="demo">HEADER</header>
30                <main class="demo">MAIN</main>
31                <footer class="demo">FOOTER</footer>
32            </div>
33        </article>
34
35        <article>
36            <h3>Skrot: ul.menu>li.item${Element $}*4</h3>
37            <ul class="menu">
38                <li class="item1">Element 1</li>
39                <li class="item2">Element 2</li>
40                <li class="item3">Element 3</li>
41                <li class="item4">Element 4</li>
42            </ul>
43        </article>
44
45        <article>
46            <h3>Skrot: div.card>h3{Tytul}+p{Opis}+a.btn{Czytaj wiecej}</h3>
47            <div class="card">
48                <h3>Tytul</h3>
49                <p>Opis</p>
50                <a class="btn" href="">Czytaj wiecej</a>
51            </div>
52        </article>
53    </section>
54</body>
55</html>

Pamiętaj: Emmet to pismo hieratyczne web developera - kilka znaków skrótu zamienia się w pełne hieroglify HTML, a Ty oszczędzasz czas na to, co naprawdę ważne.