Skip to main content
March 23, 2026Dan Rodney/3 min read

Topic 3B: Emmet: HTML Abbreviations

Master HTML abbreviations with powerful Emmet shortcuts

Getting Started with Emmet

Type any abbreviation and hit Tab to expand it into full HTML code. Emmet uses CSS-like syntax to make HTML coding faster and more efficient.

Mastering Emmet's HTML Abbreviations for Faster Development

Emmet revolutionizes HTML workflow through its powerful abbreviation system that transforms short snippets into complete HTML structures. Simply type an abbreviation and press Tab to expand it into full HTML code—a technique that can cut your markup writing time by 70% or more. For comprehensive reference, Emmet's official cheat sheet at docs.Emmet.io/cheat-sheet remains the definitive resource for all available abbreviations.

The examples below demonstrate essential abbreviations that every modern developer should master. Notice how Emmet adopts CSS-like syntax, making it intuitive for anyone familiar with selectors and CSS methodology.

Basic Element Creation

Start with the fundamentals—creating individual HTML elements:

h1

<h1></h1>
Navigation Shortcut

After typing content into the h1 tag, hit Tab to jump directly inside the p tag for efficient content entry.

p

<p></p>
Navigation Shortcut

After typing content into the h1 tag, hit Tab to jump directly inside the p tag for efficient content entry.

img

<img src="" ALT="">

div

<div></div>

Basic HTML Elements

Heading Elements

Use h1, h2, h3, etc. to quickly generate heading tags with proper opening and closing syntax.

Content Elements

Elements like p for paragraphs and img for images automatically include required attributes like src and alt.

Container Elements

The div element creates the fundamental building block for page layout and content organization.

CSS-Style ID and Class Assignment

Emmet's real power emerges when you leverage CSS selector syntax to add classes and IDs instantly:

#myElement

<div id="myElement"></div>

ID vs Class Selectors

FeatureID (#myElement)Class (.myElement)
Symbol#.
Outputid attributeclass attribute
Default Elementdivdiv
UsageUnique identifierReusable styling
Recommended: Both default to div elements when no specific tag is specified

.myElement

<div class="myElement"></div>

NOTE: Emmet assumes div as the default element when you specify only a class or ID. To apply classes to other elements, combine the element name with the class selector as shown below.

ID vs Class Selectors

FeatureID (#myElement)Class (.myElement)
Symbol#.
Outputid attributeclass attribute
Default Elementdivdiv
UsageUnique identifierReusable styling
Recommended: Both default to div elements when no specific tag is specified

ul.myList

<ul class="myList"></ul>
Element-Specific Classes

When you want a class on a specific element type, specify the element first, then the class. For example, ul.myList creates a ul element with the myList class.

Hierarchical Structure with Child Operators

Build complex nested structures using the > operator to define parent-child relationships:

ul>li

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

Understanding Emmet Multiplication

1

Parent Element

Start with the container element (ul for unordered list)

2

Child Operator

Use > to indicate direct child relationship

3

Multiplication

Add *3 to create three identical child elements automatically

Advanced Emmet Operators

Child Operator (>)

Creates parent-child relationships between elements. Essential for proper HTML nesting structure.

Sibling Operator (+)

Places elements at the same level. Perfect for creating adjacent content blocks.

Multiplication (*)

Repeats elements the specified number of times. Saves significant time when creating lists or grids.

Numbering ($)

Automatically increments numbers in class names, IDs, or attributes for each repeated element.

CSS Attribute Selector Syntax

Emmet uses CSS attribute selector syntax with square brackets. Learn more about attribute selectors at css-tricks.com/attribute-selectors for advanced CSS techniques.

Multiplication for Repeated Elements

Scale your markup instantly with the multiplication operator *:

ul>li*3

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

Understanding Emmet Multiplication

1

Parent Element

Start with the container element (ul for unordered list)

2

Child Operator

Use > to indicate direct child relationship

3

Multiplication

Add *3 to create three identical child elements automatically

ul.myList>li*3

<ul class="myList">
   <li></li>
   <li></li>
   <li></li>
</ul>
Element-Specific Classes

When you want a class on a specific element type, specify the element first, then the class. For example, ul.myList creates a ul element with the myList class.

Sibling Elements with Adjacent Operators

Create elements at the same hierarchical level using the + operator:

h1+p

<h1></h1>
<p></p>

TIP: After adding content to the h1 tag, press Tab to automatically navigate to the p tag's content area—a productivity boost that compounds throughout your development session.

Navigation Shortcut

After typing content into the h1 tag, hit Tab to jump directly inside the p tag for efficient content entry.

Complex Structures: Combining Multiple Operators

Real-world development often requires sophisticated markup patterns. Emmet handles complex combinations effortlessly:

div#myContent>h1+p*3

<div id="myContent">
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</div>

Basic HTML Elements

Heading Elements

Use h1, h2, h3, etc. to quickly generate heading tags with proper opening and closing syntax.

Content Elements

Elements like p for paragraphs and img for images automatically include required attributes like src and alt.

Container Elements

The div element creates the fundamental building block for page layout and content organization.

Navigation Shortcut

After typing content into the h1 tag, hit Tab to jump directly inside the p tag for efficient content entry.

Automatic Numbering with Dollar Sign Variables

The $ symbol provides automatic numbering for repeated elements—essential for creating systematic class names or sequential content:

ul>li.item$*5>a

<ul>
   <li class="item1"><a href=""></a></li>
   <li class="item2"><a href=""></a></li>
   <li class="item3"><a href=""></a></li>
   <li class="item4"><a href=""></a></li>
   <li class="item5"><a href=""></a></li>
</ul>

NOTE: The $ symbol outputs the current iteration number of repeated elements, enabling systematic naming conventions crucial for maintainable CSS and JavaScript.

Advanced Emmet Operators

Child Operator (>)

Creates parent-child relationships between elements. Essential for proper HTML nesting structure.

Sibling Operator (+)

Places elements at the same level. Perfect for creating adjacent content blocks.

Multiplication (*)

Repeats elements the specified number of times. Saves significant time when creating lists or grids.

Numbering ($)

Automatically increments numbers in class names, IDs, or attributes for each repeated element.

CSS Attribute Selector Syntax

Emmet uses CSS attribute selector syntax with square brackets. Learn more about attribute selectors at css-tricks.com/attribute-selectors for advanced CSS techniques.

Attribute Assignment Using CSS Selector Syntax

Set specific attribute values using square bracket notation, familiar from CSS attribute selectors:

ul>li.item$*5>a[href="/details/"]

<ul>
   <li class="item1"><a href="/details/"></a></li>
   <li class="item2"><a href="/details/"></a></li>
   <li class="item3"><a href="/details/"></a></li>
   <li class="item4"><a href="/details/"></a></li>
   <li class="item5"><a href="/details/"></a></li>
</ul>

NOTE: The a[href=""] syntax leverages CSS attribute selector methodology. If you're unfamiliar with attribute selectors, CSS-Tricks maintains an excellent primer at css-tricks.com/attribute-selectors that complements your Emmet workflow.

Advanced Emmet Operators

Child Operator (>)

Creates parent-child relationships between elements. Essential for proper HTML nesting structure.

Sibling Operator (+)

Places elements at the same level. Perfect for creating adjacent content blocks.

Multiplication (*)

Repeats elements the specified number of times. Saves significant time when creating lists or grids.

Numbering ($)

Automatically increments numbers in class names, IDs, or attributes for each repeated element.

CSS Attribute Selector Syntax

Emmet uses CSS attribute selector syntax with square brackets. Learn more about attribute selectors at css-tricks.com/attribute-selectors for advanced CSS techniques.

Dynamic Attributes with Sequential Values

Combine attribute assignment with dollar sign variables to create systematic, numbered attributes—particularly valuable for image galleries or data lists:

ul>li.item$*5>img[src="img/photo$.jpg"]

<ul>
   <li class="item1"><img src="img/photo1.jpg" ALT=""></li>
   <li class="item2"><img src="img/photo2.jpg" ALT=""></li>
   <li class="item3"><img src="img/photo3.jpg" ALT=""></li>
   <li class="item4"><img src="img/photo4.jpg" ALT=""></li>
   <li class="item5"><img src="img/photo5.jpg" ALT=""></li>
</ul>

Lorem Ipsum Generation for Content Prototyping

Emmet includes built-in lorem ipsum generation, eliminating the need for external placeholder text generators during development:

lorem20

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt illo non dolor nobis eveniet dolore consectetur nostrum, sequi officia qui!

NOTE: Adjust the number after lorem to specify your desired word count—an invaluable feature for creating realistic content layouts during the prototyping phase.

Emmet Best Practices

0/5

Key Takeaways

1Emmet abbreviations expand into full HTML code when you hit the Tab key, dramatically speeding up HTML development
2Basic elements like h1, p, img, and div generate properly formatted opening and closing tags automatically
3ID selectors (#) and class selectors (.) both default to div elements unless a specific tag is specified
4The child operator (>) creates parent-child relationships while the sibling operator (+) places elements at the same level
5Multiplication (*) repeats elements a specified number of times, perfect for creating lists and repeated structures
6The dollar sign ($) automatically numbers repeated elements in class names, IDs, and attributes
7Attribute selectors use square bracket syntax [attribute="value"] following CSS selector conventions
8Lorem ipsum text generation is customizable by changing the number after lorem to specify word count

RELATED ARTICLES