Emmet è un toolkit essenziale per scrivere rapidamente codice HTML, XML e CSS tramite espansione dinamica di abbreviazioni in stile CSS.
Sintassi della gerarchia strutturale
Elemento figlio (>)
nav>ul>li si espande in:
<nav>
<ul>
<li></li>
</ul>
</nav>
Elemento fratello (+)
div+p+bq si espande in:
<div></div>
<p></p>
<blockquote></blockquote>
Risalita di livello (^)
div+div>p>span+em^^bq si espande in:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Moltiplicazione (*)
ul>li*3 si espande in:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Raggruppamento (())
div>(header>ul>li*2)+footer>p si espande in:
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Attributi e sintassi del testo
Classi e ID (. e #)
header#main-header.navbar.fixed si espande in:
<header id="main-header" class="navbar fixed"></header>
Attributi HTML personalizzati ([])
a[title="Home" target="_blank"] si espande in:
<a href="" title="Home" target="_blank"></a>
Numerazione degli elementi ($)
ul>li.item$*3 si espande in:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Usa più caratteri $ per riempimento con zeri (es. item$$ si espande in item01, item02).
Nodi di testo ({})
a{Click Here} si espande in:
<a href="">Click Here</a>
p>{Click }+a{here}+{ to continue} si espande in:
<p>Click <a href="">here</a> to continue</p>
Boilerplate HTML5 standard
Digita ! oppure html:5 e premi 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>