leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML editor

Estimated reading: 2 minutes 29 views

HTML editor recommendation

You can use a professional HTML editor to edit HTML. The rookie tutorial recommends several commonly used editors:

You can download the corresponding software from the official website of the above software and install it according to the steps.

Next we will show you how to use the VS Code tool to create HTML files.


VS Code

Visual Studio Code (VS Code for short) is an open source code editor developed by Microsoft that supports operating systems such as Windows, Linux, and macOS. The editor has built-in extension management functions.

VS Code installation tutorial reference: 

Step 1: Create a new HTML file

After VS Code is installed, select “File (F)->New File (N)”, and enter the following code in the new file:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Tutorials for Beginners</title>
</head>
<body>
    <h1>My first Heading</h1>
    <p>My First Paragragh</p>
</body>
</html>

Step 2: Save as HTML file

Then select “File (F)->Save As (A)”, the file name is runoob.html:

When you save an HTML file, you can use either the .htm or .html extension. There’s no difference between the two, it’s entirely up to your preference, I’d recommend using .html in unison .

Save this file in an easy-to-remember folder, like website

Step 3: Run this HTML file in your browser

Then right-click the filename on the editor and choose to open in the default browser (other browsers are also possible):

Note: The “open in browser” extension needs to be installed to open html files with a browser in vscode .

The result of running is similar to the following:

VS Code and Sublime Text can also work with the Emmet plugin to improve coding speed.

Emmet official website: http://emmet.io/

Leave a Comment

CONTENTS