Creating and Running .html Files

This page explains how to save HTML code as a text file and display it in a browser. The file itself is simply a plain text file saved with a .html (or .htm) extension.

How to write a .html file

Write your HTML code in a text editor and save the file with a .html extension. Save the file using the UTF-8 character encoding.

An HTML file has a basic structure (template). The four fundamental building blocks are the DOCTYPE declaration, the html element, the head element, and the body element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <h1>Heading</h1>
    <p>Paragraph text.</p>
    <p>Hello, Yagami Iori!</p>
</body>
</html>

Tag	Description
<!DOCTYPE html>	A declaration that tells the browser this is an HTML5 document. Write it at the top of the file.
<html lang="en">	The root element of the HTML document. The lang attribute specifies the language (e.g. en for English).
<head>	The area for document settings (metadata). Not displayed in the browser.
<meta charset="UTF-8">	Specifies the character encoding as UTF-8. Required to display text correctly.
<title>	The page title. Displayed in the browser tab.
<body>	The area where the content displayed in the browser is written.

How to write comments

You can write comments (notes) in a .html file. Comments are not displayed in the browser, so they are useful for leaving descriptions or notes about the code.

Syntax	Description
<!-- comment -->	A comment. Can be used for a single line or multiple lines. Everything from <!-- to --> is a comment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
</head>
<body>

    <!-- Page heading. -->
    <h1>Heading</h1>

    <!--
        The following is the content area.
        Two paragraphs are placed here.
    -->
    <p>First paragraph.</p>
    <p>Second paragraph.</p>

</body>
</html>

Comments can also be used to temporarily disable code. HTML comments are visible in the browser's developer tools but are not shown on the page. Be careful not to write passwords or personal information in comments.

How to run (open in a browser)

HTML files do not require a server. Just open the .html file directly in a browser to view it.

Double-click the .html file in Explorer (Windows) or Finder (macOS) to open it in a browser. You can also open it by typing the file path in the browser's address bar.

When you change the code, save the file and reload the browser (F5 or Ctrl + R) to see the changes.

If the layout is broken or a tag is not working, open the browser developer tools (Windows: F12, macOS: Command + Option + I) to inspect the HTML structure and applied styles in detail.

The .htm extension works the same as .html. Currently, .html is the common convention.

For recommended editors, see Setup.

Summary

A .html file is simply a plain text file. You can create one by writing HTML code in a text editor and saving it with a .html extension. No special tools are needed.

HTML files can be opened directly in a browser for display. No server or special runtime environment is required. Start by learning the basic structure (DOCTYPE, html, head, body).

Comments use . They can also be used to temporarily disable code.