Computer Science
Grade 6
20 min
What is HTML? Exploring the Web's Building Blocks
Understand the purpose of HTML and how it structures web content.
What you'll learn
- Identify at least three common HTML tags (like , , ) and explain what they do in a simple webpage.
- Explain, in their own words, how HTML is like the structure or skeleton of a webpage, while other things like colors and fonts are added on top.
- Create a very simple webpage using a basic HTML editor (like a simplified online tool) that includes a heading and a paragraph of text.
- Given a short snippet of HTML code, identify at least one error (e.g., missing closing tag) and suggest a way to fix it.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define HTML and its purpose as the structure of a webpage.
Identify the three main parts of an HTML element: opening tag, content, and closing tag.
Differentiate between common tags like `<h1>`, `<p>`, `<html>`, `<head>`, and `<body>`.
Write the basic structure of an HTML document from scratch.
By the end of a this lesson, students will be able to create a simple webpage with a heading and a paragraph.
Explain why closing tags are important and how to write them correctly.
Ever wondered how your favorite game's website or a cool blog is made? 🤔 It all starts with a secret code that acts like the skeleton of the webpage!
In this lesson, we'll learn about HTML, the language used to build all websites. You'll di...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML (HyperText Markup Language)The standard coding language used to create and structure the content of a webpage. It's like the skeleton that gives a website its shape.The entire block of code that makes up a webpage is written in HTML.
TagA special command in HTML, wrapped in angle brackets `< >`, that tells the web browser what to do with the text.`<p>` is the tag for a paragraph. `<h1>` is the tag for the most important heading.
ElementA complete piece of HTML content, which includes an opening tag, the content inside, and a closing tag.`<p>This is a paragraph.</p>` is a complete paragraph element.
Opening TagThe tag that marks the beginning of an element.`<h1>` is the opening tag for a main heading.
Closing TagThe tag th...
3
Core Syntax & Patterns
The Tag Sandwich
Opening Tag + Content + Closing Tag
Most HTML elements follow this pattern. You 'sandwich' your content (like text) between an opening tag and a closing tag to tell the browser what that content is.
The Basic Document Structure
`<!DOCTYPE html>`
`<html>`
`<head>`
`<!-- Info for the browser goes here -->`
`</head>`
`<body>`
`<!-- Visible content goes here -->`
`</body>`
`</html>`
Every HTML file should start with this basic structure. The `<body>` section is where you put all the content that you want people to see on the page.
Nesting Tags
Tags must be closed in the reverse order they were opened.
When you put an element inside another element, it's called nest...
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 are given three pieces of code: (1) `</p>`, (2) `<p>`, (3) `Welcome to my project!`. What is the correct order to assemble these into a valid HTML element?
A.2, 3, 1
B.1, 2, 3
C.3, 2, 1
D.2, 1, 3
Challenging
A student has correctly set up their `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags. They now want to add a main heading and a paragraph to their page. What is the most logical and correct next step?
A.Add a `<title>` tag inside the `<body>`.
B.Type an `<h1>` element, complete with content and a closing tag, inside the `<body>`.
C.Add a `<p>` tag inside the `<head>`.
D.Create a new `<body>` tag for the heading and another one for the paragraph.
Challenging
The rule for nesting is 'tags must be closed in the reverse order they were opened.' Which code example breaks this rule?
A.<body><p>This is text.</p></body>
B.<body><h1>My Title</h1><p>My text.</p></body>
C.<body><h1><p>My Title</h1></p></body>
D.<html><head><title>Title</title></head></html>
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from Web Development Basics
Computer Science for other grades
Frequently asked questions
What grade level is "What is HTML? Exploring the Web's Building Blocks"?
What is HTML? Exploring the Web's Building Blocks is a Grade 6 Computer Science lesson on ExcelOS.
What will I learn in What is HTML? Exploring the Web's Building Blocks?
You'll be able to: Identify at least three common HTML tags (like , , ) and explain what they do in a simple webpage; Explain, in their own words, how HTML is like the structure or skeleton of a webpage, while other things like colors and fonts….
Is "What is HTML? Exploring the Web's Building Blocks" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with What is HTML? Exploring the Web's Building Blocks?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.