# Emmet Tutorial
> Learn how to use Emmet to write HTML incredibly fast with abbreviations that expand into full markup, built right into VS Code and available for every editor.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-06-27 | Topics: [Tools](https://flaviocopes.com/tags/tools/) | Canonical: https://flaviocopes.com/emmet/
- [Create an HTML file from scratch](#create-an-html-file-from-scratch)
- [> and +](#-and-)
- [Level up](#level-up)
- [Multipliers](#multipliers)
- [Group an expression to make it more readable](#group-an-expression-to-make-it-more-readable)
- [`id` and `class` attributes](#id-and-class-attributes)
- [Adding an unique class or id](#adding-an-unique-class-or-id)
- [Other attributes](#other-attributes)
- [Adding content](#adding-content)
- [Adding an incremental number in your markup](#adding-an-incremental-number-in-your-markup)
- [A reference for tags used in the page `head`](#a-reference-for-tags-used-in-the-page-head)
- [A reference for common tags](#a-reference-for-common-tags)
- [A reference for semantic HTML tags](#a-reference-for-semantic-html-tags)
- [A reference for form elements](#a-reference-for-form-elements)
---
Emmet is a pretty cool tool that helps you write HTML very very fast.
It's like magic.
Emmet is not something new, it's been around for years and there is a plugin for every editor out there. On [VS Code](https://flaviocopes.com/vscode), Emmet is integrated out of the box, and whenever the editor recognizes a possible Emmet command, it will show you a tooltip.
If the thing you write has no other interpretations, and VS Code thinks it must be an Emmet expression, it will preview it directly in the tooltip, nicely enough:
Yet I didn't really know how to use it in all its intricacies until I set out to research and write about it, so I had to learn how to use it in depth.
I want to use it in my day to day work, so here's what I learned about it.
## Create an HTML file from scratch
Type `!` and you will get a basic HTML boilerplate to work with:
```html
Document
```
## > and +
- `>` means child
- `+` means sibling
```html
nav>ul>li
```
```html
div+p+span
```
You can combine those to perform more complex markups. VS Code is so nice to show a preview when the Emmet snippet has no
```html
ul>li>div+p+span
```
## Level up
Using `^` you can level up from any time you used `>` to create a children:
```html
ul>li>div+p^li>span
```
You can use it multiple times to "up" more than once:
```html
ul>li>div+p^^p
```
## Multipliers
Any tag can be added multiple times using `*`:
```html
ul>li*5>p
```
## Group an expression to make it more readable
With multiplication in the mix, things start to get a bit more complex. What if you want to multiply 2 items? You group them in parentheses `( )`:
```html
ul>li>(p+span)*2
```
## id and class attributes
`id` and `class` are probably the most used attributes in HTML.
You can create an HTML snippet that includes them by using a CSS-like syntax:
```html
ul>li>p.text#first
```
You can add multiple classes:
```html
ul>li>p.text.paragraph#first
```
## Adding an unique class or id
`id` must be unique in your page, at any time.
`class` can be repeated, but sometimes you want an incremental one for your elements.
You can do that using `$`:
```html
ul>li.item$*2>p
```
## Other attributes
Attributes other than class and id must be added using `[]` parentheses:
```html
ul>li.item$*2>p[style="color: red"]
```
You can add multiple attribute at once:
```html
ul>li.item$*2>p[style="color: red" title="A color"]
```
## Adding content
Of course you can also fill the HTML with content:
```html
ul>li.item$*2>p{Text}
Text
Text
```
## Adding an incremental number in your markup
You can add an incremental number in the text:
```html
ul>li.item$*2>p{Text $}
Text 1
Text 2
```
That number normally starts at 1, but you can make it start at an arbitrary number:
```html
ul>li.item$@10*2>p{Text $@3}
Text 3
Text 4
```
## A reference for tags used in the page `head`
| Abbreviation | Rendered html |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| link | `` |
| link:css | `` |
| link:favicon | `` |
| link:rss | `` |
| meta:utf | `` |
| meta:vp | `` |
| style | `` |
| script | `` |
| script:src | `` |
## A reference for common tags
| Abbreviation | Rendered html |
| ------------ | ----------------------- |
| img | `` |
| a | `` |
| br | ` ` |
| hr | `` |
| c | `` |
| tr+ | `