Emmet Abbreviations

Quick HTML & CSS Generation with Emmet

1. Basic HTML Abbreviations:
   • html:5 → Generates a basic HTML5 boilerplate.
   • ul>li*5 → Creates an unordered list with 5 list items.
   • div.container>header+main+footer → Creates a div with nested header, main, and footer elements.
   • a[href="http://example.com"] → Creates an anchor link.
2. CSS Abbreviations:
   • m10 → Translates to margin: 10px;
   • p20-10 → Translates to padding: 20px 10px;
   • w100 → Translates to width: 100%;
   • bgc#f00 → Translates to background-color: #ff0000;
3. Nesting with Emmet:
   • nav>ul>li*3>a → Creates a navigation menu with 3 links.
   • form>label+input[type="text"]*2+button → Creates a form with two text inputs and a button.
4. Advanced Techniques:
   • Climbing Up with ^: For example: div>p>span^a creates a div containing a p with a span, and then an a tag at the same level as the p.
   • Sibling Combinator + and Multiplication *: div>p*3+ul>li*2 generates three p tags and a ul with two li tags.
5. Emmet Customization: Customize Emmet shortcuts through Preferences > User Snippets.