Using a Text Editor to Write HTML

A text editor is one of the simplest tools you can use to write HTML. HTML is made up of plain text, so you do not need specialized software to create an HTML file.

You can use a basic application such as Notepad or a dedicated code editor such as Visual Studio Code. After writing your HTML code, you save the file with the .html extension and open it in a web browser.

For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First HTML Page</title>
</head>

<body>

    <h1>Hello World!</h1>
    <p>Welcome to my first HTML page.</p>

</body>

</html>

The structure shown above follows the basic rules of HTML Syntax, including opening and closing tags, nesting, and the arrangement of HTML content.

What Is a Text Editor?

A text editor is a software application used to create and modify plain text files.

Some commonly used text editors and code editors include:

• Notepad
• Visual Studio Code
• Notepad++
• Sublime Text
• Vim
• Nano

A basic text editor is enough to write HTML because HTML does not require a compiler or special development environment.

You write the HTML code, save it as an HTML file, and open the file in a browser.

Do You Need a Special HTML Editor?

No. You do not need a special HTML editor to create an HTML webpage.

A simple text editor can be used to write HTML:

<h1>HTML Tutorial</h1>
<p>Learn HTML with Web4Learners.</p>

Save the file as:

index.html

Then open the file in a web browser.

The browser reads the HTML and displays the resulting webpage.

Using Notepad for HTML

Notepad is a simple option for beginners because it provides a clean and minimal interface.

Open Notepad

On Windows, open Notepad from the Start menu.

Write HTML Code

Enter the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My Website</title>
</head>

<body>

    <h1>My First Website</h1>

    <p>I am learning HTML.</p>

</body>

</html>

This example uses elements such as <html>, <head>, <title>, <body>, <h1>, and <p>. These elements form the basic structure of an HTML document, as explained in HTML Document Structure.

Save the File

Click:

File → Save As

Enter:

index.html

If Notepad shows a Save as type option, select:

All Files

Then save the file.

Important: Make sure the file is saved as index.html and not index.html.txt.

Using Visual Studio Code

Visual Studio Code, commonly called VS Code, is a popular code editor used for HTML, CSS, JavaScript, and many other technologies.

It provides features that make writing HTML easier, including:

• Syntax highlighting
• Code completion
• Auto indentation
• Error detection
• File and folder management
• Extensions
• Search and replace
• Integrated terminal

For larger HTML projects, a dedicated code editor is generally more convenient than a basic text editor.

Creating an HTML File in VS Code

Open VS Code and create a new folder for your project.

For example:

my-website/

Inside the folder, create:

index.html

Enter:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My Website</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>This is my first HTML webpage.</p>

</body>

</html>

Save the file using:

Ctrl + S

Your project now contains a basic HTML webpage.

Understanding the HTML File

An HTML file is a plain text file containing HTML markup.

For example:

index.html

The .html extension tells the operating system and browser that the file contains HTML.

Inside the file, you can use HTML elements such as:

<h1>Heading</h1>
<p>Paragraph</p>
<a href="#">Link</a>

An HTML element normally consists of an opening tag, content, and a closing tag.

For example:

<p>Hello World!</p>

Here:

<p>

is the opening tag,

Hello World!

is the content, and

</p>

is the closing tag.

Understanding Opening and Closing Tags makes it easier to write and troubleshoot HTML correctly.

Writing HTML with Proper Indentation

A text editor allows you to format your HTML code using indentation.

For example:

<div>
    <h1>Web4Learners</h1>

    <p>
        Learn HTML step by step.
    </p>
</div>

The indentation makes the relationship between the elements easier to understand.

This becomes especially useful when one element is placed inside another element.

For example:

<section>
    <div>
        <h2>HTML Tutorial</h2>
        <p>Learn HTML fundamentals.</p>
    </div>
</section>

The nested structure is easier to identify because each level is indented.

Writing HTML Attributes

A text editor is also used to write attributes inside HTML opening tags.

For example:

<a href="https://example.com">
    Visit Website
</a>

Here, href is an attribute of the <a> element.

Another example is:

<img src="logo.png" alt="Web4Learners Logo">

The src and alt values provide additional information about the image.

When writing attributes, make sure the attribute name, equal sign, and value are correctly formatted. A detailed explanation of this syntax can be found in HTML Attributes.

Saving an HTML File

After writing HTML, you need to save the file.

For example:

index.html

Other common HTML filenames include:

about.html
contact.html
services.html
blog.html

For a simple website, index.html is commonly used as the main webpage.

Opening an HTML File in a Browser

Once you have saved your HTML file, locate it on your computer.

For example:

my-website/
└── index.html

Double-click index.html.

Your default web browser will open the file and display the webpage.

You can also right-click the file and choose Open with to select a browser.

Editing an HTML File

One of the advantages of using a text editor is that you can easily modify your webpage.

Suppose your original HTML is:

<h1>Hello World!</h1>

You can change it to:

<h1>Welcome to Web4Learners!</h1>

Save the file and refresh the browser.

The updated text will appear on the webpage.

This simple process creates the basic HTML development workflow:

Write HTML
    ↓
Save File
    ↓
Open in Browser
    ↓
View Result
    ↓
Edit HTML
    ↓
Refresh Browser

Using Comments in Your HTML Code

You can also add comments while writing HTML.

For example:

<!-- Main website heading -->
<h1>Web4Learners</h1>

Comments help you identify different sections of your code and are ignored when the browser renders the webpage.

For larger projects, comments can make HTML source code easier to understand and maintain.

Creating Multiple HTML Pages

A text editor can be used to create multiple webpages.

For example:

my-website/
│
├── index.html
├── about.html
├── tutorials.html
└── contact.html

You can connect these pages using links:

<a href="about.html">About</a>

<a href="tutorials.html">Tutorials</a>

<a href="contact.html">Contact</a>

This allows you to build a complete multi-page website using HTML files.

Using a Text Editor Without Internet

You do not need an internet connection to write basic HTML.

You can:

1. Open your text editor.
2. Write HTML.
3. Save the file.
4. Open the file in a browser.
5. Edit the code.
6. Refresh the browser.

All of these basic steps can be performed locally.

An internet connection becomes useful when you need external resources, online documentation, libraries, hosting, or other web services.

Text Editor vs Code Editor

A basic text editor and a dedicated code editor can both be used to write HTML.

Feature	Basic Text Editor	Code Editor
Write HTML	Yes	Yes
Save HTML files	Yes	Yes
Syntax highlighting	Usually no	Yes
Code completion	Usually no	Yes
Extensions	Usually no	Yes
Error detection	Limited	Yes
Project management	Limited	Yes
Best for	Simple practice	Larger projects

Notepad is enough for learning the fundamentals, while VS Code provides more features for professional development.

Common Mistakes

Saving the File as .txt

A common beginner mistake is saving:

index.html.txt

instead of:

index.html

Make sure the file extension is .html.

Forgetting to Save Changes

If you modify your HTML but do not save the file, the browser will continue showing the previous version.

Use:

Ctrl + S

to save your changes.

Not Refreshing the Browser

After changing and saving an HTML file, refresh the browser to see the latest version.

You can usually press:

Ctrl + R

or:

F5

Writing Incorrect HTML Structure

Make sure your elements are properly opened, closed, and nested.

For example:

<p>
    <strong>Hello World!</strong>
</p>

Avoid incorrectly arranged tags such as:

<p>
    <strong>Hello World!</p>
</strong>

Proper nesting is an important part of writing valid HTML.

Best Practices

• Use a dedicated folder for each HTML project.
• Save HTML files with the .html extension.
• Use meaningful filenames.
• Keep your HTML properly indented.
• Use lowercase HTML element and attribute names.
• Use a code editor for larger projects.
• Save your work frequently.
• Refresh the browser after making changes.
• Keep related HTML files organized in the same project folder.
• Use comments when they genuinely improve code organization.
• Keep your HTML structure clean and easy to maintain.

FAQs

Can I write HTML using Notepad?

Yes. Notepad can be used to write HTML because HTML is plain text. Save the file with the .html extension and open it in a web browser.

Is VS Code required for HTML?

No. VS Code is not required. You can write HTML using Notepad or another text editor. VS Code simply provides additional features that make development easier.

What file extension should I use for HTML?

HTML files normally use the .html extension.

For example:

index.html

Can I write HTML without an internet connection?

Yes. You can create, save, and open basic HTML files locally without an internet connection.

How do I view an HTML file?

Save the file with an .html extension and open it using a web browser such as Chrome, Edge, Firefox, or Safari.

Why is my HTML file opening as a text file?

The file may have been saved with a .txt extension, such as index.html.txt. Make sure the actual filename ends with .html.

Can I edit HTML after opening it in a browser?

You edit the HTML using a text or code editor. After saving the changes, refresh the browser to see the updated webpage.

What is the best text editor for HTML?

A basic editor such as Notepad is enough for learning. Dedicated code editors such as VS Code provide more features for larger HTML projects.

Do I need a compiler to write HTML?

No. HTML does not require a traditional compiler. A browser parses the HTML and renders the webpage.

Can I create a complete website using a text editor?

Yes. You can create multiple HTML pages and connect them using links. You can also add CSS, JavaScript, images, and other resources as your website grows.