Emmet ist ein quelloffenes Plugin für verschiedene Texteditoren, zur schnellen Erstellung von XML-, HTMLHypertext Markup Language Die Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten, z. B. über die im Text verwendeten Sprachen, den Autor oder den zusammengefassten Inhalt des Textes. HTML wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) weiterentwickelt. Die aktuelle Version ist seit dem 14. Dezember 2017 HTML 5.2, die bereits von vielen aktuellen Webbrowsern und anderen Layout-Engines unterstützt wird. Auch die Extensible Hypertext Markup Language (XHTML) wird durch HTML5 ersetzt. HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren.Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt. Ausnahme sind die als veraltet (englisch deprecated) markierten präsentationsbezogenen Elemente.– und CSS-Code. Befehle für Emmet werden in einer eigenen Kurzschreibweise verfasst und direkt in der Datei ausgeführt, zum Beispiel durch das Drücken der Tabulatortaste.
Unter der Quelle findet man noch mehr Abkürzungen z.B. für CSS.
Quelle: https://docs.emmet.io/cheat-sheet/
Child: >
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>Sibling: +
div+p+bq
<div></div> <p></p> <blockquote></blockquote>Climb-up: ^
div+div>p>span+em^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>div+div>p>span+em^^bq
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote>Grouping: ()
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer> <p></p> </footer>
</div>(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer> <p></p> </footer>Multiplication: *
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>Item numbering: $
ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>ul>li.item$$$*5
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>ul>li.item$@-*5
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>ul>li.item$@3*5
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>ID and CLASS attributes
#header
<div id="header"></div>.title
<div class="title"></div>form#search.wide
<form id="search" class="wide"></form>p.class1.class2.class3
<p class="class1 class2 class3"></p>Custom attributes
p[title=“Hello world“]
<p title="Hello world"></p>td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>[a=’value1′ b=“value2″]
<div a="value1" b="value2"></div>Text: {}
a{Click me}
<a href="">Click me</a>p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>Implicit tag names
.class
<div class="class"></div>em>.class
<em><span class="class"></span></em>ul>.class
<ul> <li class="class"></li> </ul>table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>