Emmet: Your First Emmet Abbreviation

Learning div, p, and h1 abbreviations is just the first step — Emmet's "implicit tag names" are the real productivity magic: .box expands without ever typing div.

1. What You'll Learn

• Basic tag abbreviation forms: div p h1 span a and more
• Core rules of implicit tag names
• How omission behavior differs between HTML and CSS contexts
• Abbreviations for class selectors .class and ID selectors #id
• Multiple class chaining .btn.btn-primary and combined usage in practice

2. A Front-End Developer's Real Story

(1) Pain Point: Typing Every div by Hand Wastes Time

Alice is building a card grid for an e-commerce homepage. She needs 3 cards, each containing an image, a title, a description, and a button. Hand-coding each card looks like this:

<div class="card">
  <img src="" alt="">
  <h3 class="title"></h3>
  <p class="desc"></p>
  <button class="btn">Buy Now</button>
</div>

One card is 5 lines, so 3 cards make 15 lines; 6 cards would be 30 lines. Every div, every class, every tag has to be typed repeatedly. Alice does the math: 30 lines of HTML takes her 6 minutes — and each time she hand-codes, she risks missing a closing tag or mismatching quotes.

(2) Emmet's Solution

Emmet's answer comes in two parts. First, basic tags can be omitted — in an HTML context, .box is equivalent to div.box, saving you from typing the most common tag name. Second, repeating structures use the * multiplication operator to write once and generate many. Alice rewrites the card grid with Emmet:

.card*3>img+h3.title+p.desc+button.btn{Buy Now}

One abbreviation line generates all 3 cards instantly. The card class is automatically applied to a div (since div was omitted), and the button text {Buy Now} is auto-filled. 30 lines of HTML become 1 line of abbreviation — 6 minutes of work shrinks to 5 seconds.

(3) Benefits

Basic tags + implicit tag names form the first rung of the Emmet productivity ladder. After mastering them, Alice writes card grids in 5 seconds instead of 6 minutes — a 70x efficiency gain. After this lesson, you'll be able to build 80% of common HTML structures with a single Emmet abbreviation line.

3. Basic Tag Abbreviations

HTML tags can be used directly as abbreviations. Here are the most common ones:

Tip: Emmet automatically fills in essential attributes for certain tags (e.g., a auto-gets href="", input auto-gets type="text") — no need to type them yourself.

4. Implicit Tag Names

Implicit tag names are Emmet's core productivity mechanism. When you type .box, Emmet automatically infers that you want a div — no need to explicitly write div.box. This mechanism behaves differently in HTML and CSS contexts, so understanding each is important.

Key Point: Omitting a tag name in HTML defaults to div, but inside certain parent elements it auto-switches (e.g., .item inside ul becomes li, .row inside table becomes tr, .opt inside select becomes option). The complete implicit rules are covered in lesson 6.

5. Hands-On Examples

The following 5 examples cover all core scenarios for basic tags + implicit tag names. Master these and you can write 80% of common HTML structures.

▶ Example: div Expands to <div></div> (Difficulty: ★)

The simplest Emmet abbreviation: type a tag name directly.

Abbreviation:

div

Expands to:

<div></div>

Output:

A single div container with the cursor automatically placed inside the tag, ready for content. `div` is the most-used HTML tag, and Emmet accepts tag names directly as abbreviations.

▶ Example: .container Implicit div (Difficulty: ★)

In an HTML context, omitting the tag name defaults to div.

Abbreviation:

.container

Expands to:

<div class="container"></div>

Compare with explicit div.container:

div.container

Expansion result:

<div class="container"></div>

Output:

`.container` and `div.container` are completely equivalent. Since `div` is the highest-frequency HTML tag, the implicit mechanism can cut your typing by 50%. Same goes for `#main`: omitting the tag defaults to `div`, expanding to `<div id="main"></div>`.

▶ Example: #header.nav (Difficulty: ★)

ID selectors # and class selectors . can be mixed on the same tag.

Abbreviation:

#header.nav

Expands to:

<div id="header" class="nav"></div>

Output:

The tag gets both `id="header"` and `class="nav"` attributes. `#` always means ID, `.` always means class — order doesn't affect the result. You can also add an explicit tag name: `header#top.nav` expands to `<header id="top" class="nav"></header>`.

▶ Example: Combining Multiple Classes .btn.btn-primary (Difficulty: ★★)

A single tag can have multiple classes, chained with ..

Abbreviation:

.btn.btn-primary.btn-lg

Expands to:

<div class="btn btn-primary btn-lg"></div>

Advanced: with an explicit tag name:

button.btn.btn-primary.btn-lg{Add to Cart}

Expands to:

<button class="btn btn-primary btn-lg">Add to Cart</button>

Output:

Multiple classes are separated by spaces. Emmet doesn't limit the number of classes — this is especially useful with utility-class frameworks like Tailwind CSS and Bootstrap (e.g., `class="btn btn-primary btn-lg text-center"`).

▶ Example: HTML Context vs. CSS Context (Difficulty: ★★)

The same abbreviation produces completely different results depending on the file context. This is one of the most confusing Emmet behaviors for beginners.

HTML context (.html file):

.m10

Expands to:

<div class="m10"></div>

CSS context (.css file):

.m10

Expands to:

margin: 10px;

Output:

In an HTML file, `.m10` is treated as "a div tag with class m10." In a CSS file, `.m10` is treated as "shorthand for the margin property." Emmet automatically switches modes based on the current file type. HTML context follows the "omit tag name → div" implicit rule; CSS context follows the "omit property name → infer from initials" implicit rule (only `margin` starts with `m`, so inference is direct).

6. Full Example: Combined Three-Column Card Layout

Combine basic tags, implicit tags, the * multiplier, and the > nesting operator to build a common three-column e-commerce card grid.

▶ Example: Three-Column Card Layout (Difficulty: ★★)

Abbreviation:

.container>.row>.col*3>.card>img+h3.title+p.desc+button.btn{View Details}

Expands to:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <img src="" alt="">
        <h3 class="title"></h3>
        <p class="desc"></p>
        <button class="btn">View Details</button>
      </div>
    </div>
    <!-- Repeated 2 more times (col + card repeated 3 times total) -->
  </div>
</div>

Output:

A classic three-column e-commerce card grid: 1 outer container, 1 row, 3 columns (each containing a full card). `*3` applies to `.col`, so `.col` is repeated 3 times; the subtree `.card>img+h3.title+p.desc+button.btn` is automatically duplicated 3 times as each col's children. To apply `*3` directly to `card` instead (resulting in 1 row + 3 full cards), use `.container>.row>.card*3>img+h3.title+p.desc+button.btn{View Details}`. Detailed nesting and multiplication rules are covered in lesson 5.

❓ よくある質問

📖 まとめ

• Basic tags can be used directly as abbreviations: div p h1 span a etc.
• In HTML context, omitting the tag name defaults to div
• Implicit tags switch based on parent context: .item inside ul → li, .row inside table → tr
• Use # for ID, . for class, mixable: #header.nav → <div id="header" class="nav"></div>
• Chain multiple classes with .: .btn.btn-primary.btn-lg
• The same abbreviation can expand completely differently in HTML vs. CSS contexts — the file extension determines the mode

📝 練習問題

1. Basic (Difficulty: ★): In an HTML file, type the abbreviations div, p, h1, and span, pressing Tab after each. Record the results. Then try .box and #main (implicit div abbreviations) and compare all 6 expansions.
2. Intermediate (Difficulty: ★★): Write a single Emmet abbreviation that expands to a grid of 5 cards (each card containing an image, title, paragraph, and button). Explain why *5 should be placed on card and not elsewhere.
3. Challenge (Difficulty: ★★★): Create both an .html file and a .css file. In each file, type the abbreviations .m10, .p20, and #header. Record all 6 expansion results and create a comparison table titled "HTML vs. CSS Context: Emmet Behavior Differences."

Web-Tutorial 技術チーム

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

私たちについて