🎮 Emmet Practice
Интерактивная песочница с live preview и подсветкой синтаксиса
🏆 Рекорд: 0 очков | ⚡ Лучшее время: -с
✏️
Emmet код
Загрузка Emmet библиотеки...
📄
Результат
🔗 Связанные инструменты
💡 Примеры для практики
Базовая структура
Beginner
div.container>h1{Привет}+p*3
Контейнер с заголовком и 3 параграфами
Статья
Intermediate
article>header>h1+div.content>p*3+footer
Структура статьи с заголовком и контентом
Hero секция
Beginner
section.hero>h1+p+a.btn
Hero секция с заголовком и кнопкой
Список фич
Intermediate
ul.features>li*5>div.icon+h3+p
Список из 5 фич с иконками
Форма входа
Beginner
form>input:t+input:p+btn:s{Войти}
Форма с полями и кнопкой
Контактная форма
Intermediate
form.contact>input+input+textarea+button
Форма с placeholder и кнопкой
Форма регистрации
Advanced
form>fieldset>legend+label+input*3+btn
Регистрация с fieldset и labels
Форма поиска
Beginner
form.search>input[type=search]+button
Поле поиска с кнопкой
Навигация
Beginner
ul.nav>li*5>a[href=#]{Пункт $}
Меню с 5 пунктами и нумерацией
Меню с подменю
Intermediate
nav>ul>li*3>a+ul>li*2>a
Выпадающее меню
Breadcrumb
Beginner
nav.breadcrumb>ul>li*4>a
Хлебные крошки
Footer навигация
Beginner
footer>nav>ul>li*5>a
Навигация в footer
Базовый layout
Beginner
div.container>header>nav+main+footer
Структура страницы с header, main, footer
Grid сетка
Intermediate
div.grid>div.card*6>img+h3+p
Сетка из 6 карточек
Sidebar layout
Intermediate
div.layout>aside+main>article*3
Layout с sidebar и контентом
3 колонки
Beginner
div.columns>div.col*3>h3+p*3
Три колонки с контентом
Карточка
Intermediate
div.card>img+h2+p+a.btn
Карточка с изображением и кнопкой
Модальное окно
Intermediate
div.modal>header+body+footer
Модальное окно с header, body, footer
Accordion
Intermediate
div.accordion>div.item*3>h3+div.content
Аккордеон с 3 секциями
Tabs
Intermediate
div.tabs>ul>li*3+div*3
Вкладки с контентом
Pricing
Advanced
div.pricing>div.plan*3>h3+p+ul>li*4+button
Тарифные планы
Таблица
Intermediate
table>thead>tr>th*3+tbody>tr*2>td*3
Таблица с заголовком и строками
Полная страница
Advanced
!+header>nav+main+footer
Полная HTML5 структура
Landing page
Advanced
div.landing>section.hero+section.features
Лендинг с секциями
Dashboard
Advanced
div.dashboard>aside+main>header+div.grid
Панель управления с сайдбаром
Blog layout
Advanced
div.blog>header+main>article*5+aside
Блог с постами и sidebar
E-commerce
Advanced
div.ecommerce>header+main>div.products+footer
Интернет-магазин с товарами