Emmet to podstawowy zestaw narzędzi programistycznych do błyskawicznego pisania kodu HTML, XML i CSS za pomocą skrótów.
Składnia hierarchii strukturalnej
Element potomny (>)
nav>ul>li rozwija się do:
<nav>
<ul>
<li></li>
</ul>
</nav>
Element rodzeństwa (+)
div+p+bq rozwija się do:
<div></div>
<p></p>
<blockquote></blockquote>
Wyjście poziom wyżej (^)
div+div>p>span+em^^bq rozwija się do:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Mnożenie elementów (*)
ul>li*3 rozwija się do:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Grupowanie (())
div>(header>ul>li*2)+footer>p rozwija się do:
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Atrybuty i składnia tekstu
Klasy i ID (. oraz #)
header#main-header.navbar.fixed rozwija się do:
<header id="main-header" class="navbar fixed"></header>
Niestandardowe atrybuty HTML ([])
a[title="Home" target="_blank"] rozwija się do:
<a href="" title="Home" target="_blank"></a>
Numerowanie elementów ($)
ul>li.item$*3 rozwija się do:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Użyj wielu znaków $, aby dopełnić zera wiodące (np. item$$ rozwija się do item01, item02).
Węzły tekstowe ({})
a{Click Here} rozwija się do:
<a href="">Click Here</a>
p>{Click }+a{here}+{ to continue} rozwija się do:
<p>Click <a href="">here</a> to continue</p>
Standardowy szablon HTML5
Wpisz ! lub html:5 i naciśnij Tab:
<!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>