Computer Science
Grade 5
20 min
Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags
Learn to add titles to the webpage and create headings of different sizes.
What you'll learn
- Identify the `` tag and explain where it appears in a web browser window.
- Explain the difference between the `` tag and the `` tag and how they affect the size of a heading on a webpage.
- Apply the `` - `` tags to create a webpage with a main heading and at least two subheadings, demonstrating proper nesting (e.g., `` under ``).
- Insert a `` tag into the `` section of an HTML document to give the webpage a specific title, visible in the browser tab.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the purpose of the `<title>` tag and explain where its content appears.
Differentiate between the `<title>` tag and the `<h1>` tag.
Explain the hierarchy of heading tags from `<h1>` (most important) to `<h6>` (least important).
Correctly write the HTML for a page title and at least three different heading levels.
Structure a simple webpage using a single `<h1>` and appropriate `<h2>` and `<h3>` subheadings.
Identify and correct missing closing tags for titles and headings.
Have you ever tried to find a book in the library with no title on the cover or spine? 📖 It would be impossible! Webpages need titles and headings for the same reason.
Today, we're going to learn how to give our webpages a pr...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML TagA special keyword surrounded by angle brackets (`<` and `>`) that tells the web browser how to display content.`<h1>` is a tag. `<body>` is a tag.
ElementThe complete instruction, which includes the opening tag, the content inside, and the closing tag.`<h1>My Awesome Webpage</h1>` is a complete element.
<title> TagThe tag that sets the title of the webpage. This title appears on the browser tab at the very top of the window, not on the page itself.`<title>My First Website</title>`
Heading Tags (<h1> - <h6>)Tags used to create headings or titles on the actual webpage. They are used to structure the page content.`<h1>Main Title</h1>`, `<h2>Subtitle</h2>`
HierarchyAn organization...
3
Core Syntax & Patterns
Paired Tags Syntax
`<tagname>Content goes here</tagname>`
Most HTML tags, including `<title>` and all heading tags, come in pairs. You need an opening tag (like `<h1>`) and a closing tag with a forward slash (like `</h1>`). The content you want to affect goes in between them.
Heading Hierarchy Rule
Start with `<h1>`, then use `<h2>`, then `<h3>`, and so on. Do not skip levels.
Think of it like an outline for a report. You should only have one `<h1>` per page for the main title. Use `<h2>` for main sections, and `<h3>` for sub-sections inside an `<h2>`. Don't jump from an `<h1>` straight to an `<h3>`.
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
A search engine like Google is trying to understand your webpage. Which tag gives it the SINGLE most important clue about the overall topic of the entire page?
A.The `<title>` tag
B.The first `<h2>` tag
C.The `<h6>` tag
D.Any `<h1>` tag after the first one
Challenging
A student's code has this structure: `<body> <h1>My Animals</h1> <h3>Lions</h3> <h3>Tigers</h3> <h2>My Plants</h2> <h3>Trees</h3> <h3>Flowers</h3> </body>`. What is the logical error in this heading structure?
A.You cannot have two `<h3>` tags in a row.
B.The first `<h3>` (Lions) should be an `<h2>` because it's a main sub-topic of Animals.
C.The `<h2>` (My Plants) should be an `<h1>`.
D.There are no errors, this structure is correct.
Challenging
On a long science report webpage, why is using `<h1>`, `<h2>`, etc., correctly more helpful to a reader than just making text bold and changing its size?
A.Because heading tags can be animated but bold text cannot.
B.Because heading tags use less data and make the page load faster.
C.Because browsers and plugins can create a clickable table of contents from headings, allowing easy navigation.
D.Because bold text is harder for people to read than heading text.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeComputer Science for other grades
Frequently asked questions
What grade level is "Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags"?
Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags is a Grade 5 Computer Science lesson on ExcelOS.
What will I learn in Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags?
You'll be able to: Identify the `` tag and explain where it appears in a web browser window; Explain the difference between the `` tag and the `` tag and how they affect the size of a heading on a webpage; Apply the `` - `` tags to create a….
Is "Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags" 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 Adding Titles and Headings: The `<title>` and `<h1>` - `<h6>` Tags?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.