When we as a beginner start learning HTML, writing code often feels slow and repetitive.

Example without Emmet

We must have to type every tag, angle bracket, and closing tag manually. This take our so much time and increase the chances of mistakes.

This is the time where Emmet helps. So What is Emmet ?

Why Emmet is useful for HTML beginners

Emmet is a shortcut syntax for HTML code or Syntax.

Instead of writing full HTML code for multiple times, we type a short abbreviation, and the editor automatically expands it into complete HTML.

Overall Emmet is a shorthand typing for HTML. We write less but we get more code with the help of Emmet.

How Emmet Works Inside Code Editors

Emmet is built into code editor VS Code.

How it works:

1. We directly type an Emmet abbreviation on the VS Code

2. Press Enter or Tab

3. The editor expands it into HTML code

We do not have to install anything separately in VS Code.

Basic Emmet Syntax (One Concept at a Time)

Creating HTML Elements

When we want to type the particular tag we type just the tag syntax without any <> .

Emmet abbreviation → Expanded HTML

Similarly we type different types of tags abbreviation for the particular element.

Adding Classes

Use a dot ( . ) for class.

Adding IDs

Use a hash ( # ) for id.

️Adding Attributes

Use square brackets [ ].

Creating Nested Elements

Use the greater than symbol ( > ) to nesting of the elements.

Example with multiple levels

Repeating Elements Using Multiplication

Use the asterisk ( * ) to repeat elements as much as how many times you want.

Nested + repeated

Generating Full HTML Boilerplate with Emmet

This is one of the most useful Emmet features.

Just type:

Press Enter

In one Enter, entire HTML structure is ready.

Emmet Abbreviation → HTML Expansion Flow

For using the Emmet abbreviation first we need to create the html file then the Emmet will work.