Emmet for HTML
A Beginner’s Guide to Writing Faster Markup
Updated
•2 min read
Typing HTML is hard. There is a starting tag, a closing tag, and there are attributes to play with. What if there is a way to type or write HTML faster? There comes EMMET integrated in most code editors by default, or you can integrate it with just the installation of an extension.
HTML helps type faster, visualise the structure, reduce errors and save time.
To use, you just type the first letter for the HTML elements, then hit tab to select and hit enter to print it out in the code editor.
div → <div></div>
p → <p></p>
h1 → <h1></h1>
The most used emmet abbreviation is ! for creation of the boilerplate code of the HTML5 document, we hit tab to make the basic changes right after the bul>li*3 →
- oilerplate code is generated, as we hit enter and the typing cursor moves ahead.
! → (press 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>
ul>li*3 →
- Classes, IDs and attributes
.container → <div class="container"></div>
#header → <div id="header"></div>
p.intro → <p class="intro"></p>
button#submit → <button id="submit"></button>
Creating nested elements
nav>ul>li →
<nav>
<ul>
<li></li>
</ul>
</nav>
Repeating elements using multiplication
ul>li*3 →
<ul>
<li></li>
<li></li>
<li></li>
</ul>
This is emmet for you. See you on the internet!
