Основы современной верстки
2026-02-26 17:16 Diff
https://ru.hexlet.io/courses/layout-designer-basics/lessons/emmet/theory_unit

Если вы работаете с редактором Visual Studio Code, то плагин Emmet уже установлен в редакторе. В прошлом уроке вы также могли увидеть его работу при создании базовой структуры HTML-документа. Если вы пользуетесь другим редактором, то можете установить Emmet с помощью любой доступной инструкции. Этот плагин настолько популярен, что при желании, наверное, можно найти инструкцию по его установке на кофемолку.

Что же такое Emmet и зачем он нужен? Попробуем разметить воображаемую карточку товара интернет-магазина. Что нам может понадобиться? Обрамляющий блок, название товара, его картинка, блок с ценой, кнопка «Заказать». Вроде не так много. Добавим карточку и расположим ее внутри секции с классом cards. Попробуем это преобразовать в HTML. Мы получим примерно следующую структуру:

Не самая сложная разметка, при этом в ней достаточно много разных элементов. Попробуйте повторить эту разметку сами, и вы увидите, что это отнимает достаточно много времени, хотя мы заранее знали, какие элементы будут нужны, и представляли это в голове. В итоге получается, что вместо верстки других элементов мы просто вводили корректные символы и старались следить за тем, что все блочные элементы будут закрыты.

На самом деле этот пример был сверcтан всего одной строкой. Изначально она вас может напугать, но к концу урока вы поймете каждый символ, который в ней есть. Строка выглядит следующим образом:

section.cards>article.card>div.card-title{Название товара}+img[src="/images/card-item-1.png"][alt="Товар-1"]+(.card-price>span.price-sum{24 000}+span.price-cur{руб.})+button{Заказать}

Вот здесь и вступает в игру плагин Emmet. Он берет эту строку и преобразует ее в HTML, который вы видели выше. Чтобы плагин преобразовал строку в HTML, можно пойти одним из двух путей:

  1. В самом конце набора строки Visual Studio Code сам вам предложит ее преобразовать. Вам нужно только нажать Enter, когда на экране есть всплывающая подсказка.
  2. Выделить всю строку и нажать комбинацию клавиш Ctrl + Shift + P. Во всплывающем окне начать набирать >Emmet: Expand Abbreviation и выбрать этот пункт.

189 символов против 877. Серьезный результат. И это различие будет только расти по мере того, насколько большую верстку вы хотите сделать. Вполне нормально, если полтысячи символов, с помощью Emmet, создадут вам структуру целой страницы. Emmet — мощный инструмент, который позволяет ускорить разметку HTML-кода. Плагин позволяет снять бóльшую часть рутинных действий, от которых хочется спать. Пройдемся с самого начала строки и разберем все, что здесь происходит:

  • section.cards — очень похоже на CSS-селектор, и именно так и стоит на него смотреть. Мы хотим создать элемент <section> с классом cards.
  • > — символ, как и в CSS, указывает на вложенность. В текущем значении запись section.cards> означает, что все, что указано далее, будет располагаться внутри секции с классом cards.
  • article.card — создаем элемент <article> с классом card.
  • div.card-title — создаем блочный элемент с классом card-title. Здесь есть хитрость: чтобы создать элемент <div>, не обязательно его указывать напрямую. Если не указан тег перед классом, то Emmet по умолчанию создаст элемент <div>. То есть вместо div.card-title можно было указать .card-title.
  • {Название товара} — в фигурных скобках указывается простой текст, который будет помещен внутрь блока.
  • + — символ сложения означает, что правую часть необходимо расположить рядом с левой, а не внутри нее, как в случае с символом >. Мы хотим расположить картинку рядом с блоком card-title, а не внутри.
  • img[src="/images/card-item-1.png"][alt="Товар-1"] — создаем элемент <img>. В квадратных скобках указываются атрибуты, которые мы хотим добавить. В данном случае это атрибут src, значением которого является путь до изображения, а второй атрибут alt отвечает за мета-информацию о нашей картинке. Атрибуты можно записывать как по отдельности, так и вместе. Если мы укажем вот такую запись img[src="/images/card-item-1.png" alt="Товар-1"], то результат останется тем же.
  • () — скобки позволяют группировать информацию. В данном случае мы хотим, чтобы все, что внутри скобок, располагалось рядом с картинкой, созданной в прошлом пункте.

Все, что происходит дальше, вы уже знаете благодаря предыдущим пунктам. Как видите, Emmet достаточно интересный инструмент. И не настолько сложный, как может показаться с самого начала. Вот еще несколько примеров разных строк и результатов преобразования с помощью Emmet:

header>.logo+nav>ul>li*3

Обратите внимание на конструкцию *3 — это в прямом смысле умножение. Мы хотим взять элемент и разметить его три раза.

table>tr*3>td*3

Никогда еще создание таблиц не было таким простым делом :)

header+main+footer

А вот и простой способ добавить основные теги в вашу страницу.

div.item-$*3

Символ $ в Emmet является счетчиком. При разворачивании такой строчки все символы $ заменяются на числа от 1 с шагом единица. Есть несколько дополнительных конструкций, которые позволяют расширить данный счетчик:

  • Если использовать несколько идущих подряд символов $, то столько разрядов в счетчике и будет. Например, div.item-$$$*3 начнет счетчик не просто с нуля, а с двух нулей. Первым элементом в таком случае станет <div class="item-001"></div>.
  • Счетчик можно начать с любого произвольного числа. Для этого используется символ @, после которого идет начальное число. Например, div.item-$@5*3 начнет счетчик с числа пять. Первым элементом станет <div class="item-5"></div>.

Счетчик можно использовать внутри конструкции {}:

div.item{Работа номер $}*3

Это базовые вещи, которые помогут вам сократить время написания разметки. Emmet куда более мощный инструмент, но этих возможностей вам хватит надолго. Помимо этого он умеет работать с CSS. Там он больше нужен для выписывания сокращений. Вы можете попробовать создать любой CSS-файл и начать набирать свойства. Все, что предложит вам Visual Studio Code, работает и с Emmet.