Visual Studio Code：Emmet記法を使って階層タグを入力する

＞を使って階層を出力する

mainタグの中にsectionタグを３つ入力するときは「main>section*3」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

と出力されます。

＋を使って子階層に複数のタグを出力する

mainタグの中にsectionタグ３つとdivタグを入力するときは「main>section*3+div.btn」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
  <div class="btn"></div>
</main>

と出力されます。

キャレット「^」を使って親階層に複数タグを出力する

mainタグの中にsectionタグ３つとmainタグと同じ階層にfooterタグを出力するときは「^（キャレット）」を使って「main>section*3^footer」と入力すると、

<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

と出力されます。

括弧を使って階層タグを複数出力する

ulタグの中にliタグ３つを２つ出力するときは、括弧を使って「(ul>li*3)*2」と入力すると、

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

と出力されます。

情報源

#05 階層を表現してみよう | Emmet入門

要素の階層を指定しながら記法を組み上げていく方法について解説していきます。

dotinstall.com

書籍