Your First Proper HTML File
You have learned the skeleton. Now let's write a complete, properly structured HTML file from scratch — the right way, the way you will do it from here on.
The template you always start with
Every file you build from now on should start like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title Here</title>
</head>
<body>
<!-- your content goes here -->
</body>
</html>
This is your starting point. In VSCode, type ! and press Tab to get this instantly.
A real example
Here is what it looks like filled in with actual content:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Dev Journey</title>
</head>
<body>
<h1>My Web Dev Journey</h1>
<h2>Where I started</h2>
<p>I learned Python first. It taught me how to think like a programmer.</p>
<h2>What I am learning now</h2>
<p>I am learning HTML — the language that builds the structure of every webpage.</p>
<h2>What is next</h2>
<p>After HTML, I will learn CSS and then JavaScript.</p>
</body>
</html>
Copy that into a new file, save it as journey.html, open it in your browser. It is a complete, valid webpage.
About indentation
Notice how everything inside <head> and <body> is indented, and the content inside <body> is indented further.
The browser does not care about indentation — it ignores it completely. But you should care, because indentation is what makes your code readable when pages get longer. Get the habit now.
In VSCode: Tab to indent, Shift + Tab to remove an indent.
About comments
That line <!-- your content goes here --> is an HTML comment. The browser ignores it completely — it never shows on the page. It is just a note for yourself (or someone else reading your code).
<!-- This is a comment -->
Useful for labelling sections, leaving reminders, or temporarily hiding a tag without deleting it.
Challenge
Create a brand new file in VSCode called portfolio.html. Use the ! + Tab shortcut to get the skeleton, then fill it in:
- A proper
<title>in the head - An
<h1>with your name as the main heading - At least three
<h2>sections with a<p>under each - One link and one image somewhere on the page
Keep this file — you will be adding CSS to it soon, and it will start looking really good.