Emmet: Lorem Ipsum and Implicit Tag Details

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

1. What You Will Learn

• Lorem Ipsum generator: lorem defaults to 30 words, loremN specifies N words
• Multi-paragraph Lorem: p*3>lorem generates 3 paragraphs, each with independent text
• Implicit tag names: auto-switching in ul/ol/table/tr/select/dl parent contexts
• Implicit + class + id: ul>.item → <li class="item">, table>#row1>.cell → <tr id="row1"><td class="cell">
• Implicit rule boundaries: when the parent is not in the whitelist, the default remains div (includes snippets.json customization concept)

2. A Frontend Developer's Real Story

(1) The Pain: Placeholder Text + Repeated Tag Names Slow Development

Alice was implementing a design mockup for a blog template. She needed to display a standard "blog article page"—title, author info, 3 paragraphs of body text, and a sidebar tag cloud. But she didn't know what content to write (the design phase had no real content yet), and she didn't want to fill it with gibberish (which looks fake).

She first tried copying 30 words of Lorem Ipsum text from lipsum.com and pasting it into the first <p>. Then she copied another block (different content) for the second <p>, and pasted. 3 paragraphs meant 3 copy-paste rounds, wasting 3 minutes. Worse: the next day she had to do the same thing again—pure repetitive labor.

Even worse was the sidebar "tag cloud"—15 <a> links, each pointing to #tag-design, #tag-css, and so on. She hand-typed:

<a href="" id="tag-design">#design</a>
<a href="" id="tag-css">#css</a>
<!-- ... 13 more lines -->

15 lines of HTML took 5 minutes.

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

(2) How Lorem + Implicit Tags Solve It

Emmet provides two complementary mechanisms:

Lorem Ipsum generator: Write lorem or loremN in an abbreviation, and Emmet auto-expands it into 30 words (or N words) of Lorem Ipsum. Alice's 3 body paragraphs can be written as:

article>(p>lorem)*3

Three <p> elements, each with 30 words of independent Lorem text (non-repeating).

Complete implicit tag name rules: In specific parent element contexts, omitting the tag name causes Emmet to auto-switch to a reasonable child element tag—inside ul/ol it defaults to li, inside table to tr, inside tr to td, inside select to option, and inside dl to dt/dd. Alice's tag cloud can be written as:

ul.tag-cloud>(li.tag*3>a{#tag-$})

Implicit tags eliminate the need to type 70% of tag names repeatedly.

Alice rewrote the entire blog article page using Lorem + implicit tags:

section.blog>(header>h1{Blog Title: Emmet Boosts Speed 5x}+p.meta{By Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*3>a{#tag-$}))

Alice verified and exclaimed: "3 paragraphs of Lorem went from 3 minutes to 1 second, 15 tag links from 5 minutes to 3 seconds, and tag name typing was reduced by 70%. Emmet's efficiency boost in placeholder text + semantic tag scenarios is 50x or more."

(3) Benefits

Lorem Ipsum and implicit tag rules are Emmet's "keystroke-saving core." The former lets you skip the "copy-paste placeholder text" step, while the latter lets you skip "repeatedly typing common tag names." After this lesson, Alice can write 3 paragraphs of Lorem in 1 second and 15 tag links in 3 seconds. This lesson also concludes Phase 3—the next phase (Phase 4) moves into CSS shorthand, extending Emmet's capabilities from HTML to CSS.

3. Lorem Ipsum Placeholder Text Generator

Lorem Ipsum is the typesetting industry's standard placeholder text, used for layout demonstrations since the 1500s. Emmet has a built-in Lorem generator, accessible using either lorem or lipsum as the keyword (they are functionally identical).

(1) lorem and loremN Shorthand

Key Point: The number immediately following lorem is used directly as the word count parameter (e.g., lorem5 = 5 words). If no number is given, the default is 30 words. Word count is measured by space-separated tokens, not characters. The actual expanded content may vary slightly across editors (VSCode and WebStorm both use the same 30-word base paragraph), but the word count is strictly followed.

(2) Combining Lorem with Other Operators

4. Implicit Tag Names: Complete Rule Summary

Lessons 03 and 06 already introduced the concept of implicit tag names. This lesson systematizes the entire rule set and fills in all common scenarios.

(1) Implicit Tag Quick Reference

Key Point: The table above is the complete set of Emmet's official implicit rules. Beyond these explicit rules, omitting a tag name in any other parent context still defaults to div. This is the binary rule of "contextual implicit vs. default div."

(2) Implicit Rule Common Scenario Comparison

(3) Implicit + class + id Combinations

Implicit tags can be freely combined with .class, #id, and [attr]:

Note: Implicit tags only take effect when the tag name is omitted in the abbreviation. If you explicitly write a tag name (e.g., div.item), the implicit rule does not apply—it will always be <div class="item">. This was emphasized in the Lesson 03 FAQ.

5. Practical Examples

The following 5 examples cover the core scenarios for Lorem and implicit tags—from basic Lorem to specified word counts, from multi-paragraph to implicit + class.

▶ Example: Basic Lorem p>lorem (Difficulty ⭐)

One paragraph, 30 words of Lorem Ipsum—the most-used placeholder by designers.

Abbreviation:

p>lorem

Expansion:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>

Output:

TEXT 📖 参照専用

📋 Copy

Breakdown: lorem is the keyword for Emmet's placeholder text generator. The default output is 30 words (space-separated) of Lorem Ipsum. p>lorem places lorem inside p, resulting in a single 30-word placeholder paragraph. The actual word count may vary slightly by editor implementation (VSCode/WebStorm use the same 30-word base paragraph). For other lengths, use the loremN syntax (e.g., lorem5 = 5 words).

▶ Example: Specified Word Count p>lorem5 (Difficulty ⭐)

5 words of Lorem—suitable for short description placeholders (card subtitles, button tooltips).

Abbreviation:

p>lorem5

Expansion:

<p>Lorem ipsum dolor sit amet.</p>

Output:

TEXT 📖 参照専用

📋 Copy

Breakdown: The 5 in lorem5 is the word count parameter. Emmet outputs exactly 5 words of Lorem (which happen to be "Lorem ipsum dolor sit amet."—the first 5 words of Lorem Ipsum). This length suits short description scenarios: card subtitles, button tooltips, taglines. For longer text but fewer than 30 words, use lorem10, lorem20, etc. There is no hard upper word limit (lorem1000 will also expand), but generating massive amounts of text will slow down editor responsiveness.

▶ Example: Multi-Paragraph Lorem (p>lorem)*3 (Difficulty ⭐⭐)

Three <p> elements, each with independent 30 words of Lorem—blog article body placeholder.

Abbreviation:

(p>lorem)*3

Expansion (excerpt):

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Implicit + class Summary ul>.item*3 + table>(.row>.cell*3)*2 + select>option*3 (Difficulty ⭐⭐)

Three implicit tag scenarios side by side—demonstrating the implicit rules for ul, table, and select parent elements in one example set.

Abbreviation (3 independent expansions):

ul>.item*3

Expansion:

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Abbreviation:

table>(.row>.cell*3)*2

Expansion:

<table>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

Abbreviation:

select>option*3

Expansion:

<select name="" id="">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

▶ Example: Form + Implicit form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login}) (Difficulty ⭐⭐)

A login form written in one line—a combination of implicit + class + id + attributes + text content.

Abbreviation:

form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login})

Expansion:

<form id="login" action="">
  <input type="text" name="user">
  <input type="password" name="pwd">
  <button>Login</button>
</form>

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

6. Complete Example: Blog Article Page + Lorem + Implicit + Numbering

Combine Lorem, implicit tags, {text}, and $ numbering—a complete "blog article page" skeleton written in one line.

▶ Example: Blog Article Page Skeleton (Difficulty ⭐⭐)

Abbreviation:

section.blog>(header>h1{Blog Title: Emmet Boosts Speed 5x}+p.meta{By Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*5>a{#tag-$}))

Expansion:

<section class="blog">
  <header>
    <h1>Blog Title: Emmet Boosts Speed 5x</h1>
    <p class="meta">By Alice · 2026-07-30</p>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
    <p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
    <p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
  </article>
  <aside>
    <ul class="tag-cloud">
      <li class="tag"><a href="" id="tag-1">#tag-1</a></li>
      <li class="tag"><a href="" id="tag-2">#tag-2</a></li>
      <li class="tag"><a href="" id="tag-3">#tag-3</a></li>
      <li class="tag"><a href="" id="tag-4">#tag-4</a></li>
      <li class="tag"><a href="" id="tag-5">#tag-5</a></li>
    </ul>
  </aside>
</section>

Output:

TEXT 📖 参照専用

📋 Copy

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📋 Copy

❓ よくある質問

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📖 まとめ

• lorem defaults to 30 words; loremN specifies N words (e.g., p>lorem5 = 5 words of Lorem)
• lorem is a generator: (p>lorem)*3 expands to 3 independent paragraphs, and can be combined with {text} + $ in one line for an entire page
• Implicit tags auto-switch by parent element: ul→li, table→tr, tr→td, select→option, dl→dt/dd (non-whitelist parents still default to div)
• Implicit rules only take effect when the tag name is omitted; explicitly writing a tag name always takes priority
• Implicit + class/id: ul>.item → <li class="item">, table>#row1>.cell → <tr id="row1"><td class="cell">

📝 練習問題

1. Basic (Difficulty ⭐): Write one-line Emmet abbreviations that expand to: (a) a paragraph p>lorem (30 words of Lorem); (b) an 8-word paragraph p>lorem8; (c) a dropdown select>option*5 (5 options, verifying implicit behavior).
2. Intermediate (Difficulty ⭐⭐): Write a "card grid"—a section containing 6 cards, each with a title, 3-word description, and button. Requirements: (a) description generated with lorem3; (b) title using {Card $} text content + numbering; (c) button using implicit tags + {Details}. Write it all in one Emmet line, and explain why lorem3 and {Card $} don't interfere with each other. QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Web-Tutorial 技術チーム

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

私たちについて