It's time to create your first real HTML page so you have an idea of what is to come in the following sessions! In this lesson, we'll build a complete HTML document from scratch and understand every single part of it. By the end, you'll have a working webpage and understand the basic structure that every HTML page follows.
The Basic HTML Structure
Every HTML page follows the same basic structure. Think of it like a house—every house needs a foundation, walls, and a roof. HTML has its own required structure that tells the browser this is an HTML document.
Here's the complete structure of a basic HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph!</p>
</body>
</html>Don't worry if this looks confusing right now. We'll break down every single line and explain what it does. By the end of this lesson, it will all make sense!
Creating Your First Page
Let's create this page step by step. Open VS Code and follow along:
- Create a new file called
index.html - Make sure it's saved in your project folder
- We'll now type out the HTML structure line by line
💡 Quick Tip:
In VS Code, you can type ! and press Tab to automatically generate the basic HTML structure. But for learning purposes, type everything out manually at least once—it helps you understand and remember!
Understanding Each Part
Let's go through the HTML structure line by line and understand what each part does.
Line 1: The DOCTYPE Declaration
<!DOCTYPE html>This is the DOCTYPE declaration. It's always the very first line of an HTML document. Here's what you need to know:
- It tells the browser that this is an HTML5 document
- It's not an HTML tag—it's an instruction to the browser
- You must include it at the top of every HTML page
- It's not case-sensitive, but lowercase is the convention
In older HTML versions, the DOCTYPE was much longer and complicated. HTML5 simplified it to just <!DOCTYPE html>. Nice and simple!
Line 2: The HTML Element
<html lang="en">The <html> tag is the root element of your HTML page. Everything else goes inside it. Think of it as the container that holds your entire webpage.
Notice the lang="en" part? This is called an attribute. It tells the browser that the content is in English. This helps with:
- Search engines understanding your content
- Screen readers pronouncing text correctly
- Browsers offering translation services
You can change "en" to other language codes like "es" (Spanish), "fr" (French), or "de" (German).
Lines 3-7: The Head Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>The <head> section contains metadata—information about your page that doesn't appear on the page itself. It's like the cover and copyright page of a book.
The Character Encoding Meta Tag
<meta charset="UTF-8">This tells the browser which character set to use. UTF-8 supports all languages and special characters (like émojis! 🎉). Always include this—it prevents weird character display issues.
The Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">This makes your page mobile-friendly. It tells mobile browsers to:
- Use the device's width as the page width
- Start at 100% zoom (initial-scale=1.0)
Without this tag, mobile browsers might display your page zoomed out, making text tiny and hard to read. Always include it!
The Title Element
<title>My First HTML Page</title>The <title> is super important! It:
- Appears in the browser tab
- Shows up in search engine results
- Appears when you bookmark a page
- Is read by screen readers for accessibility
Every page should have a unique, descriptive title between 50-60 characters. Make it meaningful—"My First HTML Page" is fine for practice, but real websites should use descriptive titles like "About Us - Company Name".
Lines 8-11: The Body Section
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph!</p>
</body>The <body> section contains everything that's visible on your webpage. Everything users see and interact with goes inside the body.
In our example:
<h1>creates a large heading (Heading 1)<p>creates a paragraph of text
We'll learn about many more elements in upcoming lessons, but for now, these two are perfect for your first page!
Line 12: Closing the HTML Element
</html>Every opening tag needs a closing tag! The </html> tag closes the HTML element we opened on line 2. This marks the end of your HTML document.
Your Complete First Page
Now that you understand each part, let's create a slightly more interesting first page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John's Personal Website</title>
</head>
<body>
<h1>Welcome to My Personal Website!</h1>
<p>Hi! My name is John and I'm learning HTML.</p>
<p>This is my very first webpage. I'm excited to learn more!</p>
<h2>About Me</h2>
<p>I'm a beginner web developer just starting my journey.</p>
<h2>My Goals</h2>
<p>I want to learn HTML, CSS, and JavaScript to build amazing websites.</p>
</body>
</html>Saving and Viewing Your Page
Step 1: Save Your File
- Press
Ctrl+S(Windows/Linux) orCmd+S(Mac) - Make sure your file is named
index.html - Check that it's saved in your project folder
Step 2: Open in Browser
There are several ways to view your page:
Method 1: Using Live Server (Recommended)
- Right-click anywhere in your HTML file
- Select "Open with Live Server"
- Your browser opens automatically with your page!
Method 2: Direct File Opening
- Find your
index.htmlfile in File Explorer/Finder - Double-click it, or right-click and choose "Open with" → Your browser
Method 3: Drag and Drop
- Open your web browser
- Drag the
index.htmlfile into the browser window
What You Should See
When you open your page, you should see:
- Your title in the browser tab
- A large heading saying "Welcome to My Personal Website!"
- Paragraphs of text below the heading
- Smaller headings for "About Me" and "My Goals"
- More paragraphs under each heading
🎉 Congratulations!
You've just created your first HTML page! This is a huge milestone. Every website on the internet started with someone writing HTML just like you did.
Understanding Indentation
Notice how the code is indented (moved to the right with spaces)? This is called code formatting and it's very important.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Heading</h1>
</body>
</html>Indentation shows which elements are inside (nested within) other elements:
<head>is inside<html>, so it's indented<title>is inside<head>, so it's indented further- This makes code easier to read and understand
Most code editors (like VS Code) indent automatically. If your code looks messy, right-click and select "Format Document" (or press Shift+Alt+F / Shift+Option+F).
Important File Naming Rules
When naming HTML files, follow these rules:
- ✅ Use lowercase letters:
index.html - ✅ Use hyphens for spaces:
about-us.html - ✅ No special characters: avoid
@ # $ % & - ✅ Always use the
.htmlextension - ❌ Don't use spaces:
my page.html(bad) - ❌ Don't use capital letters:
AboutUs.html(can cause issues)
Why "index.html" is Special
The file index.html is special because web servers automatically look for it when someone visits your website. If you visit www.example.com, the server automatically loads index.html.
Think of it as the "home page" or "default page" of a website. Most websites have an index.html as their main page.
Try This: Experiment!
Now that you have a working page, try making these changes:
- Change the title - Edit the text between
<title>tags and save. Watch the browser tab title change! - Add more paragraphs - Add a few more
<p>elements with your own text - Change the heading - Modify the text in the
<h1>tag - Try a different heading level - HTML has h1, h2, h3, h4, h5, and h6. Try adding
<h3>or<h4>
Don't be afraid to experiment! You can't break anything—just undo (Ctrl+Z) if something goes wrong.
Common Beginner Mistakes
Mistake 1: Forgetting Closing Tags
<!-- Wrong -->
<p>This is a paragraph
<p>This is another paragraph
<!-- Correct -->
<p>This is a paragraph</p>
<p>This is another paragraph</p>Mistake 2: Mixing Up Opening and Closing Tags
<!-- Wrong -->
<body>
<head>
<title>Page</title>
</head>
</body>
<!-- Correct -->
<head>
<title>Page</title>
</head>
<body>
<!-- content -->
</body>Mistake 3: Forgetting the DOCTYPE
<!-- Wrong -->
<html>
<head>
<title>Page</title>
</head>
...
<!-- Correct -->
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
...Mistake 4: Wrong Nesting Order
<!-- Wrong - tags overlap -->
<p>This is <strong>important text</p></strong>
<!-- Correct - proper nesting -->
<p>This is <strong>important text</strong></p>Checking Your Code
You can validate your HTML to check for errors using the W3C HTML Validator:
- Visit validator.w3.org
- Click "Validate by Direct Input"
- Copy and paste your HTML code
- Click "Check"
The validator will tell you if there are any errors in your HTML. Don't worry if you see warnings—focus on fixing errors first.
Save This Template
Here's a clean HTML template you can use for future projects. Save this in a file called template.html and copy it whenever you start a new page:
<!DOCTYPE html>
<html lang="en">
<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>Key Takeaways
- Every HTML page starts with
<!DOCTYPE html> - The
<html>element wraps everything - The
<head>contains metadata (info about the page) - The
<body>contains visible content - Always include charset and viewport meta tags
- Every page needs a unique, descriptive title
- Proper indentation makes code easier to read
- Always close your tags properly
- Use lowercase for file names with .html extension
- index.html is the default home page
What's Next?
You've created your first HTML page and understand its basic structure! In the next lesson, we'll dive deeper into the DOCTYPE declarations. You'll learn why it plays a crucial role in how browsers interpret and display your web pages.
Keep your first HTML page—it's the beginning of your web development journey! You'll look back on it later and be amazed at how much you've learned.