Issue #9 - How to use Emmet to write HTML and CSS faster

As we near the end of another year, it's hard to believe how quickly time flies. As my husband likes to say, we made it through season 3 of 2019!

Although I've missed a few newsletters recently, I wanted to make sure to get one last one out for 2022. One of the reasons I've been a bit busy is because I was working on two new-ish courses. In November, I traveled to California to record updated versions of my two oldest courses. It was great to be back in the LinkedIn Learning studio after such a long break, and I'm excited to announce that the courses will be released early 2023. Stay tuned for updates!

Now let’s get into the last Decoded by Christina newsletter of 2022, shall we?

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:

But instead of typing “bracket, element name, bracket” for the opening tag and then “bracket, slash, element name, bracket” for the closing tag, with autocomplete, you can use an abbreviated syntax to save time.

Just type only the element name, and 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.

[To learn more, keep on reading or watch my YouTube video here or at the end of the post.]

Intro to Emmet

To take your autocomplete functionality to the next level when writing HTML and CSS, 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 for more information.

Emmet and HTML

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:

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.

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 operator (*) to add multiples of that child element.

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.

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. 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. 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 specify a specific unit by adding it to the abbreviation.

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

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. And that’s all folks! See you in 2023!