Emmet Abbreviations in VSCode

Apparently there’s this plugin for many IDEs called Emmet which makes writing HTML very fast!

Here’s the Emmet Cheat Sheet

Here’s a great video on it:

https://www.youtube.com/watch?v=V8vizNQKtx0

Start all HTML projects by just typing !:

Then, hit ENTER (not Tab) to complete to this boilerplate!

Start by typing the name of the tag you want … then hit ENTER (not Tab) to complete.

e.g. div (ignore Cursor’s autocomplete suggestions behind it)

Then, ENTER:

That works with any HTML element. It gets even better, though. You can quickly generate CSS and other HTML attributes.

For example, a <span> with the CSS class purple:

ENTER completes it to:

Similarly, adding an id= attribute to an element:

ENTER completes to:

You can complete all of the attributes you want for an element by chaining them as so:

ENTER completes to:

You can write these things the way that CSS Selectors are written.

So, a <div> with a class of purple and a child <span> with class cyan is:

ENTER completes to:

You can nest all of your elements similarly:

Becomes:

If you wanted 3 <li> elements as children of the <ul>, you can use * multiplication:

Becomes:

Want to add text to each of those <li> elements? Use the { } operators:

Becomes:

Add numbers to those list items:

Becomes:

The $ operator can be used in any other attribute also. e.g. .class$ becomes .class-1, .class-2, etc …

Add additional $ to zero-pad the numbers.

Becomes:

Add sibling elements using the + operator.

Becomes:

Group elements together to implement more complex, yet readable, structures. For example, if we wanted a <header> with a <nav> child, then the <main> and <footer> siblings as before, we can group with the ( ) operators.

Becomes:

Let’s combo it up! We want:

• Header
  • H2, with text
  • Nav
    • Ordered List
    • 5 list elements, with links (anchor tags)
• Main
• Footer

To accomplish this, we write:

Which becomes:

Building Forms using Emmet