Все мы слышали об emmet. Его синтаксис очень простой, но теоретически позволяет вместить в себя HTML-структуру любой сложности. Пожалуй, самая большая его странность, не считая однострочного кода, - конвертер работает только в одну сторону. По-моему, ручная правка HTML это ад даже в хорошем текстовом редакторе и нужно стремиться её избегать. И в некоторых случаях emmet нам в этом хороший помощник, его сокращение раздутого синтаксиса HTML до минимально возможного в принципе - просто праздник какой-то.
###Синтаксис emmet:
+ оператор конкатенации: li+li → <li></li><li></li>
* оператор повторения: li*2 → <li></li><li></li>
$ оператор перечисления: {$}*3 → 123
() группировка тегов: ul(li+li) → <ul><li></li><li></li></ul>
[] доступ к атрибутам тега: textarea[cols=30 rows=10] → <textarea name="" id="" cols="30" rows="10"></textarea>
{} доступ к значению тега: p{hello} → <p>hello</p>
.class установка классов: h6.small → <h6 class="small"></h6>
#id установка id: h1#big → <h1 id="big"></h1>
> оператор вложенности: ul>li → <ul><li></li></ul>
^ переход на предыдущую вложенность: div+div>p>span+em^bq →
<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>