# Emmet for HTML

## What is Emmet

Emmet is a tool in VS Code that helps you write HTML and CSS Code Faster using Shortcuts.

**Example:**

```html
ul>li*3
```

**Emmet Expands it into:**

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>
```

## Why Emmet is useful for beginners

Emmet is useful for HTML beginners because it helps you write HTML code faster with few keystrokes in VS Code.

**Benefits**:

1. Write a short abbreviation instead of trying the entire HTML Structure help us to saves time.
2. Type `!` and Press Enter to generate the basic HTML document structure.
3. Type `ul>li*3` to create a list containing three list items help write multiple elements quickly.
4. Emmet generates the opening and closing tags for you. it reduces typing mistakes.
5. You can focus more on Writing HTML Concepts instead of writing repeatedly same HTML Code. it help to improve productivity.

## How Emmet works inside the code editor

1. **Type an Abbreviation**

```html
ul>li*3
```

2. **Emmet interprets it**

- `ul` means an unordered list.
- `>` means a child element.
- `li` means a list item.
- `*3` means a repeat three times.

3. **Expand the Abbreviation**

Select the Emmet Suggestion or press **Enter/Tab,** depending on the editor setting.

**Emmet Expands it into:**

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

## Basic Emmet Syntax and Abbreviation

Here are the most useful abbreviation for HTML Beginners.

**Basic Emmet Syntax:**

**Symbol Meaning Example**

`>` Create a child Element `div>p`

`+` Create a Sibling Element `h1+p`

`*` Repeat an element `li*3`

`^` Move up one Level `div>p^h2`

`()` Group elements `div>(h1+p)`

`#` Add an ID `div#header`

`.` Add a class `div.container`

`{}` Add Text content `h1{hello}`

`[]` Add an attribute `a[href="#"]`

## Creating HTML Elements using Emmets

1. How to use `>`

**Abbreviation**

```html
div>p
```

**Generated HTML**

```html
<div>
    <p></p>
</div>
```

2. How to use `+`

**Abbreviation**

```html
h1+p
```

**Generated HTML**

```html
<h1></h1>
<p></p>
```

3. How to use `*`

**Abbreviation**

```html
ul>li*3
```

**Generated HTML**

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

4. How to use `^`

**Abbreviation**

```html
div>p^h2
```

**Generated HTML**

```html
<div>
    <p></p>
</div>
<h2></h2>
```

5. How to use `()`

**Abbreviation**

```html
div>(h1+p)
```

**Generated HTML**

```html
<div>
    <h1></h1>
    <p></p>
</div>
```

6. How to use `{}`

**Abbreviation**

```html
h1{hello}
```

**Generated HTML**

```html
<h1>hello</h1>
```

## Adding Classes IDs and attributes

1. **Adding classes**

**Abbreviation**

```html
div.container
```

**Generated HTML**

```html
<div class="container"></div>
```

2. **Adding IDs**

**Abbreviation**

```html
div#header
```

**Generated HTML**

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

3. **Adding Attributes**

**Abbreviation**

```html
a[href]
```

**Generated HTML**

```html
<a href="" hred=""></a>
```

## Creating nested elements

Nested elements are HTML elements placed inside other HTML elements. In Emmet,use the `>` symbol to create a child element inside a parent element.

**Emmet Abbreviation**

```html
div>p
```

**Generated HTML**

```html
<div>
    <p></p>
</div>
```

**Creating Multiple nested element**

**Emmet Abbreviation**

```html
div>h1+p
```

**Generated HTML**

```html
<div>
    <h1></h1>
    <p></p>
</div>
```

**Creating deeply nested elements**

```html
div>section>article>p
```

**Generated HTML**

```html
<div>
    <section>
        <article>
            <p></p>
        </article>
    </section>
</div>
```

**Practical Example**

**Emmet Abbreviation**

```html
div.container>h2{My Website}+p{Welcome to my website}
```

**Generated HTML**

```html
<div class="container">
    <h2>My website</h2>
    <p>Welcome to my website</p>
</div>
```

## Repeating Elements using multiplication

In Emmet `*` (asterisk) symbol is used to repeat an HTML element multiple times without writing the same code again and again.

Example:

**Emmit Abbreviation**

```html
p*3
```

**Generated HTML**

```html
<p></p>
<p></p>
<p></p>
```

- **Repeating list items**

**Abbreviation**

```html
ul>li*5
```

**Generated HTML**

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

- **Repeating Element with text**

**Abbreviation**

```html
p{hello}*3
```

**Generated HTML**

```html
<p>hello</p>
<p>hello</p>
<p>hello</p>
```

- **Repeating elements with numbered text**

You can use `$` symbol to generate sequential number.

**Abbreviation**

```html
ul>li{item $}*3
```

**Generated HTML**

```html
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
```

## **Generating Full HTML with boilerplate**

Emmet allows you to generate the complete basic HTML structure with single shortcut in VS Code.

- **How to generate HTML Boilerplate**

1. Create a file named `index.html`
2. Open the file in VS Code.
3. Type `!`(exclamation mark)
4. Select the Emmet abbreviation Suggestion or press Enter.
5. Your Complete HTML Structure Generated automatically.

**Emmet Abbreviation**

```html
!
```

**After Press Enter Generated HTML**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

**Understand Generated HTML Code:**

| Element | Purpose |
| --- | --- |
| `<!DOCTYPE html>` | Declares that the document uses HTML5. |
| `<html lang="en">` | Root element of the HTML document; specifies English as the page language. |
| `<head>` | Contains metadata and links to resources. |
| `<meta charset="UTF-8">` | Supports a wide range of characters and symbols. |
| `<meta name="viewport">` | Helps the page display properly on mobile devices. |
| `<title>Document</title>` | Sets the title shown in the browser tab. |
| `<body>` | Contains the content displayed on the webpage. |