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

When you first write HTML, it can feel like a lot of typing just to get simple things done. Imagine a very simple HTML layout like the following

<p>
    This is the part where we say YAAYYY
    <ol>
        <li>It starts with</li>
        <li>One thing</li>
    </ol>
</p>

Now imagine something like this or even more complicated multiple times a day as you build various layouts and pages. This can get very daunting very easily.

This is where Emmet will be helpful. It is a productivity tool built to most modern code editors like VS Code that lets you use short abbriviations and expand them into full length HTML code with just the press of a button. Think of it like a short form language like "brb" that mean "Be Right Back" or "AFK" that means "Away From Keyboard" but for HTML instead.

The great thing about Emmet is that it uses almost the same syntax very similar to CSS selectors. If you write something like div.container you will get <div class="container"></div> without having to write all of it yourself increasing the speed with which you write HTML.

Why Emmet is Useful for Beginners

When you first write HTML, most of your headspace will go into remembering tags and making sure you close them properly. A simple structure like a card component means typing <div>, then </div> and thennesting more tags inside it. It is not difficult it is just very repetitive. Emmet help by removing that mechanical and repetitive aspect from this task.

Instead of writing full opening and closing tags, you just write the abbreviations and let your code editor expland it. This will help you by givin you more time to think of proper structures that are accessibility tool friendly instead of checking what tag spelling did you do wrong.

With that point it will also be helpful to note that Emmet reduces common beginner mistakes. Common mistakes include things like missing angle brackets, typos in tag names or missing tags. Problems like these are hard to debug as HTML does not throw any errors, it just shows wierd behaviour which can be hard to pin point for a beginner.

One hidden benefit that I feel from personal experience is that, it helps beginners experiment and play around with layouts more often strengthing their core HTML concepts. Because you can generate basic structure quickly, you tend to play around more. This "playtime" reinforces concepts and help you understand HTML behaviour much better.

How Emmet Works Inside Code Editors

Emmet is like an assistant that is built in many modern editors that basically keeps a lookout for what you type and turns your short hints into full HTML structures. Emmet itself is not a separate app, in many code editors it is available by default (Yes that is how commonly used it is!).

Type an Abbreviation

You type something like section.header. It looks a little like CSS because that is exactly the syntax that emmet uses.

Expand your Abbreviation

When you press Tab, Emmet takes that short line and expands it into full blown HTML with opening and closing tags and classes or IDs depending what you wrote.

Editor Insets Expanded Code

The expanded is then inserted in your code editor from where you have your cursor. And just like that my friend you have saved yourself from the pain of writing each angular bracket manually.

So in this way you can write short abbreviations and Emmet will exapnd these tiny shortcuts into full blown HTML codes. You editor know what to listen for and what to expand that shortcut into.

Hands On Emmet

Now let us see Emmet in action and how can we use it to speed our everyday syntax.

Creating Basic HTML Elements

The simplest way to use Emmet is creating an HTML element. Just type the name of your tag and press enter

p

pres Tab

<p></p>

That is it! Go on try another tag.

Type in header

header

press Tab

<header></header>

Emmet assumes you wanted to write that elemement so it adds the opening and closing tags automatically.

Adding Classes and ID

Well now you can add elements efficiently, so wil go use your arrow keys to go inside the opening <p> and and a class or ID? No, you can use Emmet for that as well.

To add a class use a ..

Emmet

div.container

Pres Tab

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

To add an ID use a #.

Emmet

div#container

Pres Tab

<div id="container"></div>

You can even combine them by using both in a single line

Emmet

div.card#main

Pres Tab

<div class="card" id="main"></div>

Emmet reads your shorthand line from left to right and then writes proper HTML for it.

Adding Attributes

Attributes and very often used for HTML elements to provide extra details like type, placeholders, default values or starting points. Emmet lets you add attributes using square brackets [].

Emmet

input[type="text]

Pres Tab

<input type="text">

Creating Nested Elements

Emmet lets you nest elements inside one another by the use of > (greater than) symbol. the > symbol means "inside" to Emmet.

Emmet

div>p

Pres Tab

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

you can also try something like

ul>li

Pres Tab

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

But just one li is not very handy right? Well let us fix that in hte next section

Repeating Elements

The asterisk * symbol indeicates "Print this tag given number of times". This will repeat the given tag n number of times.

Emmet

ul>li*3

Pres Tab

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

This generates three list items instantly. This comes in handy when building something like navigation menus, product cards or repeating section.

Generating Full HTML Boilerplate

Boilerplate code means the code that you'd need almost everytime you do something. It is the basic setup for a codebase. When it comes HTML you can generate the HTML boilerplate using Emmet.

In a blank .html type

!

Pres Tab

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

Now that is some serious time saving. Just one character and boom! You have the entire template.

Conclusion

The important truth is that Emmet cannot replace your understanding of HTML. It is accelerating it. You will be better at writing HTML when you know your fundamentals and are using Emmet. At a higher level if u want to think about structure and meaning and accessibility, Emmet will help you to remove the repetitive work from your routine.

Practice Each example, and play around with the quetions that you would have and guess the outcome. Fail at creating what you imagine and then understand what you missed and you can get there. Once you are solid with your HTML fundamentals and Emmet you will notice that writing HTML is more sketching and less typing.