HTML Editors Tutorial for Beginners – Simple Explanation

You don’t need fancy software to learn HTML. A simple code editor is enough to get started.

Learn HTML Using VS Code (Recommended for Beginners)

VS Code (Visual Studio Code) is a free code editor made by Microsoft.
It’s the most popular editor for web development in 2026.
It colors your code so it’s easier to read and spot mistakes.
It also helps by suggesting tags and closing them for you.

Step 1: Download and Install VS Code

Go to code.visualstudio.com (click it, opens in a new tab). Download the version for your computer. Windows, Mac, or Linux.

Once downloaded, open the installer and follow the steps. It takes about a minute. When it’s done, VS Code will open up with a welcome screen.

Step 2: Create a New File

Inside VS Code, click File then New File. Or press Ctrl+N on Windows or Cmd+N on Mac.

Then click File then Save As. Name your file index.html. The .html part is very important. That tells your computer it’s a web page.

Save it somewhere easy to find, like your Desktop or a folder called “My Websites”.

Step 3: Write Your First HTML

Type or copy this code into your new file:

Step 4: Save Your Work

Press Ctrl+S on Windows or Cmd+S on Mac to save.
VS Code saves as UTF-8 by default. That’s perfect for HTML files.
Get into the habit of saving often. Every few lines, just tap save.

Step 5: Open Your Page in a Browser

Go to where you saved your index.html file. Your Desktop or your folder. Double click it. It will open in your default browser like Chrome, Edge, or Firefox.

That’s it. You just made a real web page. You should see “Hello World!” as a big heading and a sentence below it.

Tip: Want to see the code behind any website? Right click on any webpage and click View Page Source. You’ll see the HTML that made it.

Try It Yourself Online (No Install Needed)

If you don’t want to install anything yet, you can use an online editor. It runs right in your browser. Great for quick tests.

Here’s an example you can play with. Type something, change the heading, break things on purpose. That’s how you learn.

Example

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>

<h1>Welcome to my site</h1>
<p>I'm learning HTML and it's actually fun.</p>

</body>
</html>

Try it Yourself

What Just Happened? Let Me Explain

<!DOCTYPE html> – This just tells the browser “hey, this is modern HTML”. Always put this at the very top.
<html> – Everything inside here is your web page. Think of it like the cover of a book.
<body> – This is where all the stuff people actually see goes. Text, images, buttons, everything.
<h1> – Big heading. Use it for main titles. You have h1, h2, h3 down to h6. They get smaller each time.
<p> – A paragraph. Just normal text.

Wait. What Is an HTML Element Exactly?

An element is just an opening tag like <h1>, some content, and a closing tag like </h1>. Think of it like a sandwich. The opening tag is the top bread, the content is the filling, the closing tag is the bottom bread.

Syntax

<tagname> Your content here </tagname>

A real example looks like this:

Example

<h1>My Awesome Title</h1>
<p>Some words go here.</p>

Start Tag	Content	End Tag
`<h1>`	My Awesome Title	`</h1>`
`<p>`	Some words go here	`</p>`
`<br>`	(nothing)	(nothing)

Note: Some elements like <br> (line break) don’t need a closing tag. They’re called empty elements. You just write <br> and that’s it.

How Do Browsers Actually Work?

A browser like Chrome or Safari reads your HTML file line by line. It doesn’t show the tags themselves. It uses those tags to figure out how to display things. A <h1> becomes big and bold. A <p> becomes normal paragraph text.

Think of HTML like instructions. You write the recipe, the browser cooks the meal.

Tip: Right click any webpage and click Inspect (not View Source). That opens developer tools and lets you see and even edit the HTML live. Super useful for learning.