Полчаса на верстку простого листа. Десять хвилин на таблицю з п’яти рядків. Година на лендинг із картками, що повторюються. І це без правок, просто набрати теги, не пропустити закривний, не переплутати вкладеність.

Знайомо? Рутина душить швидкість, а око замилюється на третьому десятку <tr><td>...</td></tr>. Хочеться написати один рядок, натиснути кнопку й отримати готовий DOM.

Emmet робить саме це. Плагін розгортає короткі CSS-подібні вирази в чистий HTML за частку секунди. А команда epixx.github.io запакувала синтаксис в інтерактивний тренажер із живою перевіркою, проходиться за годину й не потребує встановлення.

💡 Швидкий огляд:

• Що таке Emmet, звідки взявся і чому вбудований у VS Code за замовчуванням
• Покрокове проходження тренажера Epixx: як влаштовані завдання та вбудований курс
• Ключові оператори синтаксису на реальному прикладі: таблиця з трьох рядків через одну абревіатуру
• Ресурси для поглиблення: документація, скринкасти та шпаргалка

Що таке Emmet і чому він досі в ділі

Emmet — це плагін для редакторів коду, що перетворює скорочення на повноцінний HTML або CSS. Набираєте ul>li*5>a, тиснете Tab і отримуєте маркований список із п’яти елементів із посиланнями. Жодного копіювання-вставлення, жодного ручного прописування кожного тега.

Проєкт стартував у 2008 році як Zen Coding (автор, Сергій Чикуйонок), згодом був перейменований на Emmet і на сьогодні став стандартом швидкої верстки. З 2022 року плагін вбудовано у VS Code «з коробки»: відкриваєте редактор і одразу працюєте, встановлення не потрібне. Також доступний для Sublime Text, WebStorm, PHPStorm та інших редакторів через маркетплейс на сайті Emmet.

Головна перевага перед класичними сніпетами, динамічне розкриття. Сніпет жорстко зашитий і не змінюється на льоту. Emmet-вираз можна добудувати, перебудувати, обгорнути навколо наявного коду. Абревіатура table>tr*3>td>img+p+a дасть різні результати при зміні множника *3 на *5 або при додаванні класу .footer-row, і все одним рядком, без перевизначення шаблонів.

Emmet також уміє:

• швидко перестрибувати між вузлами (Go to Edit Point);
• обгортати виділений код новим тегом (Wrap with Abbreviation);
• балансувати виділення, розширювати або звужувати його до батьківського чи дочірнього тега;
• генерувати «Lorem Ipsum» будь-якої довжини;
• інкрементувати числа в повторюваних елементах через $.

Тренажер Epixx: практика замість лекцій

Тренажер Epixx — це вебкурс, який проводить від нуля до впевненого володіння синтаксисом. Жодного встановлення: відкрили сторінку в браузері й одразу беретеся до завдань.

Механіка проста. Ліворуч з’являється теорія та зразок результату. Праворуч, поле введення для Emmet-виразу. Пишете абревіатуру, натискаєте «Перевірити» й бачите згенерований HTML. Збігся зі зразком, переходите до наступного завдання. Ні, пробуєте знову, доки не вийде.

Курс розбито на логічні блоки:

• базові елементи та вкладеність;
• оператори множення та нумерації;
• класи, ідентифікатори та атрибути;
• текстові вузли та «Lorem Ipsum»;
• підйом на рівень вище (^) і групування.

На кожне завдання дається рівно стільки теорії, скільки потрібно для його виконання. Це не лекція, а тренажерний зал: читаєте мінімум, пишете максимум. Помилка не карається, просто вводите новий вираз і одразу бачите, що змінилося.

Паралельно з тренажером тримайте відкритим редактор із підтримкою Emmet (VS Code, Sublime) і повторюйте прийоми на реальному HTML-файлі. М’язова пам’ять спрацьовує швидше, коли пальці запам’ятовують скорочення, а не тільки очі.

Синтаксис Emmet: від простого до складного

Розберемо ключові оператори на прикладі конкретної задачі. Вам потрібна таблиця з трьох рядків, у кожній комірці, зображення, абзац і посилання.

Замість того щоб вручну набирати кожен тег і тричі копіювати рядки, пишете один рядок:

1
table>tr*3>td>img+p+a

Після натискання Tab (або Ctrl+E, залежить від редактора) Emmet розгортає її в готову структуру:

1
<table>
2
  <tr>
3
    <td>
4
      <img src="" alt="" />
5
      <p></p>
6
      <a href=""></a>
7
    </td>
8
  </tr>
9
  <tr>
10
    <td>
11
      <img src="" alt="" />
12
      <p></p>
13
      <a href=""></a>
14
    </td>
15
  </tr>
16
  <tr>
17
    <td>
18
      <img src="" alt="" />
19
      <p></p>
20
      <a href=""></a>
21
    </td>
22
  </tr>
23
</table>

Тепер щодо операторів:

• >, дочірній елемент. table>tr означає «tr всередині table».
• *N, множення. tr*3 дасть три рядки.
• +, сусідній елемент того самого рівня. img+p+a, три елементи підряд усередині одного батьківського.
• ^, підйом на рівень вище. Рятує, коли треба вистрибнути з глибокої вкладеності без нового виразу.
• $, автоінкремент. li.item$*3 дасть <li class="item1"> і далі по порядку до item3.

Для атрибутів використовуйте квадратні дужки. Таблиця з cellpadding і cellspacing записується так:

1
table[cellpadding=0 cellspacing=0]>tr*3>td

Текстовий вузол, фігурні дужки: a{Нажми сюда} розгорнеться в <a href="">Нажми сюда</a>. Для швидкої генерації риби досить слова lorem, Emmet видасть абзац-заповнювач. lorem10, рівно 10 слів.

Багато верстальників застосовують Emmet не лише для стартової розмітки, а й для обгортання наявного коду: виділили блок, команда Wrap with Abbreviation, ввели тег-обгортку. Готово, без ручного перетягування закривального тега.

Де вчитися далі: перевірені ресурси

Після проходження тренажера Epixx варто закріпити навичку на реальних задачах і підгледіти прийоми в досвідчених розробників. Добірка матеріалів, від офіційної документації до скринкастів.

• Офіційна документація Emmet, повний довідник із синтаксису, дій і налаштування. З неї починайте, коли потрібна точна відповідь щодо конкретного оператора чи фільтра.
• Скринкаст CSS-Tricks: «Emmet is Awesome», коротке відео з прийомами в реальному часі від одного з найавторитетніших ресурсів фронтенд-спільноти.
• Smashing Magazine: Goodbye Zen Coding, Hello Emmet, історична стаття про перехід від Zen Coding до Emmet. Корисна для розуміння філософії інструмента.
• Atomic Object: Easy HTML with Emmet, практичний вступ з акцентом на повсякденне застосування, а не на синтаксичний довідник.

А для швидкого повторення синтаксису перед роботою тримайте під рукою шпаргалку Emmet, усі оператори на одному екрані.

Відео: Emmet за 15 хвилин

Якщо текстовий формат не ваш, подивіться скринкаст від Web Dev Simplified. Кайл показує робочий процес на реальних прикладах: від простих тегів до складної вкладеності з класами й текстовими вузлами.

⁉️🤔 Часті запитання

Чи потрібно встановлювати Emmet окремо?

У VS Code ні. З 2022 року Emmet входить до стандартного постачання редактора та працює одразу після запуску. Для Sublime Text, WebStorm, PHPStorm та інших редакторів встановіть плагін із маркетплейсу, вкладка «Download» на офіційному сайті. У VS Code використовується синтаксис Emmet 2.0, він трохи суворіший до пробілів у виразах. Якщо скорочення не розгортається, переконайтеся, що файл збережено як HTML, а не plaintext.

Чи можна використовувати Emmet для CSS?

Так. Скорочення на кшталт m20 розгорнуться в margin: 20px;, а bdrs5, у border-radius: 5px;. Emmet також генерує вендорні префікси (-webkit-, -moz-) та градієнти. Повний перелік скорочень, у розділі «CSS Abbreviations» офіційної документації.

Чим Emmet відрізняється від звичайних сніпетів?

Сніпет — це жорсткий шаблон: що зашили, те й отримали. Emmet-вираз динамічний: змінюєте множник, додаєте клас, обгортаєте іншим тегом, і результат перебудовується на льоту. Сніпет для table>tr*3>td не дасть table>tr*7>td без створення нового шаблону, а Emmet дасть миттєвою зміною однієї цифри.

Навіщо тренажер Epixx, якщо є документація?

Документація пояснює «що», а тренажер тренує «як». Після проходження курсу пальці самі набирають ul>li.item$*5>a{Пункт $} без зупинки на мишу. Різниця, як між підручником із водіння та годинами за кермом: теорія корисна, але навичку дає лише практика.

Чи працює Emmet із JSX та шаблонами?

Так. VS Code підтримує Emmet у JSX-файлах, увімкніть опцію emmet.includeLanguages і прив’яжіть javascriptreact до html. Для Vue та Angular теж є відповідні налаштування. Класи через крапку та ідентифікатори через решітку працюють як зазвичай.

Чи є альтернативи Emmet у 2026 році?

Прямих альтернатив із тим самим підходом «короткий рядок, готова структура» немає. AI-інструменти на кшталт Copilot і ChatGPT генерують код за описом, але потребують формулювання запиту та перевірки результату. Emmet швидший для рутинної розмітки: чотири натискання клавіш, і у вас готова структура з десяти вкладених тегів із класами й атрибутами. Інструменти не конкурують, а доповнюють один одного.

Освоїти за годину, окупити за тиждень

Emmet не потребує глибокого вивчення. Повне проходження тренажера Epixx займає від тридцяти хвилин до години. Повісьте шпаргалку на другий монітор і пробуйте кожен вираз у реальному проєкті. За кілька днів ви перестанете помічати, що користуєтеся Emmet,, він стане продовженням клавіатури.

Якщо ви верстаєте HTML-листи, лендинги або компоненти інтерфейсів, година навчання окупиться вже до кінця першого тижня. А тренажер Epixx зробить цю годину максимально насиченою. Відкривайте epixx.github.io/emmet і пробуйте перше завдання просто зараз, встановлення не потрібне, результат видно одразу.