Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too. Start learning Emmet with the abbreviation syntax and available actions.

Visual Formatting pos position: relative; pos:s position:static; pos:a position:absolute; pos:r position:relative; pos:f position:fixed; t top:; t:a top:auto; r right ...

Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ …

div+div>p>span+em^^bq <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

Since Emmet is mostly used for writing HTML/XML tags, abbreviation definition uses XML format to describe element. Emmet parses abbreviation definition and retrieves the following data:

Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation.

Wrap with Abbreviation A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair” to wrap context element.

You don’t want to write CSS selectors and transform them to CSS selectors, right? The only thing Emmet can do for you is to provide shorthands for CSS properties, but editors with native snippets and autocomplete can help you way better. Actually, Emmet has something to offer. For CSS syntax, Emmet has a lot of predefined snippets for properties.

syntaxProfiles.json Output profiles are used to define how generated HTML content should look like. For example, when you expand br abbreviation, Emmet may produce one of the following tag: <br> — HTML notation <br /> — XHTML notation <br/> — XML notation Emmet tries to automatically detect output profile for current document.

As you can see from the example above, Emmet looks at the parent tag name every time you’re expanding the abbreviation with an implicit name. Here’s how it resolves the names for some parent elements: li for ul and ol tr for table, tbody, thead and tfoot td for tr …