# Emmet Abbreviations in VSCode

By Corey J. Gallon · 2024-10-10 · https://gallon.me/emmet-abbreviations-in-vscode.html

---

Apparently there’s this plugin for many IDEs called [Emmet](https://emmet.io/) which makes writing HTML very fast!

Here’s the [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)

Here’s a great video on it:

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

Start all HTML projects by just typing `!`:

![start html file.png](https://gallon.me/images/20241010_start_html_file.png)

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

![enter completes.png](https://gallon.me/images/20241010_enter_completes.png)

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)

![div.png](https://gallon.me/images/20241010_div.png)

Then, ENTER:

![div complete.png](https://gallon.me/images/20241010_div_complete.png)

That works with any [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements).  It gets even better, though.  You can quickly generate CSS and other HTML attributes.

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

![span purple.png](https://gallon.me/images/20241010_span_purple.png)

ENTER completes it to:

![span purple complete.png](https://gallon.me/images/20241010_span_purple_complete.png)

Similarly, adding an `id=` attribute to an element:

![span purple id.png](https://gallon.me/images/20241010_span_purple_id.png)

ENTER completes to:

![span purple id complete.png](https://gallon.me/images/20241010_span_purple_id_complete.png)

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

![div class id.png](https://gallon.me/images/20241010_div_class_id.png)

ENTER completes to:

![div class id complete.png](https://gallon.me/images/20241010_div_class_id_complete.png)

You can write these things the way that [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors) are written.

![CSS selectors.png](https://gallon.me/images/20241010_css_selectors.png)

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

![div purple span cyan.png](https://gallon.me/images/20241010_div_purple_span_cyan.png)

ENTER completes to:

![div purple span cyan complete.png](https://gallon.me/images/20241010_div_purple_span_cyan_complete.png)

You can nest all of your elements similarly:

![header nav ul li.png](https://gallon.me/images/20241010_header_nav_ul_li.png)

Becomes:

![header nav ul complete.png](https://gallon.me/images/20241010_header_nav_ul_complete.png)

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

![header nav ul li 3.png](https://gallon.me/images/20241010_header_nav_ul_li_3.png)

Becomes:

![header nav ul li 3 complete.png](https://gallon.me/images/20241010_header_nav_ul_li_3_complete.png)

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

![header nav ul li 3 text.png](https://gallon.me/images/20241010_header_nav_ul_li_3_text.png)

Becomes:

![header nav ul li 3 text complete.png](https://gallon.me/images/20241010_header_nav_ul_li_3_text_complete.png)

Add numbers to those list items:

![header nav ul li 3 text 1 2 3.png](https://gallon.me/images/20241010_header_nav_ul_li_3_text_1_2_3.png)

Becomes:

![header nav ul li 3 text 1 2 3 complete.png](https://gallon.me/images/20241010_header_nav_ul_li_3_text_1_2_3_complete.png)

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.

![zero padded.png](https://gallon.me/images/20241010_zero_padded.png)

Becomes:

![zero padded complete.png](https://gallon.me/images/20241010_zero_padded_complete.png)

Add sibling elements using the `+` operator.

![add sibling elements.png](https://gallon.me/images/20241010_add_sibling_elements.png)

Becomes:

![add sibling elements complete.png](https://gallon.me/images/20241010_add_sibling_elements_complete.png)

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.

![group elements.png](https://gallon.me/images/20241010_group_elements.png)

Becomes:

![group elements complete.png](https://gallon.me/images/20241010_group_elements_complete.png)

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:

![combo.png](https://gallon.me/images/20241010_combo.png)

Which becomes:

![combo complete.png](https://gallon.me/images/20241010_combo_complete.png)

Building Forms using Emmet