urlscan.io logo urlscan.io
SecurityTrails logo

docs.emmet.io Open in urlscan Pro
128.199.54.7  Public Scan

Back to summary
URL: https://docs.emmet.io/
Submission: On December 21 via manual from US — Scanned from NL

Form analysis 0 forms found in the DOM

Text Content

EMMET DOCUMENTATION

Back to main website

Free access to 5 Frontend Masters courses! Sign up and advance your JavaScript
skills. No credit card requiredads via Carbon
 * Abbreviations
   * Syntax
   * Element types
   * Implicit tag names
   * “Lorem Ipsum” generator
 * CSS Abbreviations
   * Vendor prefixes
   * Gradients
   * Fuzzy search
 * Actions
   * Expand Abbreviation
   * Balance
   * Go to Matching Pair
   * Wrap with Abbreviation
   * Go to Edit Point
   * Select Item
   * Toggle Comment
   * Split/Join Tag
   * Remove Tag
   * Merge Lines
   * Update Image Size
   * Evaluate Math Expression
   * Increment/Decrement Number
   * Reflect CSS Value
   * Encode/Decode Image to data:URL
 * Filters
   * Yandex BEM/OOCSS
 * Customization
   * snippets.json
   * preferences.json
   * syntaxProfiles.json
 * Cheat Sheet

More developer tools:

 * Emmet LiveStyle
   Real-time bi-directional edit tool for CSS, LESS and SCSS.
 * Emmet Re:view
   Fast and easy way to test responsive design side-by-side.

ad
MailchimpTarget your best customers and see up to 88% more revenue with
Predictive Segments. Sign up today.


EMMET — THE ESSENTIAL TOOLKIT FOR WEB-DEVELOPERS

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS
workflow:

<!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> |
</body> </html> ~~~ tooltip: Type CSS-like abbreviation type:
ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action
to expand it into HTML ::: “Expand Abbreviation” (Tab key) wait: 600 run:
emmet.expand_abbreviation wait: 1000 tooltip: Traverse between important code
points with “Next/Previous Edit Point” action ::: “Next Edit Point” (Ctrl-Alt-→)
<br /> “Previous Edit Point” (Ctrl-Alt-←) wait: 1000 run: {command:
'emmet.next_edit_point', times: 7} wait: 1000 tooltip: Select tags with
“Balance” action ::: “Balance” (Cmd-D) run: {command: 'emmet.balance_outward',
times: 3} wait: 1000 moveTo: 102 tooltip: Select important parts with “Select
Next/Previous Item” action ::: “Select Next Item” (Shift-Cmd-.) <br /> “Select
Previous Item” (Shift-Cmd-,) run: {command: 'emmet.select_next_item', times: 7,
beforeDelay: 300} wait: 2000 moveTo: 95 wait: 1000 tooltip: Quickly comment full
tag with “Toggle Comment” action ::: “Toggle Comment” (Cmd-/) run: {command:
'emmet.toggle_comment', times: 2, beforeDelay: 1000}
Play demoTry it yourself
 
1

<!doctype html>

2

<html lang="en">

3

<head>

4

    <title>Demo</title>

5

</head>

6

<body>

7

    

8

</body>

9

</html>



 * “Expand Abbreviation” (Tab key)
 * “Next Edit Point” (Ctrl+Alt+→)
   “Previous Edit Point” (Ctrl+Alt+←)
 * “Balance” (Ctrl+D)
 * “Select Next Item” (Shift+Ctrl+.)
   “Select Previous Item” (Shift+Ctrl+,)
 * “Toggle Comment” (Ctrl+/)

▶ Watch demo

Basically, most text editors out there allow you to store and re-use commonly
used code chunks, called “snippets”. While snippets are a good way to boost your
productivity, all implementations have common pitfalls: you have to define the
snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like
expressions that can be dynamically parsed, and produce output depending on what
you type in the abbreviation. Emmet is developed and optimised for
web-developers whose workflow depends on HTML/XML and CSS, but can be used with
programming languages too.

Start learning Emmet with the abbreviation syntax and available actions.

Download plugin for your favourite editor



Support: info@emmet.io
Created with DocPad and Gulp.js
Minimal theme by orderedlist

View page source on GitHub