# Learn Emmet Abbreviation
## Introduction
We all are developers typing code everyday, But have you ever face the thinking process of our mind doesn’t catch up with our typing speed unless you type so fast. But What if i tell you there was a way to write lines of HTML in seconds, with just a few keystrokes? Yeah, exactly what **Emmet** does, and it's a game-changer for anyone who writing code, especially beginners.
## History of Emmet
So, the developer’s developed Emmet to speed up developers typing of HTML, XML, and CSS workflows by allow them to type CSS-like expressions that are generated into full code, also noted in the documentation.
The project Emmet was known as ***Zen Coding*** and it was created by Russian software developer ***Sergey Chikuyonok***. which was started in 2008 and later evolved and was renamed to Emmet in 2012.
## What is a Emmet
Emmet is a free and open-source toolkit that’s like a magical tool for developers. It’s a collection of plugins for various text editors that lets you write HTML, CSS, JS, and other structured code formats at lightning speed using shortcuts. Think of it as a superpower for Writing code .
At its core, Emmet is really just a series of keyboard shortcuts.
And it is preinstall in **Visual studio Code (VSC)** Editor.
## Why Emmet is useful for HTML beginners
* **If you forgot to close tag , don’t worry Emmet automatically closes your tag**
* **It save your time of finding where you close tag or not .**
* It’s time saving you don’t have to spend your time on those angle brackets.
* The emmet provides hole syntax ,so we can focus on content on the webpage.
* For beginners they always make mistake while writing code, some time they forgot to close tag or add brackets, semicolon so because of emment it helps them to write better code.
## How Does Emmet Work Its Magic?
Let’s talk about Emmet in VS Code editor
* You type the abbreviation (like ul>li\*3>a)
* You press the tab key or just say enter.
* You editor gives you the complete HTML code
**Emmet : Type Less, Code More**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769501767881/dff50c01-7402-4328-b2be-cfdd1121e010.png align="center")
## The Emmet syntax and abbreviations
Let's start with the absolute basics.
1. ### **HTML (Boilerplate Code):**
Just by typing exclamation mark ( ! ) You can generate hole HTML boilerplate code.
**Code:**
```xml
!
```
Output:
```xml
Document
```
2. ### **Child Elements** `(>)`
A **child element** is any element that is nested inside another element.
Code:
```xml
div>p
```
Output:
```xml
```
3. ### **Sibling Elements** `(+)`
While a **child element** lives *inside* another, a **sibling element** lives **right next to** another element, sharing the same parent.
Code:
```xml
h1+p
```
Output:
```xml
```
4. ### **Multiplication** `(*)`
**A multiplication** is used when you need to create the same element multiple times in a row.
Code:
```xml
ul>li*3
```
Output:
```xml
```
5. ### **Class** `(.)` **Attribute**
The **class attribute** is used to group elements together so you can style them all at once with CSS.
Code:
```xml
div.section
```
Output:
```xml
```
6. ### **ID** `(#)` **Attribute**
The **ID attribute** is used to give a **unique name** to a single, specific element on your page.
Code:
```xml
div#main
```
Output:
```xml
```
7. ### **Nested Elements**
**The nesting** is the act of placing one element inside another. This creates a "parent-child" relationship that defines the structure of your webpage.
Code:
```xml
ul>li>a
```
Output:
```xml
```
## Conclusion
Emmet is a powerful tool for developers, especially beginners, as it significantly speeds up the process of writing HTML, XML, and CSS code. By using simple abbreviations and shortcuts, developers can generate complex code structures quickly and efficiently.
Emmet's ability to automatically close tags and provide complete syntax helps reduce errors and allows developers to focus more on the content of their webpages.