HTML Editors
Recommended HTML Editors
To edit HTML, you can use professional HTML editors. Here are some commonly used editors recommended by Runoob:
- VS Code：https://code.visualstudio.com/
- Sublime Text：http://www.sublimetext.com/
- Online Editor: https://www.jyshare.com/front-end/61/
- EditPlus (Lightweight): https://www.editplus.com/
- Notepad++ (Code Editor): https://notepad-plus.en.softonic.com/
You can download the corresponding software from the official websites listed above and follow the installation steps provided.
Next, we will demonstrate how to create an HTML file using VS Code.
VS Code
Visual Studio Code (VS Code) is an open-source code editor developed by Microsoft. It supports Windows, Linux, and macOS operating systems and includes built-in extension management features.
For the VS Code installation tutorial, refer to: https://www.runoob.com/w3cnote/vscode-tutorial.html
Step 1: Create a New HTML File
After installing VS Code, select "File (F) -> New File (N)" and enter the following code in the new file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebCode101(webcode101.com)</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>
Step 2: Save as an HTML File
Then select "File (F) -> Save As (S)", and name the file webcode.html.
When saving an HTML file, you can use either the .htm or .html extension. There is no difference between the two; it is entirely up to your preference. I recommend using .html consistently.
Save this file in an easy-to-remember folder, such as webcode.html.
Step 3: Run the HTML File in a Browser
Right-click the file name in the editor and select "Open in Default Browser" (or another browser of your choice). Note: Opening HTML files in a browser from VS Code requires the "Open in Browser" extension.
The result should look something like this:
Right-click in the editing window and select the "Show Preview" option:
The displayed result:
This way, you can see the effect of your code in real-time while editing.