Beginner20 minutesTheoryPracticeProject

Your First HTML Page

🎯 Start Here: Your First Web Page

Every website you've ever visited—from Google to YouTube to TikTok—started with someone writing their first HTML page. Today, that someone is YOU! In just 20 minutes, you'll create a real web page that actually works in a browser.

Here's the exciting part: HTML is so forgiving that you can start creating right away, making mistakes along the way, and still end up with something awesome.

Quick Reflection:

Think about your favorite website. What information does it show in the browser tab at the top?
When you search on Google, how does the page title appear in search results?
What makes a web page look organized versus messy?

In this tutorial, you'll learn the skeleton that holds every single web page together!

Learning Objectives

By the end of this lesson, you'll be able to:

✓ Understand Understand the basic structure of an HTML document
✓ Learn about essential head elements and why they matter
✓ Create Create a complete restaurant web page from scratch
✓ Practice with real-world content that could go live on the internet

Why This Matters:

Understanding HTML document structure is like learning the foundation of a house. Without it, nothing else works. This is the single most important concept in web development—master this, and you're ready to build anything on the web.

Basic HTML Document Structure

Every HTML page needs a basic structure. Here's the template:

Understanding Each Part:

<!DOCTYPE html> tells browsers this is an HTML5 document
<html> is the root element of the page
<head> contains metadata about the document
<body> contains the visible content

Essential Head Elements

The <head> section contains important information about your page:

charset defines the character encoding
viewport helps with mobile responsiveness
title sets the page title shown in browser tabs

Important Note

These meta tags should always be placed at the top of your <head> section:

The charset declaration should be the first element in <head> to ensure proper character encoding
The viewport meta tag is crucial for responsive design on mobile devices

Further Reading: Check the MDN documentation on meta tags for detailed information about these and other meta elements.

⏸️ ⏸️ Quick Check: HTML Structure

Before we continue, make sure you understand the basics:

What is the purpose of the DOCTYPE html declaration?
Where should the charset meta tag be placed and why?
What goes in the head vs the body?

Check Your Answers

Answer: The DOCTYPE tells browsers this is an HTML5 document
Answer: At the very top of the head section to ensure proper character encoding from the start
Answer: head contains metadata (invisible info for browsers and search engines), while body contains all visible content

How confident are you with this concept?

😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!

Getting Ready to Code

Before we start, you can choose how you want to code along with this tutorial:

Local Editor

Use your preferred code editor:

Create a new file: index.html
Use VS Code, Sublime, or any text editor
Save and open in your browser

Online Editor

Use an online coding platform:

Practice Area

Use our built-in editor:

Interactive examples below
Try code and see results
No setup required

Tip: For beginners, we recommend using the Practice Area or an online editor to focus on learning rather than setup.

Project: Black Swan Bistro

Let's create a real webpage for a Perth restaurant. Here's our content:

Content to Use:

Black Swan Bistro

The Restaurant
The Black Swan Bistro offers casual lunch and dinner fare in a relaxed riverside atmosphere.
The menu changes seasonally to highlight the freshest Western Australian ingredients.

Catering
You enjoy the Swan River views. We'll handle the cooking. Black Swan Catering can handle events
from casual sundowners to elegant corporate functions.

Location and Hours
Elizabeth Quay, Perth;
Monday through Thursday 11am to 9pm;
Friday and Saturday, 11am to midnight

Let's structure this content with HTML:

Code

Preview

Black Swan Bistro

The Restaurant

The Black Swan Bistro offers casual lunch and dinner fare in a relaxed riverside atmosphere. The menu changes seasonally to highlight the freshest Western Australian ingredients.

Catering

You enjoy the Swan River views. We'll handle the cooking. Black Swan Catering can handle events from casual sundowners to elegant corporate functions.

Location and Hours

Elizabeth Quay, Perth;
Monday through Thursday 11am to 9pm;
Friday and Saturday, 11am to midnight

HTML Elements Used

Notice how we used:

<h1> for the main title
<h2> for section headings
<p> for paragraphs
<br> for line breaks

Practice

Create a home page for the Personal Profile Page using this content:

Alex Chen — Web Development Student

About Me
I'm learning web development from scratch. I'm interested in building
useful, well-made websites and eventually working as a front-end developer.
Based in Perth, Western Australia.

Skills
HTML, CSS, JavaScript (beginner), VS Code

Get in Touch
Email: alex@example.com
GitHub: github.com/alexchen
Location: Perth, WA

Your task:

Create a new file named index.html
Use the same HTML structure as the Black Swan Bistro example
Include all the required meta tags in the head section
Structure the content using appropriate headings and paragraphs
Use line breaks for the contact details

What's Next?

In the next lesson, we'll explore more text elements like:

Different types of lists
Text formatting elements
Quotations and citations
Comments and special characters

These elements will help us create more detailed and better-structured content.

Lesson checkpoint

Test Your Knowledge

5 questions

Strengthen your understanding of Html First Page by answering the quiz below.

Html First Page Quiz

Test your understanding of Html First Page concepts.

🏁 Lesson Complete: You Built Your First Webpage!

Key Takeaways:

Every HTML document needs a proper structure: DOCTYPE, html, head, and body elements
The head contains metadata like title and charset, while body contains visible content
Semantic HTML elements (header, main, footer, nav, article) give meaning to your content
Headings (h1-h6) create a hierarchy that helps both users and search engines understand your page
Building real projects (like Black Swan Bistro) helps reinforce what you learn

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

✅ Create a complete HTML document with proper structure Check!
✅ Use semantic HTML5 elements to organize content meaningfully Got it!
✅ Implement headings, paragraphs, and lists correctly Can explain it!
✅ Build a real-world webpage for a restaurant Could teach this!
✅ Understand the difference between metadata and visible content Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

🏗️ Think About Structure

How does using semantic elements like <header> and <footer> make your HTML more meaningful than just using <div>?
Why do you think search engines care about proper heading hierarchy?

💼 Real-World Connection

Visit any restaurant or business website. View the page source (right-click → View Page Source). Can you spot the DOCTYPE, head, and body sections? Look for semantic elements like header, nav, and footer.

🤔 Real-World Test:

The structure you learned today is the foundation of every professional website. From small business sites to major e-commerce platforms, they all follow this same basic pattern. You've just learned the building blocks used by millions of websites!

🎯 Looking Ahead:

In the next lesson, Working with Text, you'll learn how to format text with bold, italics, emphasis, and more. You'll make your content not just structured, but styled for impact!

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Working with Text

Practice Projects

Apply what you've learned with these hands-on projects:

Personal Profile Page

Create a simple personal profile page with basic HTML structure

HTMLBeginnerStructure

Start Project

Recipe Page

Build a page for your favorite recipe using HTML structure

HTMLBeginnerContent