Brackets emmet

Prev
Next

Brackets Emmet

Emmet is one of the best plugin for code editors like Brackets, Sublime Text, Atom, Eclipse, Code, Notepad++, Dreamweaver, etc. This plugin helps in generating expanded tags with the help of abbreviations.

This Emmet for Brackets tutorial  will work on any code editors with the same set of abbreviations.

Let’s understand the type of abbreviations and how we can use these abbreviations to generate the structure of tags in Brackets using Emmet.

Most of the time, you need to write a particular abbreviation followed by a Tab Key in the keyboard.

1. To create skeleton of HTML

To create a skeleton of HTML, type exclamation mark(!) and click the 'Tab' key

Output

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>


</body>
</html>

2. To create child elements using '>'

If you wish to create child elements, you can do so by simply using the ‘>’ character as below –

Child Example 1:

ul>li
After typing the above command, place your cursor at the end(after li) and then press the 'Tab' key.

Output

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

Child Example 2:

div>ul>li
After typing the above command, place your cursor at the end(after li) and then press the 'Tab' key.

Output

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

3. To create Sibling elements using '+'

To create a sibling elements, you can do so by simply using the ‘+’ character as below –

Sibling Example:

section+p+bq
After placing your cursor at end, press 'Tab' key.

Output

<section></section>
<p></p>
<blockquote></blockquote>

4. To create ID & CLASS attributes

To create an Id, just use a ‘#’ character 

ID Example:

#resnavbar-type
After placing your cursor at end, press 'Tab' key.

Output

<div id="resnavbar-type"></div>

To create a class, simply use a ‘.’ character 

CLASS Example:

div.container
After placing your cursor at end, press 'Tab' key.

Output

<div class="container"></div>

To create a class with Id.

CLASS with ID Example:

#container.x1.x2.x3
After placing your cursor at end, press 'Tab' key.

Output

<div id="container" class="x1 x2 x3"></div>

5. To create implicit tag names

Suppose, you wish to create implicit tags, you can simply use a ‘.’ character followed by the class name.

Implicit tag Example 1:

.xyz
After placing your cursor at end, press 'Tab' key.

Output

<div class="xyz"></div>

Implicit tag Example 2:

em>.car
After placing your cursor at end, press 'Tab' key.

Output

<em><span class="car"></span></em>

Implicit tag Example 3:

ul>.car
After placing your cursor at end, press 'Tab' key.

Output

<ul>
    <li class="car"></li>
</ul>

Implicit tag Example 4:

table>.r>.c
After placing your cursor at end, press 'Tab' key.

Output

<table>
    <tr class="r">
        <td class="c"></td>
    </tr>
</table>

6. To create text within an element using {} character

The simplest way to create text is by using the text inside the {} character.

Text Example 1:

a{Link Text}
After placing your cursor at end, press 'Tab' key.

Output

<a href="">Link text</a>

Text Example 2:

.container>li>{Click }+a{Here}
After placing your cursor at end, press 'Tab' key.

Output

<div class="container">
    <li>Click <a href="">Here</a></li>
</div>

Text Example 3:

div>p{lorem}

Output

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum consequatur repudiandae repellat blanditiis sed commodi sint dolorum vero. Animi provident quod magnam, incidunt, optio earum dolores quia suscipit neque quaerat.</p>
</div>

7. To create the code multiple times using *

Let’s create a list of 6 items

Multiply Example 1:

ul>li*6
After placing your cursor at end, press 'Tab' key.

Output

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

Multiply Example 2:

ol.multiplication>li.items*6>a{Item Name}
After placing your cursor at end, press 'Tab' key.

Output

<ol class="multiplication">
    <li class="items"><a href="">Item Name</a></li>
    <li class="items"><a href="">Item Name</a></li>
    <li class="items"><a href="">Item Name</a></li>
    <li class="items"><a href="">Item Name</a></li>
    <li class="items"><a href="">Item Name</a></li>
    <li class="items"><a href="">Item Name</a></li>
</ol>

8. To add numbers using $

Assume that your requirement is to create a table with 3 columns like below

Numbers Example 1:

table>tr>th{version$}*3
Step 1- After placing your cursor at end, press 'Tab' key.

Output

<table>
    <tr>
        <th>version1</th>
        <th>version2</th>
        <th>version3</th>
    </tr>
</table>
Step 2- To create another row , you can write tr>td>{java$}*3. Now, place your cursor after number 3 and press 'Tab' key 
<table>
    <tr>
        <th>version1</th>
        <th>version2</th>
        <th>version3</th>
    </tr><tr>
        <td>java1</td>
        <td>java2</td>
        <td>java3</td>
    </tr>
</table>

Numbers Example 2:

.container>img.image$*5
Keep your cursor at the end & press 'Tab' key.

Output

<div class="container">
    <img src="" alt="" class="image1">
    <img src="" alt="" class="image2">
    <img src="" alt="" class="image3">
    <img src="" alt="" class="image4">
    <img src="" alt="" class="image5">
</div>

Numbers Example 3:

h$[title="title$"]{Heading $}*3
Keep your cursor at the end & press 'Tab' key.

Output

<h1 title="title1">Heading 1</h1>
<h2 title="title2">Heading 2</h2>
<h3 title="title3">Heading 3</h3>

Numbers Example 4 - Start number in different format

.vehicle>ul>li.tmodel_$$$*6
Keep your cursor at the end & press 'Tab' key.

Output

<div class="vehicle">
    <ul>
        <li class="tmodel_001"></li>
        <li class="tmodel_002"></li>
        <li class="tmodel_003"></li>
        <li class="tmodel_004"></li>
        <li class="tmodel_005"></li>
        <li class="tmodel_006"></li>
    </ul>
</div>

Note/Info:
Here, the numbers are shown in the format 001, 002, 003, etc because the definition has $$$.

Similarly, if we give $$ in the definition, it will display 01, 02, 03, etc in the output.

Numbers Example 5 - Start number other than 1 in ascending order

.vehicle>ul>[email protected]*6
Keep your cursor at the end & press 'Tab' key.

Note/Info:
Here, we are using the symbol [email protected] to start from number 4.

Output

<div class="vehicle">
    <ul>
        <li class="tmodel4"></li>
        <li class="tmodel5"></li>
        <li class="tmodel6"></li>
        <li class="tmodel7"></li>
        <li class="tmodel8"></li>
        <li class="tmodel9"></li>
    </ul>
</div>

Numbers Example 6 - Start number other than 1 in descending order

.vehicle>ul>[email protected]*8
Keep your cursor at the end & press 'Tab' key.

Output

<div class="vehicle">
    <ul>
        <li class="tmodel8"></li>
        <li class="tmodel7"></li>
        <li class="tmodel6"></li>
        <li class="tmodel5"></li>
        <li class="tmodel4"></li>
        <li class="tmodel3"></li>
        <li class="tmodel2"></li>
        <li class="tmodel1"></li>
    </ul>
</div>

9. To show the custom attributes

Emmet allows us to expand custom attributes as well.

Custom Attribute Example 1

.Insurance>img[class="life-insurance"]*3
Keep your cursor at the end & press 'Tab' key.

Output

<div class="Insurance">
    <img src="" alt="" class="life-insurance">
    <img src="" alt="" class="life-insurance">
    <img src="" alt="" class="life-insurance">
</div>

Custom Attribute Example 2

div.Insurance>p[title="Welcome to TutorialBrain"]
Keep your cursor at the end & press 'Tab' key.

Output

<div class="Insurance">
    <p title="Welcome to TutorialBrain"></p>
</div>

10. Climb-up

Let’s assume that you need to add 2 paragraphs with a div along with some other elements.

As the symbol > enables to create child elements which means everything after the > symbol will be the child of its previous element.

So, in this case, you will get unexpected result

Climb Up Example-1(Unexpected Result)

div>p>img+p
Keep your cursor at the end & press 'Tab' key.

Output

<div>
    <p>
        <img src="" alt="">
        <p></p>
    </p>
</div>

But, we want 2 separate paragraphs and you can achieve this by the climb-up process by simply using a caret symbol(^).

Climb Up Example-1(Expected Result)

div>p>img^p
Keep your cursor at the end & press 'Tab' key.

Output

<div>
    <p><img src="" alt=""></p>
    <p></p>
</div>

11. Grouping

Grouping is a clear way to group elements to avoid an unexpected error.

Now, if you do not want to apply the Climb-up on the above example i.e. div>p>img+p but wish to fix this using Grouping.

In this case, you can simply separate the different elements using a parentheses.

Grouping Example-1

div>(p>img)+p
Keep your cursor at the end & press 'Tab' key.

Output

<div>
    <p><img src="" alt=""></p>
    <p></p>
</div>

Grouping Example-2

.container>(nav>ul>li*4)+article>p
Keep your cursor at the end & press 'Tab' key.

Output

<div class="container">
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
    <article>
        <p></p>
    </article>
</div>

Bonus Tips
In few Scenarios, pressing the Tab key does not expand abbreviations.

In that case, try CTRL + E. If this does not work as well, then map your computer’s keyword properly and see if the Emmet is using the Tab key or not.

Optionally, you can check the preferences file of the code editor.

In Brackets code editor, navigate to –
Debug -> Open Preferences File

If none of the debug skills work, then the last option is to change your text editor. If you are working on Brackets, you can try switching to Sublime Text, Atom or Visual studio code.

Other Brackets Emmet shortcuts

All the options for Emmet brackets can be found under the “Emmet” as shown below.

The options and shortcuts with arrow pointing towards them are important.

Brackets Emmet Shortcuts

This article is complete and detail but if you want to refer the official website of Emmet Cheat Sheet, you can Click Here.

Prev
Next
Youtube Facebook-f Twitter

Tutorials for all brains!