How to Use Emmet Abbreviations to Write HTML Faster in VS Code

Typing HTML by hand is slow and repetitive. Every element needs an opening tag, a closing tag, attributes typed in the right order, and endless copying when a list has ten items. Emmet removes almost all of that work. It is built into VS Code, needs no installation, and turns tiny abbreviations into complete chunks of HTML. Type a few characters, press one key, and a whole structure appears, perfectly indented.

This guide covers the abbreviations that save the most time, from single elements to full page skeletons and long lists, plus how to wrap existing text and how to use Emmet in CSS and other file types.

Quick Answer

To use Emmet in VS Code, type a short abbreviation such as ul>li*5 in an HTML file and press Tab (or Enter when the suggestion appears). Emmet expands it into a full list with five items. Combine element names with > for children, + for siblings, .class and #id for attributes, * to repeat, and $ for automatic numbering, and you can generate most page structures in one line.

Your First Expansion: Elements, Classes and IDs

Start with the basics. Type any tag name and press Tab:

• div becomes a complete <div></div> pair with the cursor inside.
• p.intro creates a paragraph with class="intro".
• div#header creates a div with id="header".
• span.note.small adds two classes at once.
• a[href="about.html"] adds a custom attribute in square brackets.
• p{Hello} puts the text Hello inside the paragraph.

If you type only a class, like .card, Emmet assumes you want a div, because that is the most common case. Inside a ul, typing .item cleverly produces an li instead, since Emmet understands the context.

Nesting and Siblings: Building Real Structures

The real speed comes from describing a whole tree in one line. Two operators do most of the work:

• > means child of: nav>ul>li builds a list inside a nav element.
• + means sibling: header+main+footer creates three sections in a row.
• Parentheses group parts together: header>(nav>ul>li*3)+footer keeps the footer outside the header’s list.
• ^ climbs one level up, useful in long chains.

A realistic example: section.cards>article.card*3>h2+p expands into a section holding three article cards, each with a heading and a paragraph. Writing that by hand takes minutes; the abbreviation takes seconds. When you are done, features such as previewing your HTML live with the VS Code Live Server extension let you watch the generated structure render as you refine it.

Repetition and Numbering with * and $

The * operator repeats an element as many times as you ask: li*10 gives you ten list items, ideal for menus and galleries while you prototype. Add a dollar sign where a number should change, and Emmet counts for you. li.item$*4 produces classes item1, item2, item3 and item4. Use two dollar signs, $$, for padded numbers like 01, 02, and add @3 after the dollar sign to start counting from 3 instead of 1. This is perfect for placeholder content such as img[src="photo$.jpg"]*5.

The Two Abbreviations Everyone Should Know

First, typing ! and pressing Tab in an empty HTML file generates a complete HTML5 skeleton with the doctype, head, meta tags and body, ready to fill in. Second, typing lorem generates a paragraph of filler text, and lorem10 generates exactly ten words. Combine them, as in ul>li*4>lorem3, and you get an instant list of short filler items for layout testing. The official Emmet cheat sheet lists every operator and abbreviation when you want to go further.

Wrap Existing Content with Emmet

Emmet is not only for new code. Select existing lines, open the Command Palette, and run Emmet: Wrap with Abbreviation. Type something like ul>li* and each selected line becomes a list item inside a new list, which turns a pasted list of names into proper markup in one step. The same command wraps a block of text in a div or a paragraph selection in a link, saving tedious manual editing.

Using Emmet in CSS and Other Languages

Emmet also works in CSS files with property shortcuts: m10 becomes margin: 10px;, df becomes display: flex;, and jc:c becomes justify-content: center;. It works out of the box in HTML, CSS, JSX and several other languages. For file types where it does not trigger automatically, such as some templating languages, you can map them in settings with emmet.includeLanguages, and the VS Code page on Emmet support in VS Code explains the available options, including how to turn suggestions off if they ever get in your way.

Common Mistakes to Avoid

• Pressing Tab in the wrong file type. In a plain text or Markdown file, Tab just indents. Emmet needs a supported language mode, shown in the bottom-right corner of the editor.
• Leaving spaces in an abbreviation. ul > li will not expand; abbreviations must be one unbroken string like ul>li.
• Forgetting that Tab can be taken over. If Tab indents instead of expanding, check the setting editor.tabCompletion and accept the Emmet suggestion with Enter instead.
• Trying to generate everything at once. Build big layouts in a few medium abbreviations; giant one-liners are hard to fix when one operator is wrong.

A Worked Example: A Full Page Section in One Line

To see how the pieces combine, imagine you need a pricing section with three plans, each with a heading, a price and a short line of text. Typed by hand that is over twenty tags. As one abbreviation it looks like this:

section.pricing>div.plan*3>h3{Plan $}+p{Short plan summary}

That example is a little dense, so here is a friendlier real-world one: main>section.hero>h1{Welcome}+p.lead{Browse our latest guides}+a.btn[href="guides.html"]{See guides}. Expanded, it produces a main element containing a hero section with a heading, a lead paragraph and a button-style link, all correctly nested and indented, with your cursor placed where you will type next. The pattern to copy is simple: describe the parent, add children with >, repeat with *, name classes as you go, and drop text into curly braces. After a week of daily use, you will stop translating in your head and start thinking directly in abbreviations, which is when the real speed arrives.

Conclusion

Emmet turns HTML writing from typing into describing. Learn the handful of operators, >, +, *, $, classes, IDs and text in curly braces, and most everyday structures become a single line of abbreviation. Add the ! skeleton, lorem filler and Wrap with Abbreviation, and both new pages and messy pasted content take shape in a fraction of the time.

Frequently Asked Questions

Do I need to install Emmet in VS Code?

No. Emmet is built into VS Code and works immediately in HTML, CSS and several related languages. There is nothing to install, although settings let you extend it to extra file types.

Why does pressing Tab not expand my abbreviation?

Usually the file is in the wrong language mode, or the abbreviation contains a space or an error. Check the language shown in the status bar, remove spaces, and try accepting the suggestion popup with Enter instead of Tab.

How do I create a full HTML page skeleton quickly?

Type ! in an empty HTML file and press Tab. Emmet generates the doctype, html, head with meta tags, and an empty body, ready for your content.

Can Emmet number items automatically?

Yes. Put a $ where the number belongs, such as li.item$*5, and Emmet counts 1 to 5 across the repeated elements. $$ pads the numbers, and $@3 starts counting from 3.

Does Emmet work for CSS too?

Yes. In a CSS file, short abbreviations like m10 for margin and df for display: flex expand into full declarations, which speeds up styling just as much as markup.