[Setup] HTML Development Environment

This page explains how to set up an HTML development environment. HTML is the easiest language to get started with — all you need is a text editor and a browser.

What You Need

There are only two things you need to learn HTML.

Item	Description
Text Editor	An editor for writing HTML code. Notepad works, but a dedicated editor is recommended.
Browser	Used to display HTML. Any browser you prefer — Chrome, Firefox, Edge, etc. — will work fine.

Creating an HTML File and Opening It in a Browser

Open a text editor, enter the content below, and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML</title>
</head>
<body>
  <h1>Hello, Ayanami Rei!</h1>
  <p>Let's start learning HTML.</p>
</body>
</html>

Drag and drop the saved file into a browser, or double-click it to open and view the page.

Explaining the Basic Template

The code above is the basic HTML template. Let's review what each line means.

Element	Description
<!DOCTYPE html>	Tells the browser that this file is HTML5. It must appear on the very first line.
<html lang="en">	The outermost element of an HTML document. The `lang` attribute specifies the language.
<head>	The area for page configuration (character encoding, title, etc.). It is not displayed on screen.
<meta charset="UTF-8">	Sets the character encoding to UTF-8, which is necessary to display text correctly.
<title>	Sets the page title shown in the browser tab.
<body>	The area where the visible content of the page is written.

Recommended Text Editors

Here are some text editors that are convenient for HTML development. All of them are free (Hidemaru Editor is shareware).

Editor	Features
Visual Studio Code	Currently the most popular editor. It offers rich code completion, error highlighting, and extensions, making it suitable for beginners and experts alike. Available on Windows, macOS, and Linux.
Sublime Text	A lightweight, extremely fast editor. Its simple interface lets you focus on coding. Available on Windows, macOS, and Linux.
Hidemaru Editor	A legendary Japanese text editor first released in 1993. Lightweight, fast, and equipped with a powerful macro system. Windows only, one-time purchase.
Cursor	A modern editor with AI features. Based on Visual Studio Code, it offers even more powerful code completion. Available on Windows, macOS, and Linux.

These days, Visual Studio Code seems to be the most widely used editor, but the webmaster personally loves simple and lightweight editors, so he currently uses Sublime Text. Feel free to use this as a reference.

A note about Hidemaru Editor: first released in 1993, Hidemaru is lightweight, features powerful search and replace with regular expressions, and can be customized with macros. In modern terms, macros are similar to add-ons — and Hidemaru had this capability back in the 1990s, a remarkably forward-thinking design that makes it a truly wonderful editor.

The webmaster himself used Hidemaru Editor for programming from the Windows 3.1 era through Windows 7, and owes a great deal to it over the years. Its developer, Hideo Saito, continues to update Hidemaru to this day — it runs perfectly on Windows 11 and other 64-bit versions of Windows. You can purchase Hidemaru Editor from here — it is a one-time purchase for around 4,000 yen (about $27), and having it on a Windows machine can be surprisingly handy.

(´-`).｡oO(The webmaster wanted to give a special shout-out to Mr. Saito, whom he has relied on for many years...)

(´-`).｡oO(Over 30 years of use and the total cost was just around 4,000 yen... it is hard to find anything else with such incredible value...)

(´-`).｡oO(Well then, please continue with the setup. Good luck with the environment configuration...)

Inspecting HTML with Developer Tools

Using the browser's developer tools, you can inspect and edit the HTML structure in real time.

Step	Action
1	Open your HTML file in a browser.
2	Open the developer tools with the `F12` key (on macOS: `Cmd + Option + I`).
3	The HTML structure is visible in the `Elements` tab. Clicking an element highlights the corresponding part on the page.

Chrome Developer Tools (DevTools) screen

Changes made in the developer tools are temporary. They revert when you reload the browser, so feel free to experiment.

If you find any errors or copyright issues, please contact us.

Home