---

😵 Writing HTML the Normal Way

You want to build a simple card.

You type opening tags… closing tags… classes… indentation.
It feels slow and repetitive.

HTML you want:

<div class="card">
  <h2>Title</h2>
  <p>Description</p>
</div>

🖼 Image Idea 1:
A split image:
Left side → long HTML typing
Right side → short Emmet code
Caption: “Without Emmet vs With Emmet”

---

🚀 Now Watch the Magic

You type:

div.card>h2{Title}+p{Description}

Press Tab…

<div class="card">
  <h2>Title</h2>
  <p>Description</p>
</div>

That shortcut system is called Emmet.

---

🧠 What is Emmet?

Emmet is a shortcut language for HTML.

You write small codes → your editor builds full HTML.

Shortcut → Real HTML

🖼 Image Idea 2:
Flow diagram:

Emmet Code → (Tab key) → HTML Output

---

🎯 Why Beginners Love Emmet

When learning HTML, students usually:

• Forget closing tags

• Type very slowly

• Make nesting mistakes

Emmet helps you:

✅ Write faster
✅ Avoid errors
✅ Understand structure
✅ Practice more

---

⚙️ How Emmet Works

1. Type shortcut

2. Press Tab

3. HTML appears

That’s literally it.

---

🧩 Basic Symbols (The Rules)

Symbol	What it Does
>	Put inside
+	Add next element
.	Class
#	ID
*	Repeat
{}	Text

---

🏗 Creating Elements

Emmet

p

Result

<p></p>

---

🎨 Adding Class & ID

Emmet

div.box

<div class="box"></div>

Emmet

div#header

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

---

🧱 Nesting (Putting Elements Inside)

Emmet

ul>li

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

🖼 Image Idea 3:
Tree diagram:

ul
└── li

Caption: “‘>’ means inside”

---

🔁 Repeating Elements

Emmet

ul>li*3

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

🖼 Image Idea 4:
Show 1 li box → arrow → 3 li boxes

---

📝 Adding Text

Emmet

button{Click Me}

<button>Click Me</button>

---

🧩 Real-Life Example

Emmet

div.card>h2{Product}+p{Best Quality}+button{Buy}

<div class="card">
  <h2>Product</h2>
  <p>Best Quality</p>
  <button>Buy</button>
</div>

You just made a product card in seconds.

---

📄 Full HTML Page Instantly

Type:

!

Press Tab → Full HTML boilerplate appears.

🖼 Image Idea 5:
Before: just !
After: full HTML page structure

---

🧪 Try It Yourself

Open VS Code and try:

nav>ul>li*4
div.box>h3{Hello}+p{Welcome}
form>input[type=text]+button{Submit}