jam with jam

Emmet Shortcuts

Emmet Abbreviation HTML Output
span + Tab <span></span>
div <div></div>
a <a href=""></a>
button <button></button>
span.purple <span class="purple"></span>
span#id <span id="id"></span>
div.class-1.class-2#id-1 <div class="class-1 class-2" id="id-1"></div>
.myClass <div class="myClass"></div>
#myID <div id="myID"></div>
link <link rel="stylesheet" href="">
div.purple>span.cyan <div class="purple"><span class="cyan"></span></div>
header>nav>ul 
<header>
        <nav>
          <ul></ul>
        </nav>
      </header>
header>nav>ul>li*3 
<header>
        <nav>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
      </header>
header>nav>ul>li*3{List Item $} 
<header>
        <nav>
          <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
          </ul>
        </nav>
      </header>
header>nav>ul>li*3.class-${List Item $$} 
<header>
        <nav>
          <ul>
            <li class="class-1">List Item 01</li>
            <li class="class-2">List Item 02</li>
            <li class="class-3">List Item 03</li>
          </ul>
        </nav>
      </header>
header>nav^main+footer
or
(header>nav)+main+footer		 
<header>
        <nav></nav>
      </header>
      <main></main>
      <footer></footer>
(header>h2{Heading}+nav>ol>li*5{Link $})+main+footer 
<header>
        <h2>Heading</h2>
        <nav>
          <ol>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
          </ol>
        </nav>
      </header>
      <main></main>
      <footer></footer>