When writing HTML, you will notice that there are unexpectedly many “parts that must be written”.
If possible, I would like to use that part as a template and focus on the part that really needs to be written.
In this article, we will introduce a template for your purpose and useful functions of the HTML editor.
Table of contents
- simple HTML template
- Template for using jQuery
- Create HTML using Emmet
- Create HTML in VS Code
- Emmet’s type completion feature
- summary
simple HTML template
First, let’s start with the basic form of HTML with minimal information.
It contains basic settings such as character encoding and viewport (display area. In this sample, it is automatically set depending on the terminal and browser), so it is a good idea to use this first.
<!DOCTYPE html>
<html lang="ja">
<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>Web Site Title</title>
</head>
<body>
</body>
</html>Template for using jQuery
If you use jQuery, you will need a description to load the corresponding jQuery.
In that case, use this template and add the description of jQuery to be called in the comment section.
<!DOCTYPE html>
<html lang="ja">
<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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Web Site Title</title>
<script>
$(()=>{
// ここにロード時の処理を記述する
});
</script>
</head>
<body>
</body>
</html>Create HTML using Emmet
For those who say, “Even if you have a template, it’s hard to copy and paste every time because you write a lot of HTML”, we recommend using “Emmet”.
“Emmet” is a text editor plug-in with input completion functions such as HTML and CSS.
It’s an open source, very useful tool that can be integrated into popular editors.
This time, I will introduce how to use Emmet with the editor “Visual Studio Code (VS Code)”, which is used by many people from beginners to advanced users.
“Visual Studio Code (VS Code)” is introduced in the following article.
Create HTML in VS Code
1. Create a new file from the explorer part.
2. Set the file name. At this time, let’s confirm that the extension is “html”.
3. Once created, an empty file will be generated as shown below.
4. If you enter “!” in this state, the following code snippet (code that can be inserted into the program) list will be displayed, so please select the one that says “Emmet Abbreviation”.
5. A template is generated as follows.
Since lang is “en”, you can use it as a template by changing it to “ja” and setting the title.
Emmet’s type completion feature
Emmet’s completion feature is useful not only when creating new HTML, but also while typing.
For example, if you enter the “h1” element, “Emmet Abbreviation” will appear as a candidate, so select it to close the tag.
summary
I introduced a template that can be used in HTML and the “Emmet” plug-in that can be used in the editor.
Choose a convenient method depending on the situation so that you can create it efficiently.
