[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, HTML!</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.

Editor	Features
Visual Studio Code	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, fast editor. Its simple interface lets you focus on coding.
Cursor	A modern editor with AI features. Based on Visual Studio Code, it offers even more powerful code completion.

If you have no particular preference, Visual Studio Code is recommended. You can download it for free from the official website (code.visualstudio.com).

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.

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