Let’s begin with Lecture 3 of the HTML5 & CSS3 series. Basic Structure of an HTML Document. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand the basic structure of an HTML document.
- Know what each HTML tag does in simple terms.
- Be able to write a complete HTML page from scratch.
🧒 What is HTML?
HTML stands for HyperText Markup Language.
It’s like the skeleton of a webpage — it gives your website shape and meaning.
Think of it like this:
If a website is a pizza, HTML is the dough — everything else (like cheese and toppings) goes on top!
📄 The Basic HTML Page
Here’s the simplest version of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>Let’s break down each line so you understand exactly what’s going on.
🔍 Line-by-Line Explanation
1. <!DOCTYPE html>
This line tells the browser that this is an HTML5 document.
Think of it like writing “Once upon a time…” at the start of a story — it sets the scene.
2. <html>
This is the root element. It wraps all the content on your webpage.
You can imagine it as a big box that holds everything else inside it.3. <head>
This section contains information about the webpage that doesn’t appear directly on the screen.
Inside <head>You can find things like:
<title>– The title shown in the browser tab<meta>tags – extra info for browsers and search engines- Links to CSS files
4. <title>
The <title> The tag defines the title of the webpage that appears in the browser tab.
Example:
<title>My First Webpage</title>Try changing this and see how the browser tab updates!
5. <body>
This is where all the visible content goes — like text, images, buttons, videos, etc.
Whatever you want people to see on your website should be inside the <body> tag.
6. <h1> – Heading Level 1
This is the main heading of your page. Think of it like the title of a book chapter.
There are also <h2>, <h3>, up to <h6> for smaller headings.
7. <p> – Paragraph
This is used to write normal text or paragraphs on the webpage.
💻 Try This: Write Your Own HTML Page
Let’s create a new HTML file and test what we’ve learned.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file called:
about-me.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Hi! My name is Naji. I'm learning HTML and building my first website.</p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You now have two webpages: index.html and about-me.html!
🧪 Try It Yourself!
- Change the
<title>to"Naji's Amazing Website" - Update the paragraph to say something about yourself.
- Add another
<p>Tag below with a fun fact.
🚀 Next Lecture Preview:
In Lecture 4, we’ll learn about tags, elements, and attributes — what they mean and how to use them correctly.
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
What is a Website? And How It Works| Lecture 1
Setting Up Your Coding Environment | Lecture 2
