Deploying Emmet: The “Math” Behind Instant HTML

Every year, I passively ease my students little by little into using Emmet. This is also why we use Codium, VS code or Sublime Text. There are others that also can use it too.

Formerly known as Zen Coding, Emmet is a plugin built natively into VS Code and most modern editors. It treats HTML like a series of mathematical formulas, allowing you to “calculate” your structure rather than typing it manually. In this guide, we’re going to break down the syntax so you can start writing HTML FAST.

1. The Relationship Operators

On the surface level. As you should know by now, if you simply type a tag name into the editor without the < > it will make them for you, so simply typing “div” and pressing enter will make “<div>”.

The foundation of any Emmet formula is how elements relate to one another.

The Child: >

Use the “greater than” sign to nest an element inside another.

div>p>span

The Sibling: +

Use the “plus” sign to place elements side-by-side.

header+main+footer

The Climb-Up: ^

If you are deep inside a nested structure and want to “climb back up” to add a sibling to a parent, use the caret.

div>p>span^footer

(In this case, the footer becomes a sibling to the P, not the Span).

Multiplication (*): Repeats an element multiple times.

ul>li*3 → Generates a list with three <li> tags.

Grouping (()): Groups sub-trees for complex structures.

div>(header>nav)+footer → Creates a div containing a header (with nav) and a footer as siblings.

2. Defining Identity: Classes, IDs, and Attributes

You don’t need to type out class=”” ever again. Emmet uses CSS-style selectors to define attributes. You could simply type “.classname” or “#idname” to make a div with the desired class or id name.

.classname

#idname

Classes and IDs

div.container+section#hero

Custom Attributes

Use square brackets for things like src, href, or alt tags.

img[src="logo.png" alt="Company Logo"]

Implicit Tags

If you don’t specify a tag (like div or section), Emmet assumes you want a div.

.wrapper>.content

3. Multiplication and Logic

This is where the “formula” feel really kicks in.

Multiplication: *

Need a list with 10 items? Don’t copy-paste.

ul>li*10

Grouping: ()

To keep your formulas clean and ensure the “math” executes in the right order, use parentheses.

div>(header>nav)+footer

4. Automatic Numbering and Text

You can even populate your HTML with content as you build it.

The Item Counter: $

If you want to number your classes or items sequentially, use the dollar sign.

ul>li.item-$*5

Result: Five list items with classes item-1 through item-5.

Inserting Text: {}

To add actual words inside your tags, use curly braces.

button{Click Here!}

5. The “Master Formula”

An example of a sort of boilerplate formula

html>head+body>.header+.nav+.main+.footer

Here is exactly what that formula tells the editor to do:

html>: Create the root HTML tag.

head+body: Inside the HTML, create two siblings: a head and a body.

>.header+.nav+.main+.footer: Inside that body, create four div elements with the respective classes of header, nav, main, and footer.

6. Pro Cheat Sheet: Common Formulas

Copy and try these in VS Code to see what they build

Quick Table: table>tr*3>td*3 (A 3×3 grid)

Navigation Bar: nav>ul>li*4>a{Link $}

Article Layout: article>h2{Title}+p*2>lorem (Creates a title and two paragraphs of filler text).

The “Boilerplate”: Type ! and hit Tab to generate a full HTML5 document structure instantly.

As you can see, Emmet is a quick way to deploy HTML, with practice you can deploy structure and even content with surgical precision with peak efficenty.

Categorised in: Blog

This post was written by amax