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

First we will see what Emmet is. Emmet is a free and open-source toolkit for text editors to boost the speed and efficiency of coding languages like HTML and CSS. Think of it like a shortcut language for HTML. It provides us with various short abbreviations, which then turn into full code snippets. In this article we will learn about writing HTML faster using Emmet abbreviations.

Emmet is useful for HTML beginners because with this, most mistakes that are usually done by beginners, like forgetting to close the tags, are avoided, but with Emmet abbreviations, tags are auto-closed.

Installation

Emmet is almost pre-installed with most of the popular code editors that we use. Like in this article, we will use VS Code, and Emmet is pre-installed in VS Code. I assume you will also be using VS Code, and you don’t need to explicitly install Emmet.

Emmet abbreviations

Starting with the basic, when we create a new HTML file, first we have to write the boilerplate code of HTML, which takes time to write manually. Emmet provides us with ! abbreviation with which HTML boilerplate code is written.

Create a new HTML file. Write ! and hit tab or enter.

Is it not easy? This is just the beginning of learning, Emmet. We’ll learn about many abbreviations, which will increase our speed in writing HTML a lot.

Creating HTML elements using Emmet

So if we have to create elements in HTML, we first write <, then the tag name, then >, then the content, and then the closing tag </tagname>, which is very slow process and often involves mistakes like forgetting to close the tag.

Using Emmet, type only the tag name like h1 or p and hit tab or enter.

Adding classes, IDs, and attributes

For adding classes, we use the tag name + . + class name, like h2.heading, then hit tab or enter.

Similarly, for adding an ID, we use # instead of . like p#paragraph.

And for adding any other attribute to any tag, like width to the img tag, we use tag name + [attr=value], like img[width=200], then hit tab or enter.

Creating nested elements

Nested elements means elements inside another element, like:

<div>
  <h1>Heading 1</h1>
  <p>This is a paragraph.</p>
</div>

So, here it is h1 and p nested inside div. To insert this using the Emmet abbreviation, we need to first understand two symbols of Emmet: one is > and another is +. > means child (inside) and + means sibling (beside). So in plain English, here we need a div, and inside it two children h1 and p, and h1 and p are siblings. To insert this using Emmet:

div>h1+p

Repeating elements using multiplication

Now what if we need to add 20 div elements, adding these manually one by one will take a lot of time. So, to add these using Emmet, type tag name * number, like:

div*20

Conclusion

Emmet is optional but powerful and makes writing HTML very easy. I showed you some of the daily-used Emmet abbreviations; now try all these Emmet abbreviations on your own and explore more abbreviations to make your daily HTML writing easy. I hope you enjoyed this article and learnt something new with this.