How to add an HTML5 Boilerplate Code using Emmet? Techbit.in

*_{Adding HTML5 Boilerplate code using Emmet}*

I hope we all are ready to move to the intermediate topics of HTML. If you have any doubt about the basics, or you want to learn or brush up HTML from the very first, kindly visit this link. We will now discuss HTML5 Boilerplate code. It is a topic that is very relevant yet not so popular by its name.

HTML5 Boilerplate code is a piece of code that is associated with the creation of any HTML Website. So when we create an HTML file, we need to write a fixed piece of code for every single HTML file. The code that is common in all the web pages we create is known as Boilerplate code.

Fact: The word Boilerplate originates back from the time when the printing press would make heavy iron plates function as their printing template. Since the plates looked very similar to the small metal plate that identified the builder of a steam boiler, it got the name boilerplate.

So there are 2 ways you can add the HTML5 Boilerplate code in your file. Either you can write the whole code manually or there is a smarter way to do that. The preferred way requires us to use extensions/plugins to do the work for us.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Boilerplate Code using Emmet</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

The above-mentioned code is a basic requirement of every web development project. It helps in writing code faster, and in a robust manner.

Table of Contents

How to add HTML5 Boilerplate code in your text editor?

One very straightforward way is to simply just copy the code and paste it into your desired HTML file. But the process of copying and pasting the code every time is not very feasible and recommended. So for your rescue, there’s an easier version of doing this manually each time.

There is an extension known as Emmet. It is a set of plug-ins that helps in easing out the work experience for web developers. It helps in auto-completion of the code and thus helps in coding faster and efficiently. Emmet works with HTML, XML, etc., which helps in writing less code manually and lets the autocompletion of Emmet do the work. So we can make use of Emmet through the text editor that we use to write our code in.

The text editors we use these days are upgrading themselves with each passing day to survive in the market. So they support several extensions/plugins to keep the user experience as smooth as possible. And thus Emmet acts as one such extension to be installed in one’s editor.

I’ll be mentioning a few of the text editors here. You can follow the same procedure for your choice of editor to be able to install Emmet.

Visual Studio Code

In VS Code, the Emmet extension is pre-installed. So you don’t need to install it on your own. You can save that time and right away start working on your project. For some reason, if Emmet is not working by default, you can solve your problem here.

Once you create a file with a .html file extension, you simply press shift + !. It will show up your boilerplate code and you just hit enter to use that code template.

_{Using Emmet Extension in VS Code to add HTML5 Boilerplate}

Sublime

Since Sublime Text doesn’t have Emmet extension installed by default. We will have to follow some steps to install this in our editor. Follow the below-mentioned steps and you will have your Emmet extension installed in your Sublime in no time:

Firstly, open your Sublime Text Editor.
Head over to “Tools”->”Command Palette”
Make a search for “Package Control: Install Package”.
Type “Emmet” in the new window that pops up.
Select the first one that appears.
That’s it, now you have Emmet installed in your Sublime Text.

Once the extension gets installed, simply follow the same procedure of using shift + ! and hit enter to add the HTML5 boilerplate through Emmet.

Using Emmet in Sublime — _{Using Emmet Extension in Sublime Text Editor to add HTML5 Boilerplate}

Brackets

Follow the same procedure as we did for Sublime Text.

Run the Brackets application.
Move to File->Extension Manager.
Search for “Emmet” extension and hit “Install”.

NOTE: For any other editor also, head over to the section from where you install other plugins or extensions. Search for “Emmet” there and allow it to get installed.

Bonus Cheat Sheet

Download the cheat sheet for all the shortcuts that Emmet has to offer. Using this cheat sheet, you can make the most of this extension. And eventually, you will also be able to write your code faster.

So that’s a wrap for this article. I hope it helped you somewhere. Please make sure to visit the previous articles that have already been uploaded in this HTML5 series. Share your feedback in the comments down below. Next, we will move on to more important and useful HTML5 topics like Tables, Lists and Forms, etc.

Html 04: How to add an HTML5 Boilerplate Code using Emmet?

Published by Vaishali Rastogi on August 7, 2021August 7, 2021