Emmet — плагин для быстрой верстки HTML-страниц. Записывая названия HTML-элементов мы можем их превращать в разметку гораздо быстрей, чем писать каждый тег вручную. Например, div превращается в <div></div>, а div>p в <div><p></p></div>. Начинающему разработчику на первый момент может показаться, что все запутано и не стоит возиться с набором новых обозначений. Но на практике верстальщик создаёт HTML-страницу гораздо быстрее, когда владеет этим плагином.
Emmet и HTML
Примеры из заметки можно попробовать тут, документация по плагину, шпаргалка по командам Emmet.
Базовые команды
Дочерний элемент
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
Соседние элементы
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
Группировка HTML-элементов
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>
Создание сразу нескольких однотипных элементов
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Нумерация HTML-элементов
ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Работа с атрибутами класса и идентификатора
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>Думаю имеет смысл почитать оригинальную документацию, чтобы не смотреть скопированные правила 🙂 Удачной разработки!