Writing the same html syntax over and over is not only mind-numbing, but an unnecessary drain on your productivity. In the case of starting an html document, the Emmet plugin allows you to accomplish in 6 characters what would manually require 171. The examples below introduce you to ways you'll be able to harness this powerful tool for yourself.
The Emmet plugin must be downloaded in your IDE for the emmet syntax to render into html. Documentation and download information can be found on Emmet.io.
STARTING AN HTML DOCUMENT FROM SCRATCH
Emmet Syntax:
html:5
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<!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>
CREATING AN ELEMENT WITH A CLASS
Emmet Syntax:
div.divName
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<div class="divName"></div>
CREATING AN ELEMENT WITH AN ID
Emmet Syntax
div#divName
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<div id="divName"></div>
CREATING AN ELEMENT WITH A CLASS AND ID
Emmet Syntax:
div.divName#divIdName
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<div class="divName" id="divIdName"></div>
CREATING A LIST WITH MULTIPLE CHILD ELEMENTS
Emmet Syntax:
ul>li*5
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ADDING A UNIQUE CLASS NAME FOR EACH CHILD ELEMENT
Emmet Syntax:
ul.list>li.item$*4
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<ul class="list">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
ADDING TEXT INTO AN ELEMENT
Emmet Syntax:
p.pName{Hello World!}
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<p class="pName">Hello World!</p>
ADDING MULTIPLE UNRELATED ELEMENTS
Emmet Syntax:
head+body+footer
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<head></head>
<body>
</body>
<footer></footer>
GROUPING USING PARENTHESES
Emmet Syntax:
head+(body>div.section$*3>p*2)+footer
By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
<head></head>
<body>
<div class="section1">
<p></p>
<p></p>
</div>
<div class="section2">
<p></p>
<p></p>
</div>
<div class="section3">
<p></p>
<p></p>
</div>
</body>
<footer></footer>
Top comments (0)