Getting Started›Core· 40 min read

Editors & Your First HTML Page

Set up your editor, create a real .html file, and open it in a browser — the moment you become a web developer.

What you will learn

Choose and set up a code editor (VS Code)
Understand what a tag and an element are
Create, save and open a .html file in a browser

Pick an editor

You can write HTML in any plain-text editor — even Notepad. But a real code editor makes life far easier with colours, auto-complete and error hints. We recommend VS Code (free, used by professionals worldwide).

Note: Avoid word processors like MS Word — they add hidden formatting and break your code. Use a code editor or a plain-text editor only.

What is a tag?

HTML is made of tags. A tag is a keyword wrapped in angle brackets, like . Most tags come in pairs: an opening tag and a closing tag with a slash.

Opening tag, content, closing tag

<p>This is a paragraph.</p>

 — the opening tag says “a paragraph starts here”.
This is a paragraph. — the content in the middle.
 — the closing tag (note the /) says “the paragraph ends here”.

The opening tag, the content and the closing tag together are called an element.

Watch out: Forgetting the closing  is the most common beginner mistake. The browser will try to guess where your element ends — and usually guesses wrong.

Build your first file (do this now)

Open VS Code and create a new file.
Save it as index.html on your Desktop.
Type the code below.
Save, then double-click the file — it opens in your browser!

index.html — a complete page

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>About Me</h1>
  <p>Hi, I am learning web development at CodingClave.</p>
</body>
</html>

Live preview

Walking through it: the first line declares this is an HTML page. <html> wraps everything. The <head> holds the <title> (the words that show on the browser tab). The <body> holds what you actually see — here an <h1> heading and a  paragraph. You will meet each of these pieces properly in the next lesson; for now, just notice the shape.

Note: Output: The browser tab reads “My First Page”. On the page itself you see: About Me (large heading) Hi, I am learning web development at CodingClave. (paragraph)

Tip: Why index.html? Browsers and servers automatically look for a file called index as the “home page” of any folder. It is a worldwide convention.

Q. Which part of Hello is the closing tag?

Answer: The closing tag is — it has a forward slash before the tag name and tells the browser the element ends here.

✍️ Practice

Install VS Code and create an index.html file with a heading and two paragraphs about yourself.
Add a third paragraph, save, and refresh the browser to see it appear.

🏠 Homework

Recreate the page above from memory (no copy-paste). Getting stuck and checking is part of learning.