در این مقاله چند مورد از دستورات پر مصرف emmet برای HTML و CSS را بررسی می‌کنیم.

برای ایجاد تگ‌های HTML کافی است نام تگ را به تنهایی نوشته وکلید TAB را فشار دهیم:

a = <a href=""></a>

ایجاد تگ‌ها به صورت تودرتو:

ul>li>ul>li =
<ul>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

ایجاد چند تگ به صورت پشت سر هم:

div+p+a+nav+header =
<div></div>
<p></p>
<a href=""></a>
<nav></nav>
<header></header>

ایجاد تگ‌های دارای کلاس و آی دی:

nav.navigationbar = 
<nav class="navigationbar"></nav>
section#slider = 
<section id="slider"></section>
article.card.bg-dark.d-flex = 
<article class="card bg-dark d-flex"></article>

ایجاد محتوا درون تگ‌ها با استفاده از علامت‌های { } :

ul>li*5{Item} = 
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

ایجاد ترتیب با شماره گذاری توسط علامت $ :

ul>li*5{Item $} = 
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
ul>li*5{Item $$} = 
<ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
</ul>
ul>li*5>a{item $$@2} = 
<ul>
    <li><a href="">item 02</a></li>
    <li><a href="">item 03</a></li>
    <li><a href="">item 04</a></li>
    <li><a href="">item 05</a></li>
    <li><a href="">item 06</a></li>
</ul>

ایجاد attribute ها:

ul>li*4>a[href="www.link$.net" target="_blank"]{link $} = 
<ul>
    <li><a href="www.link1.net" target="_blank">link 1</a></li>
    <li><a href="www.link2.net" target="_blank">link 2</a></li>
    <li><a href="www.link3.net" target="_blank">link 3</a></li>
    <li><a href="www.link4.net" target="_blank">link 4</a></li>
</ul>
input:email[disabled] = 
<input type="email" name="" id="" disabled="disabled">

برای ایجاد کد‌های css فقط کافی است propertie‌ها را به صورت مخفف شده بنویسیم و کلید TAB را بشاریم:

bgc = background-color:
bgi = background-image: url();
m5-auto = margin: 5px auto;
mw1440 = min-width: 1440px;
w100p = width: 100%;
fz = font-size: ;
td = text-decoration: ;
ff = font-family: ;
.
.
.

امیدوارم مفید بوده باشد ?