Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Writing HTML can be lengthy, boring and time consuming, especially when the page is long or a big project. There is a simple solution for it, which uses shortcuts to write commands with just a few keystrokes. This solution is Emmet.
What is Emmet? (Your HTML Shortcut Language)
Emmet is a plugin which comes built in with modern code editors such as visual studio code(vs code) and allows you to write HTML (and css) much faster with short abbreviations.
Why Emmet is a Game-Changer for Beginners
Saves Time: Less typing means you build pages faster.
Reduces Typos: Fewer characters typed means fewer chances to make a mistake.
Focus on Structure: You can think about the structure of your page more easily without getting bogged down in typing every
<and/>.Built-in: For many editors (like VS Code), you don't even need to install anything.
How Emmet works inside code editors
It’s super simple. Emmet comes pre installed with modern code editors (eg vs code). It listens to the code as you are typing it. You type an abbreviation → You press a special key( usually Enter or Tab ) → Emmet triggers expansion.
Creating HTML Elements (The Basics)
The simplest Emmet abbreviation is just the name of the tag you want.
You Type:
p→ PressTab→ Emmet Expands To:<p></p>You Type:
h1→ PressTab→ Emmet Expands To:<h1></h1>You Type:
div→ PressTab→ Emmet Expands To:<div></div>
Emmets for Class, ID and Attribute
Emmets are really helpful in naming a class, ID or an attribute.
tag.className :
p.intro→<p class = “intro”> </p>tag#id :
p#intro→<p id = “intro” > </p>attributes :
a[href="https://google.com" target="_blank"]→<a href="https://google.com" target="_blank"></a>
Creating nested elements
Use the > symbol to create child elements inside a parent.
Eg you type : div>ul>li →
<div>
<ul>
<li>
</li>
</ul>
</div>
Repeating Elements (Multiplication!)
Need several list items? Use * (the multiplication symbol)
ou Type: ul>li*3 →
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Generating a Full HTML Boilerplate
Generating a Full HTML Boilerplate is actually quite easy with emmet. All you need is just one command ie !
Just type ! and press tab
Emmet expands to :
<!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>
Emmet is a powerful, optional tool, but once you start using it, you'll wonder how you ever coded without it. Open your code editor (like VS Code), create a new .html file, and start trying these abbreviations. The more you practice, the faster you'll become!