Skip to main content

08+ Emmet Shortcuts for Code Editors

08+ Emmet Shortcuts for Code Editors

Emmet is a powerful toolkit for web developers that helps you write HTML and CSS code quickly and efficiently. It provides a set of shorthand abbreviations that can be expanded into full code snippets. Whether you are using Visual Studio Code, Sublime Text, Atom, or any other modern code editor, Emmet can boost your productivity by reducing the amount of typing needed for common coding patterns.

In this article, we will explore some of the most useful Emmet shortcuts that can help you generate HTML, CSS, and JavaScript snippets with minimal effort. Along with each Emmet abbreviation, we will provide the expanded code and its output.

01. Child Selector: >

The > symbol is used to create child elements in Emmet. It tells the editor that the next element should be a direct child of the previous one.

div>p

Expanded:

<div>
  <p></p>
</div>

02. Sibling Selector: +

The + symbol is used to create sibling elements. It adds a new element immediately after the current one, at the same hierarchical level.

div+p

Expanded:

<div></div>
<p></p>

03. Grouping: ()

The () symbol is used for grouping multiple elements in Emmet. This allows you to wrap several elements and apply them together.

div>(p>span)+h1

Expanded:

<div>
  <p>
    <span></span>
  </p>
  <h1></h1>
</div>

Output:

04. Multiplication: *

The * symbol is used for multiplying elements. It repeats an element a specific number of times.

ul>li*3

Expanded:

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

05. ID Selector: #

The # symbol is used to create an element with a specific ID. This is similar to using the id attribute in regular HTML.

div#main

Expanded:

<div id="main"></div>

06. Class Selector: .

The . symbol is used to create elements with a specific class. It's a shorthand for adding a class attribute to an element.

div.container

Expanded:

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

07. Element Attributes: []

The [] symbol is used to add attributes to an element. It is especially useful when you need to specify attributes like href, src, or custom attributes like title.

a[href="https://example.com"]

Expanded:

<a href="https://example.com"></a>

08. Text Inside Elements: {}

The {} symbol is used to insert text inside an element. It allows you to quickly add inner content to an element.

h1{Hello World}

Expanded:

<h1>Hello World</h1>

Output:

Hello World

09. Attribute with Text Inside: []{}

You can combine both attributes and text by using [] for attributes and {} for text. This is useful for elements like button with a label or input fields with default values.

button[type="submit"]{Click Me}

Expanded:

<button type="submit">Click Me</button>

Conclusion

Emmet is an incredibly useful tool for speeding up web development by reducing the amount of typing required to create common structures in HTML and CSS. With just a few keystrokes, you can generate complex code, making your workflow more efficient. By incorporating these Emmet shortcuts into your daily coding practice, you'll be able to focus more on the logic and less on repetitive coding patterns.

Mastering these Emmet abbreviations will give you the freedom to create web pages faster and with less effort, and once you get used to these shortcuts, you'll find yourself writing HTML and CSS with greater speed and precision!

Comments

Post a Comment