🎓 Emmet Tutorial

Научитесь писать HTML и CSS в 10 раз быстрее

📚 Уроки 🎮 Практика 📋 Шпаргалка 🎯 Задачи 🏆 Достижения 🎯 Selector Tester
📖 Урок 1: Что такое Emmet?

Emmet — это набор плагинов для текстовых редакторов, который позволяет писать HTML и CSS код с помощью сокращений (аббревиатур). Emmet расширяет аббревиатуру в полноценный HTML/CSS код.

Пример: Вместо того чтобы писать:

<div class="container"><div class="row"><div class="col"></div></div></div>

Вы просто пишете:

.container>.row>.col

И нажимаете Tab или Ctrl+E

💡 Где работает Emmet?
Emmet встроен в большинство современных редакторов: VS Code, Sublime Text, Atom, WebStorm, PhpStorm и другие. Также работает в браузерах через расширения.
📖 Урок 2: Базовый синтаксис

Emmet использует простой синтаксис для создания HTML элементов:

  • div — создаёт элемент <div></div>
  • .class — создаёт элемент с классом
  • #id — создаёт элемент с ID
  • [attr=value] — добавляет атрибут
Пример 1: Простой элемент
Emmet:
div
Результат:
<div></div>
Пример 2: Элемент с классом
Emmet:
.container
Результат:
<div class="container"></div>
Пример 3: Элемент с ID
Emmet:
#header
Результат:
<div id="header"></div>
Пример 4: Комбинация
Emmet:
div.container#main
Результат:
<div class="container" id="main"></div>
📖 Урок 3: Вложенность и группировка

Emmet позволяет создавать вложенные структуры с помощью операторов:

  • > — вложенный элемент (child)
  • + — соседний элемент (sibling)
  • ^ — подъем на уровень вверх (climb-up)
  • * — умножение (несколько элементов)
Пример 1: Вложенность (>)
Emmet:
ul>li
Результат:
<ul> <li></li> </ul>
Пример 2: Соседние элементы (+)
Emmet:
h1+p+p
Результат:
<h1></h1> <p></p> <p></p>
Пример 3: Умножение (*)
Emmet:
ul>li*3
Результат:
<ul> <li></li> <li></li> <li></li> </ul>
Пример 4: Подъем вверх (^)
Emmet:
ul>li^div
Результат:
<ul> <li></li> </ul> <div></div>
📖 Урок 4: Атрибуты и текст

Emmet позволяет добавлять атрибуты и текст к элементам:

  • [attr=value] — добавляет атрибут
  • {text} — добавляет текст
  • $ — нумерация (для умножения)
Пример 1: Атрибуты
Emmet:
a[href="https://example.com" target="_blank"]
Результат:
<a href="https://example.com" target="_blank"></a>
Пример 2: Текст
Emmet:
h1{Привет, мир!}
Результат:
<h1>Привет, мир!</h1>
Пример 3: Нумерация
Emmet:
ul>li.item${Элемент $}*3
Результат:
<ul> <li class="item1">Элемент 1</li> <li class="item2">Элемент 2</li> <li class="item3">Элемент 3</li> </ul>
📖 Урок 5: Группировка элементов

Emmet позволяет группировать элементы с помощью круглых скобок (). Это полезно для создания сложных вложенных структур.

Пример 1: Группировка с вложенностью
Emmet:
div>(header>ul>li*2>a)+footer>p
Результат:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
💡 Совет
Группировка помогает создавать сложные структуры без необходимости использовать оператор ^ (подъем) много раз.
📖 Урок 6: Неявные имена тегов

Emmet умно определяет имя тега на основе контекста:

  • .class → <div class="class"> (по умолчанию div)
  • ul>.class → <ul><li class="class"> (внутри ul → li)
  • table>.row → <table><tr class="row"> (внутри table → tr)
Пример: Неявные теги в таблице
Emmet:
table>.row>.col
Результат:
<table> <tr class="row"> <td class="col"></td> </tr> </table>
📖 Урок 7: Алиасы HTML5

Emmet имеет множество сокращений для быстрого создания HTML5 структуры:

  • ! или html:5 → базовая HTML5 страница
  • a:link → <a href="http://">
  • a:mail → <a href="mailto:">
  • input:t → <input type="text">
  • input:p → <input type="password">
  • btn:s → <button type="submit">
Пример: Форма с алиасами
Emmet:
form>input:t+input:p+btn:s
Результат:
<form action=""> <input type="text" name="" id=""> <input type="password" name="" id=""> <button type="submit"></button> </form>

🎯 Готовы проверить свои знания?

Пройдите 100 интерактивных задач с системой уровней и отслеживанием прогресса!

Начать задачи →