Emmet - szybkie pisanie HTML

W Starożytnym Egipcie skrybowie używali skróconych hieroglifów, żeby pisać szybciej. W świecie web developmentu mamy coś podobnego - Emmet! To potężne narzędzie wbudowane w większość edytorów kodu (VS Code, WebStorm, Sandpack), które pozwala generować kod HTML i CSS za pomocą krótkich skrótów.

Podstawowe skróty HTML

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>

Operator potomka (>)

Użyj znaku

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>

Operator brata (+)

Znak

tworzy elementy na tym samym poziomie:

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

Mnozenie (*)

Gwiazdka

powtarza element:

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>

Klasy (.) i ID (#)

Dodawaj klasy i ID jak w CSS:

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>

Tekst ({})

Nawiasy klamrowe dodają tekst wewnątrz elementu:

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>

Numeracja ($)

Znak dolara generuje numery:

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>

Skrot na całą stronę HTML5

Najwazniejszy skrót Emmet - generuje kompletny szkielet HTML:

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>

Vai a CodeWorlds→