Write Code with Emmets..! | Part - 1
Hello friends, I hope you are doing well. In the last article, we discussed what emmet is and why should we use it?
In this article, we are going to discuss some emmets that are really helpful and save a lot of time for each developer. let's get started!
To understand it in a better way we will see some code examples with emmet used to create it.
Emmet for HTML
1. HTML Boiler Plate Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
To generate the above boilerplate code of HTML, use the below emmet
nav>ul>li
2. HTML Child Elements
<nav>
<ul>
<li></li>
</ul>
</nav>
To generate the above code, use the below emmet
nav>ul>li
3. HTML Sibling Elements
<div></div>
<p></p>
<blockquote></blockquote>
To generate the above code, use the below emmet
div+p+bq
4. HTML Climb-up Elements - 1
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
To generate the above code, use the below emmet
div+div>p>span+em^bq
5. HTML Climb-up Elements - 2
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
To generate the above code, use the below emmet
div+div>p>span+em^^bq
6. HTML Grouping Elements - 1
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
To generate the above code, use the below emmet
div>(header>ul>li*2>a)+footer>p
7. HTML Grouping Elements - 2
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
To generate the above code, use the below emmet
(div>dl>(dt+dd)*3)+footer>p
We will continue this series in the next article. hit the follow button and stay tuned with me to know more tips and tricks because #iwritecode
