Для редактора Notepad++ есть плагин Emmet, но по умолчанию не устанавливается. Emmet нужно установить через меню Плагины / Plugins manager.

Принцип такой - набираем аббревиатуру, нажимаем горячую клавишу и получаем нужный HTML или CSS код.

Примеры аббревиатур для HTML

html:5

Получаем такой код:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>
  • link
  • script:src
  • .item - блок div с классом item
  • p.lead
  • ul>li
  • ul>li*5 - список с 5-ю тэгами li
  • ul>li.item*5
  • ul>li.item$*5 - добавляется нумерация класса li
  • table>(thead)+(tbody>tr*3>td*2)(tfoot)h1{Привет} - содержимое в фигурных скобках
  • a[data-param1=25] - в квадратных скобках можно указывать атрибуты тэга
  • (.page-title>h1)(.page-item>h2) - с помощью скобок группируем тэги
  • table>tr*3>td*2
  • table>(thead)(tbody>tr*3>td*2)(tfoot)
  • select>option*5
  • form:post
  • p>lorem

Аббревиатуры для CSS 

  • w100 - width: 100px;
  • w100%
  • w2e
  • @f - font-face
  • @f+ - font-face с дополнительными опциями
  • f - font
  • f+
  • ff - font-family
  • bg или bg+
  • bgi
  • box - box-sizing для разных брраузеров
  • -foo - добавляются приставки для браузеров
  • anim