HTMLをもっと簡単に早く書きたい！

htmlのタグを書くのってめんどいですよね。。。
そんな時に使うのが！！！今回紹介するHTML Emmetです！

HTML Emmetとは

htmlを効率よく書くために作られたショートカットキーのようなもの
直感的な操作で素早くhtmlの構造を作成できます。

例1

htmlを書くとき、最初<!DOCTYPE html>って書くと思うんですけどvsCode上で以下のように!を入力してEnter押すと

Demo.html

こんな感じでhtmlの基本形が出てきますよね！これがまさにEmmetです！

Demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

例2

例えば以下のようにコマンドを打つと、、、

Demo.html

<body>
    div>p>a
</body>

こんな感じで一気にタグを作ってくれるんです！便利ですねぇ

Demo.html

<body>
    <div>
        <p><a href=""></a></p>
    </div>
</body>

例3

次はこんな感じでコマンドを打ってみると、、、　お分かりですかね？

Demo.html

<body>
    <div>
        <p><a href=""></a></p>
        ul>li*3
    </div>
</body>

こーんな感じになっちゃいます！

Demo.html

<body>
    <body>
    <div>
        <p><a href=""></a></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</body>

余計な説明はしません。皆さんなら直感で書けるはずです！w
なんとなく概要はわかったと思うので、気になる方は

このページまで飛んでみてください！色んな記法に出会えると思います！

僕も勉強頑張ります！
それでは！