HTML Boilerplate
We write HTML code in the code editor. There are many types of code editors such as:
- Visual Studio Code
- Atom
We can use visual studio code because it is a very popular code editor. If you want to know how to download visual studio on any Windows, Linux or Mac the link is given below:
If you have installed your visual studio code (VS Code) in your operating system then open it in folder and create file of index.html. All the HTML code is save in .html file.
- Boilerplate: We usually mean a co-template that you can reuse. Example of boilerplate is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
To open the boilerplate in VS Code, press ctrl+! now your boilerplate is opened. There are two sections of boilerplate:
- Head Section
- Body Section
Head Section:
Head Section consists of meta tags. Meta is the data type and it contains data of the website. such as UTF-8. It contains all alphabet on the website. In <title></title> we write name of our website.
This is head section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
</head>
Body Section:
This is the main section of the website. We write code in this section, and all the content of the website is present in the body section.
This is body section:
<body>
<h1>Hello World</h1>
</body>
We use emmet in HTML. Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML. The link is given below:
Detailed overview, highly appreciated!
ReplyDelete