Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
If you are just getting started with HTML, you have probably faced a problem that writing markup takes a lot of time. Typing every tag, closing it properly, adding classes, nesting elements -> it can feel repetitive and slow. That is where Emmet comes in.
In this blog, we will explore what Emmet is, why it is useful, and how you can use it to write HTML faster and smarter.
What Emmet Is (in Very Simple Terms)
Emmet is a code shorthand tool that helps you write HTML much faster. Instead of typing full HTML tags manually, you write small abbreviations, and Emmet instantly expands them into complete code structures.
Just like in WhatsApp, you message “sth” for “something” or “brb” for “Be right back", Emmet allows you to type a tiny snippet of text in your code editor, hit the Tab key, and watch it expand into full-blown HTML code.
For e.g. - You type: ul>li*3 and Emmet expands it into a full unordered list with three list items.
Why Emmet is useful for HTML beginners
As a beginner in HTML, we learn many things at once —> tag names, nesting structures, classes and IDs etc. Emmet thus helps beginners by:
Reduces typing effort -> no need to type repetitive tags
Overcomes the typos -> Since it generates the tags for you, there is minimal chance of missing a closing tag.
Expedites the HTML scripting -> We can write many lines of code in less time.
How Emmet works inside code editors
Most modern code editors (like VS Code) come with Emmet built in, so one does not need to install it explicitly. To use it, just type an abbreviation in an HTML file in VS code and press the Tab or Enter key. The editor recognizes the pattern and expands it into the correct HTML nested structure with the required closing tags.
Basic Emmet syntax and abbreviations
Creating basic elements
To create a tag, type the name of the tag (without the brackets) and press Enter/Tab. For instance:
p→ will expand into<p></p>h1→ will expand into<h1></h1>
Adding Classes, IDs and Attributes
ID: Type
div#mainand press Enter or Tab key → this expands to<div id="main"></div>.Class: Type
p.intro→ expands to<p class="intro"></p>.Attributes: Use square brackets for things like
alttext or links.- For e.g. - Type in VS code,
img[src="logo.png" alt="Company Logo"]-> when pressed Enter --> this automatically converts to the img tag --><img src="logo.png" alt="Company Logo">
- For e.g. - Type in VS code,
Creating Nested Elements ("Children" operator)
Use the
>symbol to place one element inside the other. For e.g. -- when you typediv>ul>liand press Tab or Enter, it expands into the following:<div> <ul> <li></li> </ul> </div>
Duplicating certain tags in lesser time
Suppose you need five list items, instead of copy paste, use the
*operator:e.g. - if you type
ul>li*5the result would be the following:<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Generating full HTML boilerplate with Emmet
Any HTML script requires tags like <!DOCTYPE html>, <html>, <head>and <body>. Instead of writing this manually, these can be generated instantly using Emmet. When you create a new HTML file in the VS code, just type ! and press Enter or Tab -> this generates a systematically formatted HTML5 skeleton which looks like this:
<!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>
Conclusion
Emmet is a helpful tool for increasing the productivity of people in role like frontend development because it helps in writing markup faster, avoid repetitive typing and quickly build layouts.