🚀 Code HTML & JSX 10x Faster in VS Code ⚡ | HTML Tips & Tricks | Pro Web Dev Tips 💻

If you've ever found yourself writing repetitive HTML code and wished for a faster way, you're not alone! Fortunately, Emmet, a built-in toolkit in Visual Studio Code, allows you to write HTML/JSX and CSS faster using abbreviations that expand into complete code snippets. In this post, we'll cover how to use Emmet to create a variety of common HTML structures in seconds, from forms to lists, and some neat tricks to make you more productive.

What is Emmet?

Emmet is a plugin that turns short abbreviations into full-blown HTML and CSS code. With just a few keystrokes, you can generate complex HTML structures. Emmet is great for quickly creating repetitive structures, boilerplate code, or commonly used elements.

To give you a better idea of how Emmet works in action, check out this video demonstration

Now that you've seen Emmet in action, let's explore how to use it with some real-world examples.

Creating a Simple Login

Here's a basic login form we can create in just one line using Emmet:

Copy

1 <form action="" method="post">
2   <h1>Login</h1>
3   <input type="text" class="input">
4   <input type="password" class="input">
5   <button type="submit">Submit</button>
6   <a href="/signup">Already have an account?</a>
7 </form>

Emmet Abbreviation:

Copy

1form[action="" method="post"]>h1{Login}+input.input[type="text"]+input.input[type="password"]+button[type="submit"]{Submit}+a[href="/signup"]{Already have an account?}

This abbreviation expands into the full form, saving you time when building forms or repetitive input fields.

Creating Lists (ul and li)

Let's say you want to create an unordered list with several list items. Emmet makes this process quick and painless.

1. Basic List with Three Items

You can create an unordered list with three list items using the following Emmet abbreviation:

Emmet Abbreviation:

Copy

1ul>li*3

This will generate:

Copy

1<ul>
2 <li></li>
3 <li></li>
4 <li></li>
5</ul>

2. List with Text in Each Item

Want each li to have text inside? You can do that too!

Emmet Abbreviation:

Copy

1ul>li{Item $}*4

This will generate:

Copy

1<ul>
2 <li>Item 1</li>
3 <li>Item 2</li>
4 <li>Item 3</li>
5 <li>Item 4</li>
6</ul>

The $ symbol automatically numbers the items, so each list item gets a unique number.

3. List with Links

If you want to create a list where each item contains a link, Emmet can help here as well:

Emmet Abbreviation:

Copy

1ul>li*3>a[href="#"]{Link $}

This will generate:

Copy

1<ul>
2 <li><a href="#">Link 1</a></li>
3 <li><a href="#">Link 2</a></li>
4 <li><a href="#">Link 3</a></li>
5</ul>

Combining Emmet Tricks for Faster HTML Coding

Let's dive into some more advanced Emmet tricks to further speed up your workflow.

1. Grouping with Parentheses

You can group elements using parentheses to create more complex structures. For instance, if you want to create a navigation bar with links, you can use this abbreviation:

Emmet Abbreviation:

Copy

1nav>(ul>li>a[href="#"]{Home}+li>a[href="#"]{About}+li>a[href="#"]{Contact})

This generates:

Copy

1<nav>
2 <ul>
3 <li><a href="#">Home</a></li>
4 <li><a href="#">About</a></li>
5 <li><a href="#">Contact</a></li>
6 </ul>
7</nav>

2. Nesting Multiple Levels

Emmet supports multiple levels of nesting. For example, let's say you want to create a footer with columns of links. You can nest elements like this:

Emmet Abbreviation:

Copy

1footer>div.col>h2{Column $}+ul>li*3>a[href="#"]{Link $}

This will generate a footer with one column, each containing a heading and a list of three links:

Copy

1<footer>
2 <div class="col">
3  <h2>Column 1</h2>
4  <ul>
5   <li><a href="#">Link 1</a></li>
6   <li><a href="#">Link 2</a></li>
7   <li><a href="#">Link 3</a></li>
8  </ul>
9 </div>
10</footer>

3. Multiplying and Numbering Multiple Sections

If you want to create multiple sections with numbered headings, Emmet can handle this too. For example:

Emmet Abbreviation:

Copy

1section>h2{Section $}+p{Lorem ipsum dolor sit amet.}*3

This generates multiple sections, each with a numbered heading and three paragraphs:

Copy

1<section>
2 <h2>Section 1</h2>
3 <p>Lorem ipsum dolor sit amet.</p>
4 <p>Lorem ipsum dolor sit amet.</p>
5 <p>Lorem ipsum dolor sit amet.</p>
6</section>
7<section>
8 <h2>Section 2</h2>
9 <p>Lorem ipsum dolor sit amet.</p>
10 <p>Lorem ipsum dolor sit amet.</p>
11 <p>Lorem ipsum dolor sit amet.</p>
12</section>

4. Shortcut for IDs and Classes

You can quickly add classes and IDs to elements without writing full attributes.

Emmet Abbreviation:

Copy

1div#main.container

Expands to:

Copy

1<div id="main" class="container"></div>

Conclusion

Emmet is a powerful tool that drastically reduces the time spent writing HTML. By mastering even a few Emmet abbreviations and tricks, you can significantly improve your productivity and focus on more important tasks like coding logic and design. Whether you're creating forms, lists, or entire sections, Emmet makes it quick and easy.

Try incorporating these shortcuts into your workflow and watch your HTML development speed soar!