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

Search for a command to run...

No comments yet. Be the first to comment.
CSS selectors are a way to choose elements. It helps to target a specific HTML element or a group of elements to style them in CSS. Think of it like addressing people; one is you’ll say, “All people just listen to me,” another is “People with green s...

HTML (Hypertext Markup Language) is a standard language used for creating the structure of web pages. It’s like the skeleton of a web page, which defines which thing should be where. HTML is very important in creating web pages because without this a...

We use browsers daily to browse websites, but have you ever thought about “What happens when I type a URL and press enter?” In this article we’ll understand how a browser works and what process happens behind the scenes from when we hit enter until t...

Think if millions of computers start communicating with each other without any rules, there will be chaos. That is why we need protocols like TCP and UDP to make communication effective and meaningful. In this article we will understand TCP and UDP t...

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.
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.
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.
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.

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.

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

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

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.