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

Writing HTML by hand can be slow and error-prone. However, if we know the right shortcuts, the task becomes much easier and faster. Emmet acts like an autocorrect tool for HTML—it converts short abbreviations into complete HTML structures.

How Emmet works:

• Type a short Emmet abbreviation
• Press Tab
• Watch it expand into full HTML

Basic Emmet Syntax
1)<div> -> <div></div>
2)p -> <p></p>
3)h1-><h1></h1>
4)span->
4)Class selector(.)
div.container -> <div class="container"></div>
5)ID Selector#
div#header-><div id="header"></div>
6)Attributes[]
a[href="http:google.com"]-><a href="google"></a>
7)Child Elements div>p
<div><p></p></div>
8)Deep nesting
nav>ul>li>a
<nav>
<ul>
<li>test</li>
</ul>
</nav>

9) Repeating multiple elements(*):
ul>li*5
<ul>
<li>test</li>
<li>test</li>
<li>teswt</li>
<li>sdfds</li>
<li>dsfds</li>
</ul>