Writing HTML for web pages is a repetitive and boring task, you got to open the tags, then close them, there's a boilerplate that has to be there everytime but you write it again, overall a lot of hassle.
Emmet
Emmet is a tool for text editors for quick code editing. We will be utilizing it to write HTML with it's shortcut syntax.
How Emmet Works Inside Code Editors
- You type in a shortcut and Press Tab.
- The editor expands it into full HTML markup.
Normal Emmet Syntax
1) Creating Elements
div
→ expands to:
<div></div>
2) Adding Classes and IDs
# . for classes and # for IDs
div.container
h1#main-title
→ expands to:
<div class="container"></div>
<h1 id="main-title"></h1>
3) Muliplying Elements
# * followed by number to repeat elements
li.item*5
→ expands to:
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
4) Nesting Elements
# > to nest elements inside each other
div.container>ul>li*3
→ expands to:
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5) Adding Attributes
# [] for attributes and {} for value
a[href="https://example.com"]{Click here}
→ expands to:
<a href="https://example.com">Click here</a>
6) HTML Boilerplate
!
→ 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>
Top comments (0)