Emmet for HTML: A Beginner's Guide to Writing Faster
Writing HTML the slow way
HTML can be quite wordy, making developers spend a lot of time writing code. This is especially true with all the opening and closing tags HTML needs. It can become boring and take longer than designing and developing the webpage's features. For example, creating a navigation bar with 10 list items means typing each <li> tag, making sure every opening tag has a closing tag, and keeping the indentation right for easy reading. Developers also need to watch for and fix mistakes like missing tags or wrong nesting, which can slow things down even more. This repetitive and careful work can be both slow and frustrating, taking away from the creative side of web development.
This is the normal and manual HTML, very time consuming.
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
What if we could write this in one line? This is where Emmet comes into the game.
What is Emmet?
Emmet is a shorthand/shortcut language. It is built into most code editors. It is used to convert abbreviations into HTML/CSS. Emmet is like autocomplete for HTML, which is actually smart. It allows developers to write complex and nested HTML structures. Emmet is included in VS Code by default and in many other editors.
How Emmet works inside editors
Emmet works inside editors as a plugin that turns abbreviations into full, structured HTML or CSS code snippets. The expansion is triggered by pressing the Tab key. The plugin, i.e., Emmet, expands the abbreviation into a full, correctly formatted code block at the cursor’s location.
For example ul>li*3, the result is shown below:
Basic Emmet syntax
Creating elements:
Typing the tag name expands into that tag.
div-> <div></div>
p-> <p></p>
section-> <section></section>
header-> <header></header>
Classes and IDs:
This syntax gets converted into proper tags.
div.container
h1#title
The expansion for above shorthand syntax:
.= class#= id
<div class="container"></div>
<h1 id="title"></h1>
Nested elements
There are several elements in HTML and CSS which are nested together to create a structure. Typing these elements manually is time consuming which is where Emmet takes the load off you.
In Emmet > operator is used to nest several elements together, this operator is used to indicate that the next abbreviation coming after the operator will be inside the first element’s opening and closing tag. An example of this is ul>li, this examples shows how li tag will be nested inside the ul tag and a similar example will be table>tr*3>td*2 and the result for this abbreviation is shown below. It creates a well structured table with 3 rows and each row having 2 columns.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Repeating elements
You must have noticed that we use *2 in the above abbreviation to create the tag multiple times and that is exactly how it works. You use * operator to multiply the occurrence of a tag.
Adding Attributes
While using Emmet, attributes to a certain tag can be added using [] operator, you write the tag name and then the attribute inside the [] operator and it gets converted into expanded form. An example for this is a[href="#"] this gets converted into <a href="#"></a>
Full HTML Boilerplate:
Emmet is used to get the essential and repetitive structure every web page needs. It uses ! to generate the necessary code which is needed in every page. Shown below is the code that gets generated by using !.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Why Emmet matters for beginners
Emmet is essential for both beginners and experienced developers because it helps with faster typing and reduces syntax errors. Emmet allows you to focus on the layout instead of typing, and it encourages experimentation. While using Emmet is optional, once you learn it, you'll find it hard to stop using it.
