1<!doctype html> 2<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 3<!--[if IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]--> 4<!--[if IE 8]> <html class="no-js lt-ie10 lt-ie9"> <![endif]--> 5<!--[if IE 9]> <html class="no-js lt-ie10"> <![endif]--> 6<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 7<head> 8<meta charset="utf-8" /> 9<meta http-equiv="X-UA-Compatible" content="chrome=1" /> 10<title>Abbreviations</title> 11<link rel="shortcut icon" href="/-/3755353140/favicon.ico" /> 12<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 13<link rel="stylesheet" href="/-/3034278362/css/main.css" /> 14</head> 15<body> 16 <div class="wrapper"> 17 <header class="page-header"> 18 <h1 class="site-title"> 19 20 <a href="/">Emmet Documentation</a> 21 22 </h1> 23 <p class="back-to-main"><a href="http://emmet.io">Back to main website</a></p> 24 <div id="gptong-container"> 25 <div class="gptong"> 26
26<script> 27 function __carbonFallback(script) { 28 var domain = 'sup.emmet.io'; 29 var fallback = document.createElement('script'); 30 fallback.async = true; 31 fallback.id = script.id; 32 fallback.src = script.src.replace(/^(\w+:\/\/)([^\/]+)/, '$1' + domain) + '\u0026cd=' + domain; 33 34 script.parentNode.insertBefore(fallback, script); 35 script.parentNode.removeChild(script); 36 } 37 </script>
37 38
38<script async src="//cdn.carbonads.com/carbon.js?serve=CKYIKK7J&placement=emmetio" id="_carbonads_js" onerror="__carbonFallback(this)"></script>
38 39 </div> 40 </div> 41 42 <nav> 43 44 45<ul class="nav"> 46 47 <li class="nav__item nav__item_selected"> 48 49 <strong>Abbreviations</strong> 50 51 52 53<ul class="nav"> 54 55 <li class="nav__item"> 56 57 <a href="/abbreviations/syntax/">Syntax</a> 58 59 60 </li> 61 62 <li class="nav__item"> 63 64 <a href="/abbreviations/types/">Element types</a> 65 66 67 </li> 68 69 <li class="nav__item"> 70 71 <a href="/abbreviations/implicit-names/">Implicit tag names</a> 72 73 74 </li> 75 76 <li class="nav__item"> 77 78 <a href="/abbreviations/lorem-ipsum/">âLorem Ipsumâ generator</a> 79 80 81 </li> 82 83</ul> 84 85 86 </li> 87 88 <li class="nav__item"> 89 90 <a href="/css-abbreviations/">CSS Abbreviations</a> 91 92 93 94<ul class="nav"> 95 96 <li class="nav__item"> 97 98 <a href="/css-abbreviations/vendor-prefixes/">Vendor prefixes</a> 99 100 101 </li> 102 103 <li class="nav__item"> 104 105 <a href="/css-abbreviations/gradients/">Gradients</a> 106 107 108 </li> 109 110 <li class="nav__item"> 111 112 <a href="/css-abbreviations/fuzzy-search/">Fuzzy search</a> 113 114 115 </li> 116 117</ul> 118 119 120 </li> 121 122 <li class="nav__item"> 123 124 <a href="/actions/">Actions</a> 125 126 127 128<ul class="nav"> 129 130 <li class="nav__item"> 131 132 <a href="/actions/expand-abbreviation/">Expand Abbreviation</a> 133 134 135 </li> 136 137 <li class="nav__item"> 138 139 <a href="/actions/match-pair/">Balance</a> 140 141 142 </li> 143 144 <li class="nav__item"> 145 146 <a href="/actions/go-to-pair/">Go to Matching Pair</a> 147 148 149 </li> 150 151 <li class="nav__item"> 152 153 <a href="/actions/wrap-with-abbreviation/">Wrap with Abbreviation</a> 154 155 156 </li> 157 158 <li class="nav__item"> 159 160 <a href="/actions/go-to-edit-point/">Go to Edit Point</a> 161 162 163 </li> 164 165 <li class="nav__item"> 166 167 <a href="/actions/select-item/">Select Item</a> 168 169 170 </li> 171 172 <li class="nav__item"> 173 174 <a href="/actions/toggle-comment/">Toggle Comment</a> 175 176 177 </li> 178 179 <li class="nav__item"> 180 181 <a href="/actions/split-join-tag/">Split/Join Tag</a> 182 183 184 </li> 185 186 <li class="nav__item"> 187 188 <a href="/actions/remove-tag/">Remove Tag</a> 189 190 191 </li> 192 193 <li class="nav__item"> 194 195 <a href="/actions/merge-lines/">Merge Lines</a> 196 197 198 </li> 199 200 <li class="nav__item"> 201 202 <a href="/actions/update-image-size/">Update Image Size</a> 203 204 205 </li> 206 207 <li class="nav__item"> 208 209 <a href="/actions/evaluate-math/">Evaluate Math Expression</a> 210 211 212 </li> 213 214 <li class="nav__item"> 215 216 <a href="/actions/inc-dec-number/">Increment/Decrement Number</a> 217 218 219 </li> 220 221 <li class="nav__item"> 222 223 <a href="/actions/reflect-css-value/">Reflect CSS Value</a> 224 225 226 </li> 227 228 <li class="nav__item"> 229 230 <a href="/actions/base64/">Encode/Decode Image to data:URL</a> 231 232 233 </li> 234 235</ul> 236 237 238 </li> 239 240 <li class="nav__item"> 241 242 <a href="/filters/">Filters</a> 243 244 245 246<ul class="nav"> 247 248 <li class="nav__item"> 249 250 <a href="/filters/bem/">Yandex BEM/OOCSS</a> 251 252 253 </li> 254 255</ul> 256 257 258 </li> 259 260 <li class="nav__item"> 261 262 <a href="/customization/">Customization</a> 263 264 265 266<ul class="nav"> 267 268 <li class="nav__item"> 269 270 <a href="/customization/snippets/">snippets.json</a> 271 272 273 </li> 274 275 <li class="nav__item"> 276 277 <a href="/customization/preferences/">preferences.json</a> 278 279 280 </li> 281 282 <li class="nav__item"> 283 284 <a href="/customization/syntax-profiles/">syntaxProfiles.json</a> 285 286 287 </li> 288 289</ul> 290 291 292 </li> 293 294 <li class="nav__item"> 295 296 <a href="/cheat-sheet/">Cheat Sheet</a> 297 298 299 </li> 300 301</ul> 302 303 </nav> 304 <div class="more-tools"> 305 <p class="more-tools__title">More developer tools:</p> 306 <ul class="more-tools__list"> 307 <li class="more-tools__list-item more-tools__list-item_livestyle"> 308 <a href="http://livestyle.io" class="more-tools__list-item-link"> 309 Emmet LiveStyle 310 <div class="more-tools__list-item-info">Real-time bi-directional edit tool for CSS, LESS and SCSS.</div> 311 </a> 312 </li> 313 <li class="more-tools__list-item more-tools__list-item_review"> 314 <a href="http://re-view.emmet.io" class="more-tools__list-item-link"> 315 Emmet Re:view 316 <div class="more-tools__list-item-info">Fast and easy way to test responsive design side-by-side.</div> 317 </a> 318 </li> 319 </ul> 320 </div> 321 </header> 322 <section class="page-content"> 323 <div class="bsa-cpc"></div> 324 <h1><a name="abbreviations" href="/abbreviations/#abbreviations" class="anchor"></a>Abbreviations</h1> 325<p>Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviationâs syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it. </p> 326<p>Hereâs an example: this abbreviation</p> 327<pre><code><span class="smalltalk"><span class="symbol">#page</span>>div.logo+ul<span class="symbol">#navigation</span>>li*<span class="number">5</span>>a{<span class="class">Item</span> <span class="char">$}</span></span> 328</code></pre><p>...can be transformed into</p> 329<pre><code><span class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"page"</span>></span> 330 <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"logo"</span>></span><span class="tag"></<span class="title">div</span>></span> 331 <span class="tag"><<span class="title">ul</span> <span class="attribute">id</span>=<span class="value">"navigation"</span>></span>
332 <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Item 1<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span> 333 <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Item 2<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span> 334 <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Item 3<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span> 335 <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Item 4<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span> 336 <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Item 5<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span> 337 <span class="tag"></<span class="title">ul</span>></span> 338<span class="tag"></<span class="title">div</span>></span></span> 339</code></pre><p>...with just a single key stroke. In many editors (such as Eclipse, Sublime Text 2, Espresso etc.) plugins will also generate proper <em>tabstop marks</em> so you can quickly traverse between important places of generated code with the Tab key.</p> 340<p>Abbreviations are optimised for, but not limited to, HTML and XML generation, and make writing tedious markup code a breeze. You can start learning <a href="/abbreviations/syntax/">syntax</a> to unleash the full power of Emmet abbreviations.</p> 341 342<div id="disqus_thread"></div> 343<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 344<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> 345 </section> 346 <div class="clear"></div> 347 <footer class="page-footer"> 348 <p class="small-text">Support: <a href="mailto:[email protected]">[email protected]</a><br />Created with <a href="https://github.com/bevry/docpad">DocPad</a> and <a href="http://gulpjs.com">Gulp.js</a><br />Minimal theme by <a href="https://github.com/orderedlist/minimal">orderedlist</a></p> 349 <p class="small-text"><a href="https://github.com/emmetio/emmet-docs/tree/master/src/documents/abbreviations/index.html.md">View page source on GitHub</a></p> 350 </footer> 351 </div> 352
353<script src="/-/1075052327/js/main.js"></script>
vendor: 1 bytes, line 353
353
354<script> 355 var _gaq = _gaq || []; 356 _gaq.push(['_setAccount', 'UA-4523560-5']); 357 _gaq.push(['_trackPageview']); 358 359 (function() { 360 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 361 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 362 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 363 })(); 364 365 if (document.getElementById('disqus_thread')) { 366 var disqus_shortname = 'emmetdocs'; 367 (function() { 368 var dsq = document.createElement('script'); 369 dsq.type = 'text/javascript'; 370 dsq.async = true; 371 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 372 document.getElementsByTagName('head')[0].appendChild(dsq); 373 })(); 374 } 375</script>
vendor: 1 bytes, line 375
375
376<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
vendor: 1 bytes, line 376
376
377<script> 378(function() { 379 if(typeof _bsa !== 'undefined') { 380 if (_bsa) { 381 _bsa.init('default', 'CKYD4K7N', 'placement:emmetio', { 382 target: '.bsa-cpc', 383 align: 'horizontal', 384 disable_css: 'true' 385 }); 386 } 387 } 388})(); 389</script>
389 390</body> 391</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.