🧩 Emmet

2. 🧩 Emmet#

Emmet is a shorthand syntax that lets you write HTML and CSS faster than ever.
Instead of typing long repetitive markup, you use compact expressions that expand into full code.
This is extremely helpful for prototyping layouts, building templates, or quickly scaffolding repetitive elements.

2.1. 🏁 1. Basic Structure and Relationships#

2.1.1. Introduction#

You’ll use these operators (>, +, ^, ()) almost every time you code HTML.
They describe parent–child and sibling relationships, forming the skeleton of your page.

2.1.2. Syntax Examples#

Child element (>)

ul>li

Expands to:

<ul>
  <li></li>
</ul>

Sibling (+)

h1+p

Expands to:

<h1></h1>
<p></p>

Parent level (^)

div>p>span^a

Expands to:

<div>
  <p><span></span></p>
  <a></a>
</div>

Grouping (())

(div>p)+footer

Expands to:

<div><p></p></div>
<footer></footer>

2.1.3. Real-World Tips#

  • Great for building nested layouts like header > nav > ul > li > a.

  • Use () to manage complex nesting without confusion.

  • Combine > and + to generate both hierarchy and structure at once.

2.1.4. Hands-On Task#

Create a basic website skeleton in one Emmet line:

header>nav>ul>li*3>a{Menu $}^^main>section+aside^footer

Try expanding this in your editor — it generates a clean, ready-to-style HTML template.

2.2. 🧱 2. Attributes, IDs, Classes, and Text#

2.2.1. Introduction#

You’ll often need to assign classes, IDs, or placeholder text.
Emmet’s attribute syntax makes it concise and consistent.

2.2.2. Syntax Examples#

ID and Class

div#main.content.wrapper

Expands to:

<div id="main" class="content wrapper"></div>

Attributes ([])

a[href="https://example.com" target="_blank"]

Expands to:

<a href="https://example.com" target="_blank"></a>

Text Content ({})

button{Click Me}

Expands to:

<button>Click Me</button>

2.2.3. Real-World Tips#

  • Use meaningful IDs only for unique elements.

  • Use multiple classes for reusable styling and avoid overusing IDs.

  • {} is great for inserting placeholder content during prototyping.

2.2.4. Hands-On Task#

Generate a login form header:

header>h1{Welcome}+p{Please sign in to continue}

Then create the form below it:

form>input[type="text" placeholder="Username"]+input[type="password" placeholder="Password"]+button{Login}

2.3. 🔁 3. Repetition and Numbering#

2.3.1. Introduction#

Repetition is key when creating lists, menus, cards, or table rows.
Emmet’s * and $ symbols automate repetitive work.

2.3.2. Syntax Examples#

Repeat (*)

li*3

Creates three <li> tags.

Numbering ($)

li.item$*3

Expands to:

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Padding numbers ($$)

li.item$$*3

Expands to:

<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>

Reverse or custom start (@-, @n)

li.item$@-*3
li.item$@5*3

2.3.3. Real-World Tips#

  • Useful for dynamic component mockups or UI placeholders.

  • Combine $ with attributes or text to create consistent patterns.

  • Great for templating when you plan to replace content dynamically via JS later.

2.3.4. Hands-On Task#

Generate a TOC (Table of Contents) for 6 chapters:

nav>a[href="#chapter$"]{Chapter $}*6

Reference CSS

nav a { display: inline-block; margin: 0 10px; color: #3366cc; }
nav a:hover { text-decoration: underline; }

2.4. 🌐 4. Realistic Page Structures#

2.4.1. Introduction#

Emmet shines in layout scaffolding — generating entire page skeletons with just one line.

2.4.2. Example#

div.container>header>h1{My Site}+nav>ul>li*3>a[href="#"]{Link $}^^main>article>h2{Article Title}+p>lorem20^aside{Sidebar}^footer{© 2025 MySite}

Expands into a complete semantic structure.

2.4.3. Real-World Tips#

  • Use Emmet for wireframing HTML before adding frameworks.

  • Combine lorem with structure to preview layout spacing.

  • Don’t worry about final content — focus on structure first.

2.4.4. Hands-On Task#

Generate a blog layout:

div.blog>article.post$*5>h2{Post $}+p>lorem15

Then wrap it with:

main>div.blog

2.5. 🎨 5. CSS Abbreviations#

2.5.1. Introduction#

Emmet also works in CSS files. Typing shorthand properties expands to complete declarations instantly.

2.5.2. Common Examples#

Shorthand

Output

m10

margin: 10px;

p10-20

padding: 10px 20px;

w100p

width: 100%;

h100vh

height: 100vh;

bgc#333

background-color: #333;

c#fff

color: #fff;

d:f

display: flex;

jc:c

justify-content: center;

ai:c

align-items: center;

2.5.3. Real-World Tips#

  • Speed-boosts repetitive UI styling.

  • Works great for inline edits when debugging CSS.

  • Combine with snippets for framework-like shortcuts.

2.5.4. Hands-On Task#

Type this in a CSS file:

d:f; jc:c; ai:c; bgc#fafafa; p20; br10; sh0-2-8-rgba(0,0,0,.1)

You’ll get a quick card-style container.

2.6. ⚙️ 6. Advanced Features#

2.6.1. Introduction#

Now that you know the basics, let’s explore advanced controls that make Emmet even more flexible.

2.6.2. Useful Tricks#

Lorem text

p>lorem20

HTML5 boilerplate

!

Combine everything

ul>li.item$*3>a[href="#item$"]{Item $}

2.6.3. Real-World Tips#

  • Perfect for prototyping before back-end integration.

  • Learn your editor’s shortcuts: in VS Code, use Tab to expand abbreviations.

  • Customize Emmet in VS Code settings:

{
  "emmet.triggerExpansionOnTab": true
}

2.6.4. Hands-On Task#

Build a three-column layout:

section.container>div.column$*3>h3{Column $}+p>lorem10

Reference CSS

.container { display: flex; gap: 1rem; }
.column1, .column2, .column3 { flex: 1; background: #f5f5f5; padding: 1rem; border-radius: 8px; }

2.7. 🪄 7. Emmet Cheatsheet (Quick Reference)#

Symbol

Meaning

>

Child element

+

Sibling element

^

Move up a level

()

Grouping

*

Repeat multiple times

$

Numbering

#

ID

.

Class

[]

Attributes

{}

Text content

2.8. 🧭 8. Suggested Practice Routine#

Day

Focus

Exercises

1

Structure operators (>, +, ^, ())

Build nested nav and header

2

Attributes and text

Create signup form

3

Repetition and numbering

Generate blog posts

4

CSS shortcuts

Rebuild layouts with Emmet CSS

5

Combine & review

Create full responsive page skeleton

2.9. 🧠 9. Pro Developer Tips#

  1. Pair with snippets — Extend Emmet with custom snippets for recurring patterns.

  2. Use in React/Vue/Svelte — Emmet also works in .jsx, .vue, and .svelte files (enable in settings).

  3. Speed test yourself — Try coding the same layout with and without Emmet. You’ll usually save 70–90% time.

  4. Keep structure readable — Even if it’s fast, write abbreviations that are clear to you and your team.

2.10. 🎯 10. Final Project Challenge#

Write this full page layout in one Emmet line and expand it:

div.container>header>h1{Emmet Demo}+nav>ul>li*4>a[href="#section$"]{Section $}^^main>section*3>h2{Title $}+p>lorem15^^footer{© 2025 Emmet Tutorial}

Then add your own CSS using Emmet CSS abbreviations and preview in your browser.

Contents