Computer Science
Grade 7
20 min
The Basic HTML Structure: The `<html>`, `<head>`, and `<body>` Tags
Identify and use the fundamental HTML tags to create a basic webpage structure.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Identify the three core HTML tags: `<html>`, `<head>`, and `<body>`.
Explain the purpose of the `<html>` tag as the main container for a webpage.
Describe the function of the `<head>` tag and list at least one type of information it contains, such as the page title.
Explain the role of the `<body>` tag in holding the visible content of a webpage.
Write a basic, valid HTML document structure using `<html>`, `<head>`, and `<body>` tags.
Differentiate between the content that belongs in the `<head>` and the content that belongs in the `<body>`.
Use the `<title>` tag inside the `<head>` to set a webpage's browser tab title.
Ever wondered how a website is built, like a house?...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML TagA special keyword surrounded by angle brackets (`<` and `>`) that tells the web browser what to do. Most tags come in pairs: an opening tag and a closing tag.`<p>` is the opening tag for a paragraph. `</p>` is the closing tag.
<html> TagThe root or main container for all other HTML elements on a webpage. It tells the browser that this is an HTML document.<html> ...all other code goes here... </html>
<head> TagA container for information *about* the webpage that isn't displayed on the page itself. This includes the page title that appears in the browser tab.<head> <title>My Awesome Website</title> </head>
<body> TagThe container for all the visible content of a webpage, such as headin...
3
Core Syntax & Patterns
The Nesting Order Rule
<html> contains <head> and <body>. <head> and <body> are siblings and do not overlap.
Think of `<html>` as a filing cabinet. The `<head>` and `<body>` are two separate drawers inside it. You can't put one drawer inside the other; they sit side-by-side within the main cabinet.
The Tag Pairing Rule
Most HTML tags have a start tag (e.g., `<body>`) and an end tag (e.g., `</body>`). The end tag has a forward slash `/`.
This rule tells the browser where an element begins and where it ends. Forgetting the closing tag is a common error that can break your page.
The DOCTYPE Declaration
<!DOCTYPE html>
This declaration must be the very first thing in your HTML document, before the `&l...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You need to fix this broken code: `<html><head><body><title>Fix Me</title><h1>Content</h1></head></body></html>`. What is the correct and valid structure?
A.<html><head><title>Fix Me</title></head><body><h1>Content</h1></body></html>
B.<html><body><head><title>Fix Me</title></head><h1>Content</h1></body></html>
C.<html><head><h1>Content</h1></head><body><title>Fix Me</title></body></html>
D.<html><title>Fix Me</title><head></head><body><h1>Content</h1></body></html>
Challenging
A client wants a webpage with the browser tab title 'Contact Us' and the only visible content being the paragraph 'Email us here.' Which code block perfectly achieves this?
A.<html><head><p>Email us here.</p></head><body><title>Contact Us</title></body></html>
B.<html><head><title>Contact Us</title></head><body><p>Email us here.</p></body></html>
C.<html><head><title>Contact Us</title><p>Email us here.</p></head><body></body></html>
D.<html><body><title>Contact Us</title><p>Email us here.</p></body></html>
Challenging
Why is the structure `<html><head></head><body></body></html>` correct, while `<html><head><body></head></body></html>` is fundamentally incorrect?
A.Because `<head>` and `<body>` represent separate, non-overlapping parts of the document; one cannot contain the other.
B.Because the `<body>` tag must always be the very last tag before the closing `</html>` tag.
C.Because closing tags like `</head>` must always come immediately after their opening tag.
D.Because the browser reads from top to bottom and will get confused by the `<body>` tag appearing too early.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free