Emmet enables more rapid creation of code in, among other things, HTML and JavaScript. It also works with CSS, but CSS code is so brief already that it makes little difference

It takes a little getting used to, but - once you do - it will speed up your coding a great deal. It will also help mitigate typographical errors; the more you type by hand, the more likely you are to make mistakes!

Using Emmet with HTML is pretty easy to learn. Type the name of an element and press the TAB (or Enter) key, and Emmet will do the rest:

We can type in any element name + TAB to auto-generate the element we need

If we want to include a class (or classes) in our element's opening tag, we use the standard dot ('.') format. Chaining multiple classes just requires them to be separated by dots

Like classes, we can shorthand IDs into our opening tags. The difference between the two is that an element can only have one ID

We can add both classes and IDs to our opening tags by chaining the same notation

Just like with vanilla HTML, the order in which we add the classes & IDs doesn't matter

We can use the combinators we learned when we studied CSS to perform similar actions with Emmet. For example, say we wanted a div element with a nested p element:

Sometimes, we may need to adjust the indentation a little, but we're still saving a lot of time & typing

We can also add sibling elements within a parent element

We can use cominations of combinators to create any document structure we can visualize, but these are the ones I use most

Say we have to add an unordered list nested within a div that has five list items. We can easily do that with Emmet