http://docs.emmet.io/cheat-sheet/
Emmet は元々 Zen-coding という名前で開発されていた HTML と CSS のショートカットのようなもので、tag名や()を全て入力しなくても、簡略化した記法の最後に tab を押すことで、HTML や CSS へ展開できるコーディングのためのシステムです。
Emmetを各種エディター、CodePenで使うには
Emmet は Sublime Text や Atom 等、ほとんどのエディターのためにプラグインが用意されており、使用することができます。
CodePenでは最初からEmmetを使うことができます。
Emmetの例
Emmetの一例を以下に記します。全てのEmmetについては本家サイトのショートカット集から確認できます。http://docs.emmet.io/cheat-sheet/
See the Pen used emmet by nakanishi (@nakanishi) on CodePen.