DEV Community

Cover image for Emmet for HTML Beginners
Tahir Khan
Tahir Khan

Posted on

Emmet for HTML Beginners

#webdev #developertool #programming #beginners

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>
Enter fullscreen mode Exit fullscreen mode

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

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

Basic Emmet Syntax

  • Element Name 
div     → <div></div>
a       → <a href=""></a>
Enter fullscreen mode Exit fullscreen mode
  • Classes 
div.container    → <div class="container"></div>
.header          → <div class="header"></div>  (div is default)
Enter fullscreen mode Exit fullscreen mode
  • ID's 
div#main         → <div id="main"></div>
input#username   → <input type="text" id="username">
Enter fullscreen mode Exit fullscreen mode
  • Child 
div>p        → <div>
                <p></p>
               </div>
Enter fullscreen mode Exit fullscreen mode
  • Sibling 
div+p        → <div></div>
               <p></p>
Enter fullscreen mode Exit fullscreen mode
  • Multiplication 
ul>li*3      → <ul><li></li><li></li><li></li></ul>
div.item*4    → <div class="item"></div> (4 times)
Enter fullscreen mode Exit fullscreen mode
  • Text Content 
p{Hello World}        → <p>Hello World</p>
a{Click Here}         → <a href="">Click Here</a>
Enter fullscreen mode Exit fullscreen mode

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 🙏

Top comments (0)