Emmet for HTML: A Beginner’s Guide to Writing Faster Markup ?

Emmet is a toolkit that transforms the way you write HTML and CSS by letting you use abbreviations that expand into complete code. Instead of typing out every angle bracket and tag, you write shorthand expressions that Emmet instantly converts into full markup. It's built into most modern code editors and can make you dramatically faster once you learn its syntax.

1. Creating nested elements

Nested elements mean placing one HTML element inside another. This creates a parent → child relationship in the DOM (Document Object Model).

1. Emmet workflow inside a code editor

1. Essential HTML Workflow

The primary workflow involves typing a short abbreviation followed by a trigger key (usually Tab or Enter) to expand it into full markup.

• HTML Boilerplate: Type ! and press Tab to generate a complete HTML5 skeleton.

• Simple Tags: Type div, p, or h1 to generate <div></div>, <p></p>, or <h1></h1>.

• Nesting & Siblings:

  • Child (>): nav>ul>li expands to a nested list inside a nav.

  • Sibling (+): div+p creates a div and a paragraph at the same level.

  • Climb Up (^): div>p^span puts the span outside the paragraph but inside the div.

• Multiplication (*): ul>li*5 creates an unordered list with five items.

• Classes and IDs: Use CSS selectors like div#header.main to create <div id="header" class="main"></div>.

• Text & Attributes:

  • a{Click Me} creates <a href="">Click Me</a>.

  • img[src="logo.png"] creates <img src="logo.png" alt="">.

• Auto-numbering ($): li.item$*3 generates items with classes item1, item2, and item3.

2. CSS Workflow Shorthands

Emmet works similarly for CSS by fuzzy-matching property names and values.

• Quick Properties: m10 → margin: 10px;, p20 → padding: 20px;.

• Units: w100p → width: 100%;, h10e → height: 10em;.

• Complex Values: pos:a → position: absolute;, df → display: flex;.

• Colors: #f → #ffffff;, c#0 → color: #000;.

3. Advanced Actions

Beyond simple expansion, Emmet provides commands for refactoring existing code.

• Wrap with Abbreviation: Select existing text/code and use the command palette (Ctrl+Shift+P > Emmet: Wrap with Abbreviation) to wrap it in new tags like ul>li*.

• Remove Tag: Quickly strip a tag while keeping its inner content.

• Go to Matching Pair: Jump between opening and closing tags.

4. Editor Configuration

While built-in to VS Code, Emmet often requires minor tweaks for other environments:

• Enable for React/JSX: In VS Code settings, add "javascript": "javascriptreact" to the Emmet: Include Languages section.

• Custom Snippets: You can define your own reusable abbreviations in a snippets.json file and point your editor to its path.

• Trigger on Tab: If Tab doesn't expand abbreviations by default, enable "emmet.triggerExpansionOnTab": true in your JSON settings.

Would you like to explore:

• A cheat sheet of the most common shortcuts?

• How to configure Emmet for React (JSX) or Vue?

• Instructions for a specific editor like Sublime Text or Notepad++