Introduction

Bhai — Ye single post me pura Emmet ka reference hai. Students ko recommend kar: VS Code me Emmet default enabled hota hai. Type kar, phir Tab dabao — aur HTML seedha expand ho jayega.

Is post me maine simple examples, advanced CSS shorthand, aur ready-to-use components diye hain (blog skeleton, navbar, footer). Elementor me agar tu HTML widget use karega to ye HTML code waha paste kar sakta hai for demo (but Emmet expand works only in editors like VS Code).

Basic Shortcuts

Common tags, class/id, nesting and multiplication.

div>ul>li*3
--> <div><ul><li></li>...3 times
        

div.box    -> <div class="box"></div>
div#main   -> <div id="main"></div>
        

div.item-$*3  -> item-1, item-2, item-3
ul>li*3{Item $}
        

Intermediate

Text insertion, lorem, grouping.

h1{Hello World}   -> <h1>Hello World</h1>
lorem10           -> 10 words of lorem ipsum
p*3>lorem5      -> 3 paragraphs, each 5 words
      

div>(header>ul>li*2)+footer
--> create header with 2 list items and footer
      

Advanced / CSS Emmet

Shorthand helpers for CSS in Emmet (works in style block or CSS file).

Ready Examples — Copy & Expand in VS Code

Type these abbreviations in VS Code and press Tab to expand. (Below I also show the expanded HTML so you can paste directly in Elementor.)

1) Blog Post Skeleton (Emmet)

div.blog-post>(h1.title{My Blog Title}+p.meta{Author | Date}+div.content>p{Lorem ipsum...}+img[src="post.jpg" alt="Blog Image"]+p{Read more...})+div.elementor-section>(div.elementor-container>div.elementor-column*2>div.elementor-widget{Widget $})
    

Expanded HTML (paste into Elementor HTML widget)

<div class="blog-post">
  <h1 class="title">My Blog Title</h1>
  <p class="meta">Author | Date</p>
  <div class="content">
    <p>Lorem ipsum dolor sit amet...</p>
    <img src="post.jpg" alt="Blog Image">
    <p>This is blog description.</p>
  </div>
</div>
<div class="elementor-section">...</div>
    

2) Navbar (Emmet)

nav.nav>ul.menu>li*4>a{Link $}
    

Expanded HTML

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

3) Footer (Emmet)

footer.site-footer>div.container>p{© 2025 YourName} + ul.social>li*3>a
    

Expanded HTML

<footer class="site-footer">
  <div class="container">
    <p>© 2025 YourName</p>
    <ul class="social">
      <li><a href="">...</a></li>
    </ul>
  </div>
</footer>
    

How to Use (VS Code & Elementor)

1. Open VS Code and create a new .html file.
2. Type Emmet abbreviation (examples above) and press Tab — it will expand to HTML.
3. Copy the expanded HTML and paste into Elementor → HTML widget on the page.
4. For CSS, add styles in your theme’s Custom CSS or inside Elementor’s Custom CSS (Pro) or in the theme customizer.

Printable Cheatsheet (Quick)

Use this cheatsheet in class — copy it to Google Docs or export as PDF for students.