- What is Emmet?
Emmet is a plugin for many popular text editors like Brackets, Sublime Text, etc. which greatly improves HTML & CSS workflow:.
- How to install it?
You can manually download from Emmet Website and install it.
OR
You can install by opening your favorite editor and go to install package/extension manager.
How to use Emmet abbreviations like a Pro?
(Note:- After Installing type the Blue written word, you will get the Black written code.)
{ Some Examples:- }
!!!
<!DOCTYPE html>
!!!4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
doc
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
div+div>p>span>em
<div></div>
<div>
<p><span><em></em></span></p>
</div>
div+div>p>span>em^b
<div></div>
<div>
<p><span><em></em></span><b></b></p>
</div>
div+div>p>span>em^^bq
<div></div>
<div>
<p><span><em></em></span></p>
<blockquote></blockquote>
</div>
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.width
<form action="" id="search" class="width"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
ul>li*6
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul>li.item$*6
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>
h$[title=item$]{This is Header $}*4
<h1 title="item1">This is Header 1</h1>
<h2 title="item2">This is Header 2</h2>
<h3 title="item3">This is Header 3</h3>
<h4 title="item4">This is Header 4</h4>
ul>li.item$$*7
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
<li class="item04"></li>
<li class="item05"></li>
<li class="item06"></li>
<li class="item07"></li>
</ul>
ul>li.item$@-*7
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
p[title="Hello World"]
<p title="Hello World"></p>
td[rowspan=2 colspan=3 title="hello"]
<td rowspan="2" colspan="3" title="hello"></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
a{Click Me}
<a href="">Click Me</a>
p>{click Me}+a{something}+{...}
<p>click Me<a href="">something</a>...</p>
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati excepturi, fugiat rerum facilis est reiciendis mollitia vel labore aut delectus. Quibusdam omnis soluta quos. Sequi accusantium deleniti eum neque eligendi.
p*5>lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore totam iste nisi, facilis architecto inventore dolor asperiores et quas, molestias voluptates doloribus aperiam adipisci magnam quod cumque! Quasi, sed.</p>
<p>Quas, possimus, culpa soluta debitis iste omnis vel optio odio explicabo nesciunt. Repellendus accusamus sed illo nihil aperiam laboriosam accusantium, sapiente ullam fugiat, eveniet fuga doloribus exercitationem totam veritatis magni.</p>
<p>Omnis illum nulla facere, sit officiis ex sequi dolorem harum quae ullam labore vel perspiciatis temporibus repellat. Ab, quisquam quam impedit quaerat odit repellendus ad laudantium numquam hic harum corporis.</p>
<p>Inventore possimus quibusdam, harum fuga nisi excepturi veniam delectus impedit adipisci sit quos, voluptatibus magnam aliquid saepe aspernatur atque consectetur magni dolores hic officiis, asperiores dignissimos. Ad, officiis quos quisquam.</p>
<p>Quibusdam nihil adipisci est, in officia nulla nobis, tempora odio enim aspernatur dolorum architecto autem assumenda, nostrum magni nisi cum cumque? Dolor unde sed, ipsam quaerat voluptates consectetur saepe corrupti.</p>
ul.generic-list>lorem10.item*4
<ul class="generic-list">
<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, optio.</li>
<li class="item">Debitis ipsum ex ducimus, cupiditate animi atque! Est, illo, minus!</li>
<li class="item">Illum nemo ullam eligendi explicabo! Ea magni saepe, quis iusto.</li>
<li class="item">Quo iure magnam facere, cumque voluptas quaerat provident accusamus non!</li>
</ul>
.new
<div class="new"></div>
em>.new
<em><span class="new"></span></em>
ul>li.new
<ul>
<li class="new"></li>
</ul>
ul>.new*5
<ul>
<li class="new"></li>
<li class="new"></li>
<li class="new"></li>
<li class="new"></li>
<li class="new"></li>
</ul>
table>.row>.new
<table>
<tr class="row">
<td class="new"></td>
</tr>
</table>
div>(header>ul>li*3>a)+footer>h1
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<h1></h1>
</footer>
</div>
div>(header>ul>li*3>a)+(footer>h1>p)
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<h1>
<p></p>
</h1>
</footer>
</div>
0 Comments