Emmet in HTML

·

1 min read

Emmet is a plugin for text editors that allows you to write HTML and CSS faster by using abbreviations that expand into full code. It can save a lot of time when writing code because you can type a few characters and then expand them into a long block of code with a single keystroke.

Features of Emmet:

->Customization

->Abbreviation Expansion

->Code Formatting

->Code Snippets

Advantages of Emmet:

->Time saver

->Easy to Learn

->Improve Productivity

Some of the emmets are:

-> press the tag name and press tab key you get your tag, eg. p+tab gives <p></p>

-> for adding class, just type tagname.classname and press tab key, eg. p.class1 + tab gives <p class="class1"></p>

-> for adding id, just type tagname#idname and press tab key, eg. p#id1 + tab gives <p id="id1"></p>

-> for adding content, type tagname{content}, eg. h1{blog}+tab gives <h1>Blog</h1>

-> h1>p>div + tab gives you

<h1>

<p>

<div>

</div>

</p>

</h1>

-> li*3 +tab gives you

<li></li>

<li></li>

<li></li>