Photo by Georgie Cobbs on Unsplash

How to use Emmet to write HTML and CSS faster

Increase your productivity with these shortcuts

Christina Truong
4 min readJan 31

--

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.

--

--

Christina Truong

Tech Educator. christina.fyi Twitter @christinatruong Instagram @christina.is.online