Photo by Georgie Cobbs on Unsplash

How to use Emmet to write HTML and CSS faster

Increase your productivity with these shortcuts

Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.

Using autocomplete with your text editor

Writing HTML and CSS involves writing code that needs to follow a specific syntax. A misplaced semi-colon or a typo can throw off a whole page! Also, there tends to be a lot of repetition. To improve my workflow, I use the autocomplete feature in my text editor. This feature uses an abbreviated syntax and the tab key to expand the abbreviations. The specifics of this feature may vary between text editors; the examples provided in this article are based on the syntax used in the VS Code editor.

Let’s start with some HTML. The syntax for writing an HTML tag normally looks like this:

<header></header>

With autocomplete, you can use an abbreviated syntax to save time. Just type only the element name, then press the tab key to expand the abbreviation. The brackets and closing tags will be added automatically! And if the element requires an attribute, that will be added automatically as well.

This abbreviated syntax:

header
section
p
a

Will expand to this HTML markup:

<header></header>
<section></section>
<p></p>
<a href=""></a>

Intro to Emmet

To take your autocomplete functionality to the next level, consider using Emmet, a tool that extends these features. Emmet is pre-installed in VS Code, but can also be added as a plugin to other text editors. To learn more about how to download and use Emmet in your text editor, check out the “Download” page.

emmet.io

Emmet and HTML

Adding multiple elements

With Emmet, an abbreviated syntax can be used to add multiple HTML elements. Just type the element name, followed by an asterisk (*) and the number of elements you want to add. No brackets are needed. Then, use the tab key to expand the abbreviation and automatically generate the desired number of elements.

Here’s the syntax for adding three paragraphs, along with the expanded markup:

p*3

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

Create sibling elements

To create sibling elements, use the plus operator (+). This will allow you to add multiple elements that are at the same level in the HTML structure.

header+section+section+footer

<header></header>
<section></section>
<section></section>
<footer></footer>

Create nested elements

To create nested elements, use the right angled bracket (>) to indicate the parent-child relationship between elements. You can also combine different operators to create more complex structures. For example, you might use the right angled bracket (>) to add a child element, and the asterisk (*) to add multiples of that child element.

ul>li
ul>li*3

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

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

When using the right angled bracket (>) to nest elements, any elements added after will also be nested within the parent element. To move an element back up a level, use the carat operator (^).

In the following example, “footer” follows a series of nested “section” elements. You can use the carat operator (^) to move it outside of the parent “main” element. This is a useful way to adjust the structure of your HTML and ensure that your elements are organized in the way you intended.

header+main>section*2^footer

<header></header>
<main>
  <section></section>
  <section></section>
</main>
<footer></footer>

Emmet and CSS

Emmet can also be used for writing CSS. When you start typing a property name, the abbreviation will usually expand to the full property when you press the tab key. This will also add the colon and semi-colon.

m

margin: ;

If more than one property matches the abbreviation, a drop-down menu will appear with alternate options to choose from.

The property and value can also be specified within the same abbreviation. If no unit is added the default will be px for whole numbers and em for decimals. You can also use a specific unit by adding it to the abbreviation.

m10
m10.5
m10%

margin: 10px;
margin: 10.5em;
margin: 10%;

For multi-word properties, use the first letters of each word, followed by the value.

pt10

padding-top: 10px

Using the tab autocompletion features in your editor may take some getting used to, but it can help increase your productivity in the long run. By using this abbreviated syntax, you can save time and streamline your HTML and CSS writing process.

To learn more about Emmet and see these examples in action, check out my YouTube video for more tips and tricks.

—

You can find me on Substack as well.