html,cssのコーデイングに慣れてくると、ソースコードを手打ちするのが手間になってくると思います。
しかも、コーデイングは正確さ要求される作業なので、余計に面倒だと感じられることもあるのではないでしょうか。

そんな面倒な作業を解決してくれる方法があります。

Emmet（エメット）です。

Emmetとは
html,cssなどの入力を補助する拡張機能で、vscodeに標準で使えるようになっています。
Emmetで用意されている記述にそって入力し、エンターキーを入力すると、タグを自動で展開してくれますので、大幅に入力する手間を減らしてくれる大変便利なものとなっています。

このEmmetを活用できれば、時間的な短縮は確実にできるよになりますので、今すぐにでも使ってみてください。

例えば、箇条書きリストを作りたいとき

ul>li*5

と入力し、tabキーまたは、エンターキーを入力すると

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

のように展開されます。

このように非常に少ない入力で済みますので、Emmetを使えば効率的に入力ができます。

基本的な使い方

Emmetは独自の記述方法を使いますので、実際に使うには記述方法を覚える必要があります。
ただ、難しいものではないので、簡単に使うことができると思います。

タグの入力

タグの入力は以下のように省略して入力することが可能です。divだけ特殊で「.」を使用します。

展開前
.

展開後
<div class=""></div></code></pre>

展開前
a

展開後
<a href=""></a>

展開前
p

展開後
<p></p>

展開前
img

展開後
<img src="" alt="">

この例は一部ですが、基本的にタグ名を指定すれば、自動で展開してくれます。

入れ子にする「>」

入れ子になる入力をしたい場合は「>」を使用します。

展開前>
p+img

展開後
<p></p>
<img src="" alt="">

グルーピングする「（）」

階層の深い構造もグルーピングすることによって、まとめて記述することができます

展開前>
div>(header>ul>li>a)+footer>p

展開後
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

複製する「*」

「*」に数字を指定することによって、指定した数分を複製することができます。

展開前>
ul>li*3

展開後
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

連番にする「$」

「$」と複製の組み合わせで連番を作ることができます。

展開前>
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>

IDとclassを指定する

展開前>
#header

展開後
<div id="header"></div>

展開前
.title

展開後
<div class="title"></div>

テキストを指定する「{}」

「{}」でテキストを挿入することができます。

展開前>
h1{テキスト}

展開後
<h1>テキスト</h1>

雛形を呼び出す「!」

「!」の入力でhtmlの雛形を展開することができます。

展開前>
!

展開後
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

応用的な使い方

上記では基礎的なことを紹介しましたが、応用編ということで実践的な使い方を紹介します。

テーブルを記述したい場合は、このようにします。

展開前>
table>tr>th*3+tr>td*3

展開後
<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tr>
</table>

タグに好きな属性を指定することができます。

展開前>
td.class[rowspan=2 colspan=3 title]

展開後
<td class="class" rowspan="2" colspan="3" title=""></td>

以下のように指定すると、trとtdタグにclassを指定することができます。

展開前>
table>.row>.col

展開後
<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

以下のように「$@-」を指定すると、連番の順序を逆にすることができます。

展開前>
ul>li.item$$@-*5{テキスト$@-}

展開後
<ul>
  <li class="item05">テキスト5</li>
  <li class="item04">テキスト4</li>
  <li class="item03">テキスト3</li>
  <li class="item02">テキスト2</li>
  <li class="item01">テキスト1</li>
</ul>

少し長くなりますが、htmlでよくある構成のものが、たった1行で記述できます。

展開前>
header+section+nav+(main>section>article*3)(aside>.+(section>article*3)+(section>article*3))+section+section+footer

展開後
<header></header>
<section></section>
<nav></nav>
<main>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
</main>
<aside>
  <div class=""></div>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
</aside>
<section></section>
<section></section>
<footer></footer>

最後に

Emmetで実際に使えるタグはここでは紹介できないくらい、かなりの数あります。
今回はhtmlでよく使うタグを中心に紹介しました。

この他についてはチートシートに記載していますので、
こちらをみてください。

Emmetのcssについてはこちらで詳しく解説しています。
emmetを使ってhtmlを効率的にコーデイングする方法