DEV Community

Cover image for Write HTML faster with Emmet.
Ebenezer Enietan (Niza)
Ebenezer Enietan (Niza)

Posted on

Write HTML faster with Emmet.

Emmet is a fantastic plugin for code editors that web developers can use to speed up their coding. By pressing a single key, Emmet allows you to quickly translate expressions that resemble CSS into real HTML markup.

VSCode comes out of the box with the emmet plugin, so if you open up VSCode and type the following:

section>(div.card>img[src="img$.jpg"].+h4{product $}+p{Description $})*3
Enter fullscreen mode Exit fullscreen mode

...then press the tab key it becomes :

        <div class="card">
            <img src="img1.jpg" alt="" class="">
            <h4>product 1</h4>
            <p>Description 1</p>
        <div class="card">
            <img src="img2.jpg" alt="" class="">
            <h4>product 2</h4>
            <p>Description 2</p>
        <div class="card">
            <img src="img3.jpg" alt="" class="">
            <h4>product 3</h4>
            <p>Description 3</p>
Enter fullscreen mode Exit fullscreen mode

Believe me when I say that you practically already know how to use Emmet because shortcuts resemble CSS Selectors.

id is "#" class is "." custom attributes is "[ ]", element nesting is ">" and so on.

Personally, I don't often use emmet for CSS because most code editors provide excellent CSS code suggestions; however, emmet has been very helpful for my HTML.

You can learn emmet in a few hours by going over the cheat sheet.

Here is a link to the emmet cheat sheet
Emmet Cheat sheet

Watch me run through the cheat sheet

Part two

Top comments (1)

nnekajenny profile image
Jennifer Eze