Emmet for HTML Beginners

Tahir Khan — Tue, 19 May 2026 03:50:58 +0000

Emmet is a developer tool, which helps us to write faster code in our code editor, Some editors comes with built in Emmet tool, for some we have to manually install it.

Before Emmet we have to manually write opening and closing tag, which you know little frustrating and also consume a lot of our time. But nowadays nobody does that, except some teacher in our college 😂.

<div> </div>
<p> </p>
<h1> </h1>

How it is useful ?

It provides different shortcuts to write code in much faster way, like when you type "!" and click enter it will automatically generate full boilerplate code which shown in the below image

Imagine writing this much code every-time you create a new page, That's how it work's for other tags. It helps us

⚡ Writing faster code
❌ Make less mistake on syntax
😣 Focus on what really matters i.e programming logic

Basic Emmet Syntax

Element Name

div     → <div></div>
a       → <a href=""></a>

Classes

div.container    → <div class="container"></div>
.header          → <div class="header"></div>  (div is default)

ID's

div#main         → <div id="main"></div>
input#username   → <input type="text" id="username">

Child

div>p        → <div>
                <p></p>
               </div>

Sibling

div+p        → <div></div>
               <p></p>

Multiplication

ul>li*3      → <ul><li></li><li></li><li></li></ul>
div.item*4    → <div class="item"></div> (4 times)

Text Content

p{Hello World}        → <p>Hello World</p>
a{Click Here}         → <a href="">Click Here</a>

These are some of the basic Emmet commands which will be useful while writing your HTML.

Tip - Don't blindly follow everything you see on the internet, follow what is fast for you, I think basic Emmet commands are useful but the complex ones isn't that much (personal opinion).
Thank you for your time 🙏

DEV Community: Tahir Khan

Emmet for HTML Beginners

How it is useful ?

Basic Emmet Syntax