Emmet: What is Emmet? The Ultimate Shorthand Engine for…

Emmet is like the "auto-complete shorthand" for HTML and CSS — type a few characters, press Tab, and watch them instantly expand into full code.

1. What You'll Learn

• What Emmet is — and what it isn't
• Core capabilities: HTML abbreviations, CSS abbreviations, editor actions
• Emmet vs. hand-coding: speed, error rate, learning curve
• When and where to use Emmet: editor choice, file type support
• Roadmap preview for the remaining 17 lessons

2. A Front-End Developer's Real Story

(1) Pain Point: Hand-Coding HTML is Too Slow

Alice is a front-end developer, recently tasked with revamping her company's homepage. Every time she writes a navigation bar, she ends up typing over 30 lines of HTML by hand: a ul containing 5 li elements, each nesting an a tag. After the nav, there's a carousel with 6 div slides, each wrapping an image and text. By the end of the day, her fingers are sore — a 120-line HTML page took her a full 40 minutes. Then comes the CSS: margin: 10px 20px, padding: 5px, font-size: 16px — every line requires typing the full property name and semicolons. Alice thinks to herself: half my coding time is spent on "typing." Can't the editor just auto-complete this for me?

(2) Emmet's Solution

Emmet's answer is simple: compress common HTML/CSS patterns into abbreviations, and let the editor expand them into full code instantly. After learning Emmet, Alice writes that same 30-line navigation bar with just 16 characters:

ul.nav>li.item*5>a{Link $}

She presses Tab, and the editor instantly expands it into 30 lines of complete HTML. Need 6 carousel slides? One line: div.slider>div.slide*6>img. Writing CSS? m10-20 auto-expands to margin: 10px 20px, fz16 becomes font-size: 16px. A page that used to take 40 minutes now takes Alice just 12.

(3) Benefits

Emmet delivers immediate, tangible gains for front-end developers: HTML writing speed increases 3-5x, CSS speed 2-3x. Mistakes like missing closing tags or mismatched attribute quotes — common when hand-coding — drop to nearly zero because Emmet generates everything automatically. More importantly, developers can focus on structure and style design instead of repetitive keystrokes. The learning investment is minimal: build your first impression in 5 minutes with this lesson, then spend 5-10 minutes per lesson on each of the remaining 17 to master one core concept at a time. After completing all 18 lessons, Alice writes an entire e-commerce homepage in under 30 minutes — down from 2 hours.

3. Core Definition of Emmet

Emmet (formerly Zen Coding) is an abbreviation expansion engine for HTML and CSS, first released by Sergey Chikuyonok in 2009 and officially renamed Emmet in 2013. It parses CSS-selector-like abbreviation strings and expands them in real time into complete HTML or CSS code, integrated into mainstream editors like VSCode, WebStorm, and Sublime Text.

Tip: Emmet is not a new programming language or framework. It is an editor plugin — at its core, it translates "abbreviation strings" into "complete code."

4. What Emmet Can Do

Emmet's capabilities fall into four categories: HTML abbreviations, CSS abbreviations, editor actions, and combined usage. Let's look at a few examples to build intuition.

(1) HTML Abbreviations

HTML abbreviations are Emmet's most-used feature. You type a CSS-selector-like abbreviation, press Tab, and it immediately expands into a complete HTML tag tree.

▶ Example: Basic Tag Abbreviation (Difficulty: ★)

Abbreviation:

ul.nav>li.item*5>a{Link $}

Expands to:

<ul class="nav">
  <li class="item"><a href="">Link 1</a></li>
  <li class="item"><a href="">Link 2</a></li>
  <li class="item"><a href="">Link 3</a></li>
  <li class="item"><a href="">Link 4</a></li>
  <li class="item"><a href="">Link 5</a></li>
</ul>

Output:

The browser renders an unordered list with 5 linked list items. The `$` symbol is automatically replaced with an incrementing counter from 1 to 5.

(2) CSS Abbreviations

CSS abbreviations are Emmet's other core strength. Emmet borrows initials from CSS property names, compressing common properties and values into short strings.

▶ Example: CSS Abbreviation Preview (Difficulty: ★)

Abbreviation:

m10-20

Expands to:

margin: 10px 20px;

Abbreviation:

p10 fz16

Expands to:

padding: 10px;
font-size: 16px;

Output:

`m` is the first letter of `margin`, `10-20` means 10px top/bottom and 20px left/right. `p` abbreviates `padding`, `fz` abbreviates `font-size`. Detailed CSS abbreviation rules are covered in lessons 11-13.

(3) Editor Actions

Emmet is not just "type abbreviation → expand code." It also provides a set of editor actions that make cursor navigation, code wrapping, and balance matching accessible with a single keystroke.

▶ Example: Expand Abbreviation Action (Difficulty: ★)

Open any .html file in VSCode, type div.container>ul>li*3, then:

# Step 1: Type the abbreviation
div.container>ul>li*3

# Step 2: Press Tab (default keybinding)
# Triggers the "Expand Abbreviation" action

# Step 3: The editor expands it to:
# <div class="container">
#   <ul>
#     <li></li>
#     <li></li>
#     <li></li>
#   </ul>
# </div>

# Step 4: The cursor jumps to the first <li></li>
# You can start typing immediately

Output:

One line of abbreviation instantly becomes 6 lines of complete HTML, with the cursor positioned at the first editable spot — no manual clicking required. Detailed Actions usage is covered in lessons 14-16.

(4) Combined Demo

Combine HTML abbreviations + CSS abbreviations + editor actions, and you can write a complete login form in a single line. Here's a simplified example:

▶ Example: A Complete Login Form (Difficulty: ★★)

HTML Abbreviation:

form#login>(input[type=text name=user placeholder="Username"])+(input[type=password name=pwd placeholder="Password"])+(button.btn{Login})

Expands to:

<form id="login">
  <input type="text" name="user" placeholder="Username">
  <input type="password" name="pwd" placeholder="Password">
  <button class="btn">Login</button>
</form>

Matching CSS Abbreviation:

#login{w400 bg:#f5f5f5 p20}
.btn{bg:#3b82f6 c:#fff bd:none p10-20 cur:pointer}

Expands to:

#login {
  width: 400px;
  background: #f5f5f5;
  padding: 20px;
}
.btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Output:

The browser renders a 400px-wide login card with two input fields and a blue login button. From abbreviation input to a fully functional form takes just 2 steps (one HTML line + one CSS line), about 5 seconds.

5. Learning Path Preview

This tutorial has 18 lessons across 6 phases:

After all 18 lessons, you'll be able to build complex HTML structures from a single abbreviation line, write common CSS in shorthand, and boost your editing speed 3-5x with 5 core actions.

❓ よくある質問

📖 まとめ

• Emmet is an HTML/CSS abbreviation expansion engine, released in 2009, integrated into mainstream editors
• Core capabilities: HTML abbreviations (CSS-selector-style shorthand) + CSS abbreviations (property name initials) + editor actions
• Compared to hand-coding: 3-5x faster, near-zero error rate, but requires memorizing ~8 core operators
• Combined usage: one line HTML abbreviation + one line CSS abbreviation = a login form in 5 seconds
• The tutorial spans 18 lessons across 6 phases; this is lesson 1 of the getting-started phase. Subsequent lessons dive deeper into each operator and use case

📝 練習問題

1. Basic (Difficulty: ★): Open your preferred editor, create a new .html file, type div and press Tab. Record the result. Then try div.box and press Tab again. Compare the two expansions.
2. Intermediate (Difficulty: ★★): Type the abbreviation ul>li*3>a{Item $} in your editor, press Tab, and observe the result. Then change *3 to *6 and re-expand. Record the differences.
3. Challenge (Difficulty: ★★★): Use a single Emmet abbreviation to write the complete HTML structure of a homepage containing a navigation bar, a carousel, 3 cards, and a footer (CSS not required). Take 4 screenshots showing before and after expansion.

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて