DEV Community

Cover image for Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
SATYA SOOTAR
SATYA SOOTAR

Posted on

Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

#html #webdev #chaicode #vscode

We all can agree that writing HTML is a slow and Repetitive task. Most of the time either we write the same tag again and tag or copy paste the whole HTMl structure and change the contents of the tags.

For example just to create a table we have to write <tr>, <td> & <th> repeatedly. It not only consumes time but also tiring.

For Example:

<div class="container">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

For the above code you have to:

  • Write all the Opening Tags.
  • Write all the Closing Tags.
  • Write all the attributes manually.

This gets tedious quickly, especially when building larger pages.

To solve this Emmet comes to the picture. Emmet is a shortcut system for writing HTML efficiently. It expands short abbreviations into full-fledged HTML structures, reducing the time required to write repetitive code.

Think of Emmet like auto-complete for HTML. It writes entire chunks of HTML for you.
For the above example I have provided. The shortcut of that code can be.

.container>h1{This is a heading}+p{This is a paragraph.}
Enter fullscreen mode Exit fullscreen mode

Demonstration of Emmet abbreviation expanding into complete HTML code with a single keystroke

How to use Emmet in VS Code.

In vs code editor it works out of the box. You don't need to install any extension separatly.

Basic workflow of using emmet abbreviation.

  • Type an Emmet abbreviation
  • Press Tab (or Enter)
  • Editor expands it into HTML

Symbol Table for Emmet Syntax & Abbreviations

Symbol Meaning
> Child element
+ Sibling element
. Class
# Id
* Repeat element
() Grouping
{} Passing content
[] Attrubutes

Creating HTML element using emmet

Just type tag name and hit enter(or tab)

h1
Enter fullscreen mode Exit fullscreen mode

Animation showing how typing 'h1' and pressing Tab automatically generates the complete raw `<h1></h1>` endraw tag structure

Passing content inside HTML elemet

Use {} to pass the content inside the element.

h1{This is Heading}
Enter fullscreen mode Exit fullscreen mode

Example of creating an h1 element with pre-filled content using curly braces syntax

Creating nested element

Use > to create a nested element. The tag that is written before the < is parent tag and the tag written after is the child tag.

div>h1{This is Heading}
Enter fullscreen mode Exit fullscreen mode

Demonstration of the child operator (>) creating a nested h1 element inside a div container

Creating Sibling element

Use + to create a sibling element inside a parent tag.

div>h1{This is heading}+p{This is Paragraph}
Enter fullscreen mode Exit fullscreen mode

Visual example of using the plus (+) operator to create sibling elements - an h1 and p tag within a div

Adding class to a HTML element

Use . between the tag and the element to create a class.

div.container
Enter fullscreen mode Exit fullscreen mode

Showing how the dot notation creates a div element with the class name

To give class to a <div> tag you can use:

.className
Enter fullscreen mode Exit fullscreen mode

Shorthand method for creating a div with a class using just the dot and class name

Adding Id to a HTML element

Use # between the tag and the element to create a Id.

div#container
Enter fullscreen mode Exit fullscreen mode

Demonstration of the hash (#) symbol creating a div element with the id

Adding Attributes to HTML elements 

input[type:text][placeholder="Enter you name]
Enter fullscreen mode Exit fullscreen mode

Example of using square brackets to add multiple attributes (type and placeholder) to an input element

Add same element multiple time

Use * to create the same element number of times.

p*3
Enter fullscreen mode Exit fullscreen mode

Illustration of the multiplication operator (*) generating three paragraph tags simultaneously

Boilerplate of HTML

Use ! and hit enter. This will create a complete boilerplate.

!
Enter fullscreen mode Exit fullscreen mode

Quick generation of a complete HTML5 boilerplate structure using the exclamation mark shortcut

Example of a complex HTML structure

Advanced example showing how multiple Emmet operators can be combined to generate complex nested HTML structures in seconds

Conclusion

Emmet is a very useful tool for web developers that helps you write HTML faster. With a few simple shortcuts, you can avoid writing the same tags again and again and save a lot of time.

Whether you are creating a small landing page or a big web application, Emmet makes your work easier. You can quickly create elements, add classes and IDs, nest tags, and even generate a full HTML boilerplate. Since Emmet is already available in VS Code, you can start using it right away without installing anything.

Begin with small shortcuts in your daily coding. Slowly, you will get comfortable with more complex ones. Once Emmet becomes a habit, writing HTML will feel much faster and smoother.

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Top comments (0)