Brackets Emmet HTML

Prev
Next

Brackets Emmet Cheatsheet for HTML

In HTML, Emmet will convert all the unknown abbreviations into unknown tags.

Example:
abc will convert to <abc></abc>

Suppose, you type letter “a” followed by the ‘Tab’ Keyword, then it automatically creates the skeleton of the anchor tag which is <a href=””></a>.

Similarly, if you wish to create the skeleton of any tag, you need to simply write that particular tag name and place your cursor at the end. Once the cursor is at end, simply press the ‘Tab‘ Key

We are going to show a list of important abbreviations here.

bdo tag
bdo:r – Expands to <bdo dir=”rtl”></bdo>

Similarly, try expanding bdo:l  and see for yourself.

link tag
link:css Press ‘Tab’ key- <link rel=”stylesheet” href=”style.css”>
link:favicon – Press ‘Tab’ key – <link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>
link:rss – Press ‘Tab’ key – <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”rss.xml”>

meta tag
meta:utf – Press ‘Tab’ key – <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
meta:vp – Press ‘Tab’ key – <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
meta:compat – Press ‘Tab’ key – <meta http-equiv=”X-UA-Compatible” content=”IE=7″>

img tag
img:srcset/img:s – Press ‘Tab’ key – <img srcset=”” src=”” alt=””>
img:sizes/img:z – Press ‘Tab’ key – <img sizes=”” srcset=”” src=”” alt=””>

source tag
source:src, src:sc – Press ‘Tab’ key – <source src=”” type=””>
source:type – <source srcset=”” type=”image/”>
source:media – Press ‘Tab’ key – <source media=”(min-width: )” srcset=””>
source:media:type – Press ‘Tab’ key – <source media=”(min-width: )” srcset=”” type=”image/”>

area tag
area:d – Press ‘Tab’ key – <area shape=”default” href=”” alt=””>

Similarly, area:c will create a circle, area:r will create a rectangle while area:p will create a polygon.

form tag
form:get – Press ‘Tab’ key – <form action=”” method=”get”></form>.
Similarly, form:post will create the “post” method

input tag
input – Press ‘Tab’ key – <input type=”text”>
inp – Press ‘Tab’ key – <input type=”text” name=”” id=””>

To create any input type, simply type as input:input_type.
For Example–
If you wish to create an input type as email, then type –
input:email and it will expand to <input type=”email” name=”” id=””>

In the same way, you can use input:hidden, input:text, input:search, input:email, input:url, input:password, input:datetime, input:month, input:week, input:time, input:tel, input:number, input:color, input:checkbox, input:radio, input:range, input:file, input:submit,
input:image, input:button, input:reset

select tag
select:disabled – Press ‘Tab’ key – <select name=”” id=”” disabled></select>

button tag
button:submit/button:s/ btn:s – Press ‘Tab’ key – <button type=”submit”></button>
button:reset/button:r, btn:r – Press ‘Tab’ key – <button type=”reset”></button>
button:disabled/button:d/btn:d – Press ‘Tab’ key – <button disabled></button>
fieldset:disabled/fieldset:d/fset:d/fst:d – Press ‘Tab’ key – <fieldset disabled></fieldset>

Using some part of the tag

There are some short forms which will do magic for you.

The idea is that you can use the initial 2,3,4 or 5 letters followed by the ‘Tab’ key to expand the tag.

Use the main 2 letters where you need to stress more while speaking
bq – Press ‘Tab’ key – <blockquote></blockquote>
kg – Press ‘Tab’ key – <keygen>
mn – Press ‘Tab’ key – <main></main>

Use the 1st three letters for these tags followed by ‘Tab’
pic – Press ‘Tab’ key – <picture></picture>
ifr – Press ‘Tab’ key – <iframe src=”” frameborder=”0″></iframe>
emb – Press ‘Tab’ key – <embed src=”” type=””>
obj – Press ‘Tab’ key – <object data=”” type=””></object>
cap – Press ‘Tab’ key – <caption></caption>
fig – Press ‘Tab’ key – <figure></figure>
leg – Press ‘Tab’ key – <legend></legend>
art – Press ‘Tab’ key – <article></article>
str – Press ‘Tab’ key – <strong></strong>
tem – Press ‘Tab’ key – <template></template>
out – Press ‘Tab’ key – <output></output>
det – Press ‘Tab’ key – <details></details>

Use the main 3 letters where you need to stress more while speaking
fst – Press ‘Tab’ key – <fieldset></fieldset>
btn – Press ‘Tab’ key – <button></button>
hdr – Press ‘Tab’ key – <header></header>
ftr – Press ‘Tab’ key – <footer></footer>
adr – Press ‘Tab’ key – <address></address>
dlg – Press ‘Tab’ key – <dialog></dialog>
cmd – Press ‘Tab’ key – <command>

Use the 1st 4 letters
figc – Press ‘Tab’ key – <figcaption></figcaption>
colg – Press ‘Tab’ key – <colgroup></colgroup>
optg – Press ‘Tab’ key – <optgroup></optgroup>
sect – Press ‘Tab’ key – <section></section>
prog – Press ‘Tab’ key – <progress></progress>

Use the 1st 5 letters
datag – Press ‘Tab’ key – <datagrid></datagrid>
datal – Press ‘Tab’ key – <datalist></datalist>

Use the main 5 letters where you need to stress more while speaking
tarea – Press ‘Tab’ key – <textarea name=”” id=”” cols=”30″ rows=”10″></textarea>

Create parent with child using '+' character

Some elements/tags are meaningless without their child.

For Example:

  • <ol> must contain <li> tag inside it.
  • <ul> must contain <li> tag inside it.
  • <dl> must contain <dt> & <dd> tags inside it.
  • <map> must contain <area> tag inside it.
  • <table> must contain <tr> tag inside it.
  • <tr> must contain <th> or <td> tags inside it.
  • <colgroup> must contain <col> tag inside it.
  • <select> must contain <option> tag inside it.
  • <picture> ideally contains <source> & <img> tags inside it.
  • <optgroup> must contain <option> tag inside it

Create ordered list with items

ol+

Output

<ol>
    <li></li>
</ol>

Create unordered list with items

ul+

Output

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

Create datalist with items

dl+

Output

<dl>
    <dt></dt>
    <dd></dd>
</dl>

Create map with area

map+

Output

<map name="">
    <area shape="" coords="" href="" alt="">
</map>

Create table with table row and data

table+

Output

<table>
    <tr>
        <td></td>
    </tr>
</table>

Create colgroup with col

colgroup+, colg+

Output

<colgroup>
    <col>
</colgroup>

Create table Row with data

tr+

Output

<tr>
    <td></td>
</tr>

Create 'Select' with option

select+

Output

<select name="" id="">
    <option value=""></option>
</select>

Create 'optgroup' with option

optgroup+, optg+

Output

<optgroup>
    <option value=""></option>
</optgroup>

Create picture tag with child as source and image

pic+

Output

<picture>
    <source srcset="">
    <img src="" alt="">
</picture>
Prev
Next
Youtube Facebook-f Twitter

Tutorials for all brains!