List of Emmet keyboard shortcuts for quickly generating HTML
Tags: html, productivity, webdev, css
Published: 2021-10-28 22:12:54

Like many others, I started my coding journey with Notepad. Few days ago, I tried building a basic HTML page using my NotePad text editor. It took me over 10 minutes to get everything set up.

This made me realize just how useful Emmet is. Emmet is arguably one of the best extensions for web developers, productivity-wise.

Though I am not quite sure of NotePad, other popular code editors like VSCode and Atom all have their own Emmet plugins which can be installed from respective marketplaces.

With the Emmet plugin installed on your text editor , you can quickly generate HTML code by using a couple of predefined keyboard shortcuts, saving you a lot of time in development.

You can generate a huge tree of HTML markup with along with their attributes on the fly.  Emmet uses conventional CSS selectors to structure HTML and define attributes.

Below are some of my go-to shortcuts for quickly generating HTML.

### Generate boilerplate for HTML

Key: `!`+`tab` 

Imagine if you had to type out the boilerplate markup for every HTML document you created. That's an exhausting task.

With Emmet, you can create the structure of your document with just two keys:

![Generate HTML boilerplate](https://cdn.hashnode.com/res/hashnode/image/upload/v1635348970058/IDWGvbAr4X.gif)


### Create opening and closing tags (with some key attributes)
Key: `<tagname>` + `tab` or `enter`

You can simultaneously create the opening and closing tags of any HTML element. 

In addition, Emmet abbreviations automatically expands a list of related tags (with their attributes)  as you start typing the tag name:

![Emmet abbreviation](https://cdn.hashnode.com/res/hashnode/image/upload/v1635412612882/10W37gaUW.gif)

### Create a HTML tag with two or more of the same attributes

You can specify two values to the same HTML property. For example, you can set two class names on the same element using the class CSS selector (.), like so:

![Same class names](https://cdn.hashnode.com/res/hashnode/image/upload/v1635413452002/yhC6o97KkO.gif)

### Create a HTML element with different attribute types
You can specify two different types of attributes on the same tag. For example, you can specify a class attribute and an id attribute on a `div` tag by combining `.classname` + `#id-name` , like so:

![HTML element with different attributes](https://cdn.hashnode.com/res/hashnode/image/upload/v1635412807030/13AwnmHUY.gif)

### Create nested tags
You can create a tree of nested tags with Emmet. To nest a tag, simply precede the child with the greater than symbol (>):

![simplenesting.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1635413353822/Upe6tzA3u.gif)

### Nest different tags with different classnames
You cannot just nest the same kind of element with same attribute, but also nest different tags with different attributes. In the second markup, we nest an image with an `id` inside of a `div` with a `class`:

![diff attributes](https://cdn.hashnode.com/res/hashnode/image/upload/v1635413662637/8c65Jnc6a.gif)

### Multiply children HTML tags
You can multiply a specific type of tag to a specified number, using the multiplication symbol (*). For example, we can create multiple list items inside of an unordered list:

![multiply children tags](https://cdn.hashnode.com/res/hashnode/image/upload/v1635414079927/h4HR5p1s7.gif)

### Create auto-incrementing attribute value
Another awesome thing we can do with Emmet is to auto-increment an attribute on a list of HTML children tags:

![Auto increment atributes](https://cdn.hashnode.com/res/hashnode/image/upload/v1635414348298/8Ps3A9Way.gif)

### Complex nesting of HTML tags
You can create a complex nesting structure in just a single line:

![complex nesting](https://cdn.hashnode.com/res/hashnode/image/upload/v1635413924643/fBfWna_Ge.gif)

### Create sibling elements (on same level)
You can create two or more sibling HTML tags (adjacent to each other) using the plus symbol (+):

![sibling elements](https://cdn.hashnode.com/res/hashnode/image/upload/v1635414509018/X-oKiGjd2.gif)

### Conclusion
The Emmet plug-in is an indispensable tool for web developers. The tool helps you create simple and complex HTML markup structure with a couple of pre-defined keyboard shortcuts.


Did I miss out any keyboard shortcut? Please let me know in the comments.