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:

ul>li*3

Emmet Expands it into:

<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

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:

<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

div>p

Generated HTML

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

2. How to use +

Abbreviation

h1+p

Generated HTML

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

3. How to use *

Abbreviation

ul>li*3

Generated HTML

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

4. How to use ^

Abbreviation

div>p^h2

Generated HTML

<div>
    <p></p>
</div>
<h2></h2>

5. How to use ()

Abbreviation

div>(h1+p)

Generated HTML

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

6. How to use {}

Abbreviation

h1{hello}

Generated HTML

<h1>hello</h1>

Adding Classes IDs and attributes

1. Adding classes

Abbreviation

div.container

Generated HTML

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

2. Adding IDs

Abbreviation

div#header

Generated HTML

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

3. Adding Attributes

Abbreviation

a[href]

Generated 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

div>p

Generated HTML

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

Creating Multiple nested element

Emmet Abbreviation

div>h1+p

Generated HTML

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

Creating deeply nested elements

div>section>article>p

Generated HTML

<div>
    <section>
        <article>
            <p></p>
        </article>
    </section>
</div>

Practical Example

Emmet Abbreviation

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

Generated 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

p*3

Generated HTML

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

• Repeating list items

Abbreviation

ul>li*5

Generated HTML

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

• Repeating Element with text

Abbreviation

p{hello}*3

Generated HTML

<p>hello</p>
<p>hello</p>
<p>hello</p>

• Repeating elements with numbered text

You can use $ symbol to generate sequential number.

Abbreviation

ul>li{item $}*3

Generated 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

!

After Press Enter Generated 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.