Emmet: Lorem Ipsum and Implicit Tag Details

Through the first 9 lessons, you have mastered all of Emmet's HTML structure + text + numbering operators, and can already write HTML with arbitrary nesting, arbitrary attributes, arbitrary numbering, and arbitrary content. But two "keystroke-saving" power tools remain unused—Lorem Ipsum auto-generated placeholder text and the complete implicit tag name rules. The former lets you generate 30 words of Lorem text in 1 second (no hand-typing), while the latter lets you omit li/tr/td/option tag names in ul/table/select parent contexts. This lesson explains both mechanisms thoroughly, serving as the conclusion of Phase 3.

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.

Finally, there was the table section—a 5-row × 4-column "data display table." She thought: every row and column in a table looks the same—can I just write class names (like .row, .cell) and have Emmet auto-fill <tr>, <td>? The answer is yes (Lesson 06 covered this), but she also wanted "inside select, just write .opt and it auto-becomes <option>," and "inside dl, just write .term and it auto-becomes <dt>"—scenarios she hadn't studied systematically yet.

(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 📖 Display only

📋 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 📖 Display only

📋 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 📖 Display only

📋 Copy

Breakdown: (p>lorem)*3 repeats the p>lorem template 3 times, each time generating independent 30-word Lorem text (Emmet's lorem is a generator, not fixed text). The 3 paragraphs each draw from different paragraphs in the Lorem Ipsum library, so the content is non-repeating. This is equivalent to p*3>lorem—Emmet parsing p*3>lorem also repeats p 3 times, inserting independent lorem each time. The parentheses make the semantics clearer: repeat the entire paragraph template 3 times inside the group.

▶ 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 📖 Display only

📋 Copy

Breakdown: Three abbreviations showcase the three main battlefields of implicit tags. ul>.item*3: ul is a list parent; omitting the tag name auto-infers li, and 3 li elements share class="item". table>(.row>.cell*3)*2: in table context, .row is implicitly tr, .cell is implicitly td—a 2-row × 3-column table without writing any tr/td explicitly. select>option*3: in select context, omitting the tag name auto-infers option. Note: select defaults with name="" and id="" (Emmet presets), and option defaults with value=""—these are the minimal attributes for HTML5 tags.

▶ 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 📖 Display only

📋 Copy

Breakdown: This example combines all Phase 1–3 operators—# (id), > (nesting), + (sibling), . (class), [attr] (attributes), {} (text content), () (grouping). form#login adds id="login" to the form (form defaults with action=""); inside the parentheses are 3 sibling elements: input[type=text name=user], input[type=password name=pwd], button{Login}. The button defaults without a type attribute (HTML5 buttons default to submit behavior, though explicit type is clearer). This is the standard Phase 3 comprehensive example, demonstrating all of Emmet's capabilities in form scenarios.

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 📖 Display only

📋 Copy

Breakdown: This example is the complete Phase 3 comprehensive—simultaneously invoking the Lorem generator, implicit tags (ul→li), text content {Blog Title: Emmet Boosts Speed 5x}, and numbering $ (tag-1 through tag-5). The parentheses are nested 3 levels deep: the outer (header>...) + (article>...) + (aside>...) makes the three blocks siblings within section; the inner (p>lorem)*3 gives the article 3 independent Lorem paragraphs; the innermost (li.tag*5>a{#tag-$}) gives each li an a element whose id and text both carry $ numbering. The entire blog article page goes from 30+ hand-written HTML lines to 1 line of Emmet.

❓ FAQ

📖 Summary

• 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">

📝 Exercises

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.
3. Challenge (Difficulty ⭐⭐⭐): Write a complete "Blog Homepage" skeleton containing: (a) a header with a logo + 3 navigation links (using nav>ul>li*3>a{Nav $}); (b) a main with 3 article cards, each having a title, author, and 3 Lorem paragraphs; (c) an aside with a tag cloud (5 tags, using ul.tag-cloud>li.tag*5>a{#tag-$}); (d) a footer with copyright {© 2026 web-tutorial.com}. Write it all in one Emmet line (using + to connect blocks, or parentheses for grouping), verify the expansion, and compare the time difference between hand-writing 50+ HTML lines vs. one Emmet line.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us