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 🙏