Prateek Budhiraja
Prateek Budhiraja

Prateek Budhiraja

Write blazingly fast HTML with Emmet 🌩️

Photo by Arnold Francisca on Unsplash

Write blazingly fast HTML with Emmet 🌩️

Prateek Budhiraja's photo
Prateek Budhiraja
·Jul 12, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Emmet is a web-developer’s toolkit for boosting HTML & CSS code writing. You can type expressions and it gets converted into code snippets 🪄. magic.gif

Their tagline is Emmet — the essential toolkit for web-developers which is true in some sense, web-devs usually do not work on any project without Emmet.

It comes pre-install with VS Code, but it should be available for the majority of the code editors. But for this blog post, we'll stick to VS Code 🦄

Let's start with things that you can integrate right now!

Literally, stop doing everything and try them now!

  • 🧑‍💻HTML boilerplate code
    Writing DOCTYPE and HTML and HEAD and TITLE can sometimes feel like more work than actually creating the structure of the website! But with Emmet, the colourless process of writing all this can be done with ease.
    Use ! and press TAB/Enter.

    !
    

    boilerplate.gif

  • 🏷️Tags on the go
    We can make use of Emmet to generate <> and </> for tags. We just need to write a tag name we want to generate and hit TAB/ENTER to generate a freshly baked opening and closing tag.

    nav
    

    tags.gif

  • 🪪Tags with ID's or Classes
    We can use Emmet to generate tags with classes/ids already filled in to save some more time!
    Use .class-name #id-name with the tag name (or without for generating a div)
    footer.my-footer#sticky
    .about-section
    
    footer.gif
  • 🤖Lorem
    Lorem can be generated using lorem. We can also declare how many words is to be generated.

    lorem
    lorem60
    

    lorem.gif

  • 👯Relations within tags and multiple elements
    Generating tags with automatically filled classes is... yeah, I get it, not brag worthy. But now you will see the real power of Emmet.
    Use > for nesting and + for generating a tag on the same level. And the best part, we can generate multiple elements by using *
    Example:

    table>(tr>th*3)+(tr>td*3)*4
    

    table.gif We can also generate numbers using $, check Example 2 for the same.

✨More Examples✨

Example 1

Let's say we have to design a nav bar, we will be needing multiple links and an element for brand image.
After what we have learned we can easily design it using Emmet.

nav.navbar>div.brand>img.brand-logo+ul>(li.nav-item>a.nav-link)*4

nav.gif

Example 2

What if you need to generate different ids for the elements generated through Emmet * property?
Don't worry they got you covered! Observe $.

ul>(li#item-$>lorem10)*5

image.png

Example 3

Generating multiple tags simultaneously using Emmet.

div>(header>ul>li*3>a)+footer>p

image.png

Emmet also offers shortcuts for CSS, like bgc for background-color, they are easy to work with, you just need to give the first characters of each work of a CSS property and VS Code will give you suggestions as soon as you type something.

Thats all for this post! I hope you learned something.

Happy learning ✨

You can find more recourses to study Emmet below 👇

 
Share this