Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

If you’ve ever watched an experienced developer code, it looks like they’re performing magic. They type a single line like ul>li*3, hit enter, and suddenly a full list appears. No, they are not performing magic, they are using Emmet. So, in this blog you will get to know what emmet is and how we use it.

What is Emmet and why we need it ?

Emmet is a plugin built in to most of the modern code editors that turns abbreviations to full HTML code.

We need emmet because:

1. Speed: Emmet makes writing long codes fast and this boosts productivity.

2. Accuracy: You don’t have to remember which tags to close anymore, emmet takes care of every opening and closing tag.

3. Focus: You spend more time thinking about skeleton of the page and less on code.

How Emmet works ?

Emmet works on a simple principle: Abbreviation + Tab = HTML.

1. You type a the abbreviation.

2. Your editor shows a preview.

3. You hit the Tab key.

4. The abbreviation expands into full HTML.

Basic Emmet syntax and abbreviations

1. Creating Basic Elements:

   To create any tag, just type its name. No brackets needed!

   • Abbreviation: h1 → Tab

   • Result: <h1></h1>

2. Adding classes and ids:

   Emmet uses the same symbols as CSS selectors (which we covered in the last article!):

   • Class (.): p.intro → <p class="intro"></p>

   • ID (#): div#header → <div id="header"></div>

   • Multiple Classes: div.box.dark → <div class="box dark"></div>

3. Nesting:

   Use the > symbol to put one element inside another.

   • Abbreviation: div>p

   • Result:

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

4. Repeating Elements:

   • Abbreviation: ul>li*10

   • Result: Creates a ul tag with ten li tags inside instantly.

5. Adding content and attributes:

   • Text Content (`{}`): p{Hello World} → Hello World

   • Custom Attributes (`[]`): td[colspan=2] → “<td colspan=”2”></td>“

Generating full HTML boilerplate with Emmet

Every HTML file needs a head, body, and meta tags. So instead of manually typing it we can just type ! in the html file then hit Tab and we get the whole html boilerplate. Now you just have to write the body in the html and nothing else.

Thank You

With this, the blog ends and now you know what is emmet, why we use it and why we needed it in the first place. Now you can save your time writing the same tags everytime and just focus on main code.