コメットさんは魔法で困りごとを解決してくれますが（古くてごめん）、DreamweaverのCC2014辺りから使用可能だったか記憶が微妙な、Emmet（エメット）さんと言う、ツールを使わずに手打ちでコーディングする際の、便利な機能が追加されています。この機能は書きたいコードをhtmlとは別の表記でササッと書いて、tabキーを押すと、ちゃんとしたコードが魔法の様にパッと出来ちゃう優れもの。

最初はちょっと悩むけど、慣れてくると超便利っていうか超気持ちいい！

例えば以下の様に書いて

nav#mainnav>ul>li#bt$*5>a{menu$}

書いたコードの右にカーソルを移動して（これ大事）tabキーを押すと、

<nav id=”mainnav”>
<ul>
<li id=”bt1″><a href=””>menu1</a></li>
<li id=”bt2″><a href=””>menu2</a></li>
<li id=”bt3″><a href=””>menu3</a></li>
<li id=”bt4″><a href=””>menu4</a></li>
<li id=”bt5″><a href=””>menu5</a></li>
</ul>
</nav>

なんということでしょう！こんな素敵なhtmlコードに変換されます。

簡単なところでいうと

h1と書いてtabキーを押すと<h1></h1>となります。
ul>liでは<ul><li></li></ul>
liが5ついるんだよねって場合は
ul>li*5で
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

「>」が付くことで、子要素として次の要素が入ります。
階層を上にしたければ「^」でOK。

って感じ。もう流石にメモ帳には戻れなくなりそうです。