Emmet – raccourcis balise html

All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo> else style → <style></style>

A combiner avec Emmet Commandes pour générer html et Emmet squelette html


zones

snippet résultat
leg
<legend></legend>
sect,section
<section></section>
art,article
<article></article>
hdr,header
<header></header>
ftr,footer
<footer></footer>
adr,address
<address></address>
mn
<main></main>
tem
<template></template>
bq
<blockquote></blockquote>
fig
<figure></figure>
figc
<figcaption></figcaption>


link

snippet résultat
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
link:import, link:im
<link rel="import" href="component.html" />


meta

snippet résultat
meta
<meta />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
meta:redirect
<meta http-equiv="refresh" content="0" url="" />


a

snippet résultat
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>


script

snippet résultat
script
<script></script>
script:src
<script src=""></script>


img

snippet résultat
img
<img src="" alt="" />
img:srcset, img:s
<img srcset="" src="" alt="" />
img:sizes, img:z
<img sizes="" srcset="" src="" alt="" />
ri:dpr, ri:d
<img srcset="" src="" alt="" />
ri:viewport, ri:v
<img sizes="" srcset="" src="" alt="" />


picture, source

snippet résultat
picture,pic
<picture></picture>
source, src
<source />
source:src, src:sc
<source src="" type="" />
source:srcset, src:s
<source srcset="" />
source:media, src:m
<source media="(min-width: )" srcset="" />
source:type, src:t
<source srcset="" type="image/" />
source:sizes, src:z
<source sizes="" srcset="" />
source:media:type, src:mt
<source media="(min-width: )" srcset="" type="image/" />
source:media:sizes, src:mz
<source media="(min-width: )" sizes="" srcset="" />
source:sizes:type, src:zt
<source sizes="" srcset="" type="image/" />
pic+, ri:type, ri:t
<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>
ri:art, ri:a
<picture>
    <source media="(min-width: )" srcset="" />
    <img src="" alt="" />
</picture>


map, area

snippet résultat
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
area:d
<area shape="default" href="" alt="" />
area:c
<area shape="circle" coords="" href="" alt="" />
area:r
<area shape="rect" coords="" href="" alt="" />
area:p
<area shape="poly" coords="" href="" alt="" />
map+
<map name="">
    <area shape="" coords="" href="" alt="" />
</map>


formulaire

snippet résultat
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="text" />
inp
<input type="text" name="" id="" />
input:hidden, input:h
<input type="hidden" name="" />
input:text, input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
input:url
<input type="url" name="" id="" />
input:password, input:p
<input type="password" name="" id="" />
input:datetime
<input type="datetime" name="" id="" />
input:date
<input type="date" name="" id="" />
input:datetime-local
<input type="datetime-local" name="" id="" />
input:month
<input type="month" name="" id="" />
input:week
<input type="week" name="" id="" />
input:time
<input type="time" name="" id="" />
input:tel
<input type="tel" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox, input:c
<input type="checkbox" name="" id="" />
input:radio, input:r
<input type="radio" name="" id="" />
input:range
<input type="range" name="" id="" />
input:file, input:f
<input type="file" name="" id="" />
input:submit, input:s
<input type="submit" value="" />
input:image,input:i
<input type="image" src="" alt="" />
input:button, input:b
<input type="button" value="" />
input:reset
<input type="reset" value="" />
select
<select name="" id=""></select>
select:disabled, select:d
<select name="" id="" disabled="disabled"></select>
select+
<select name="" id="">
      <option value=""></option>
</select>
option, opt
<option value=""></option>
optg
<optgroup></optgroup>
optgroup+, optg+
<optgroup>
      <option value=""></option>
</optgroup>
textarea, tarea
<textarea name="" id="" cols="30" rows="10"></textarea>
btn
<button></button>
button:submit, button:s, btn:s
<button type="submit"></button>
button:reset, button:r, btn:r
<button type="reset"></button>
button:disabled, button:d, btn:d
<button disabled="disabled"></button>
fst, fset
<fieldset></fieldset>
fieldset:disabled,fieldset:d, fset:d, fst:d
<fieldset disabled="disabled"></fieldset>
isindex
<isindex />


liste : ul, li, dl

snippet résultat
ol+
<ol>
    <li></li>
</ol>
ul+
<ul>
    <li></li>
</ul>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>

table,tr,td,colgroup,col

snippet résultat
table+
<table>
      <tr>
      <td></td>
      </tr>
</table>
colgroup+, colg+
<colgroup>
      <col />
</colgroup>
tr+
<tr>
      <td></td>
</tr>

Divers balises du body

snippet résultat
iframe, ifr
<iframe src="" frameborder="0"></iframe>
embed, emb
<embed src="" type="" />
object, obj
<object data="" type=""></object>
param
<param name="" value="" />
marquee
<marquee behavior="" direction=""></marquee>
video
<video src=""></video>
audio
<audio src=""></audio>
keygen
<keygen />
command
<command />

One thought on “Emmet – raccourcis balise html

Comments are closed.