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.
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 Free