← ACARA Digital Technologies Years 9–10

Revealing the layers with View page source and Inspect

Browser tool opened by right-clicking an element. It shows that element's HTML and CSS so you can explore a real site's layers. View page source shows the whole HTML.

Part of: ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 6

Understanding Revealing the layers with View page source and Inspect in ACARA Digital Technologies Years 9–10

What it does: In Inspect you can double-click an element's HTML and type new content. Only your local copy changes, and it resets when you refresh. View page source opens the full HTML that the server sent. It shows the structure and content layers of the page. The Wayback Machine keeps archived versions of sites. Viewing old versions shows how HTML and CSS design has changed over time. Inspect lets you explore the structure and style of a single element on a real website, so you can see its layers. The browser downloaded a copy of the page, so edits in Inspect never reach the website's server.

Common mistakes: View page source shows the body must be closed with a closing tag. The second body needs a slash: </body>. In the Styles panel of Inspect, each CSS declaration is property: value. It should use a colon, not an equals sign: font-size: 32px;.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Revealing the layers with View page source and Inspect to a class →

This module's key terms are also in a printable crossword (Modules 155–225) and word search (Modules 116–225).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which browser feature shows the raw HTML of a whole page?
Print previewView page source
Matches
Inspect changes the real website for everyone
↓
Edits made in Inspect only change your own local copy in your browser. The real site stays the same, and your changes vanish when you refresh.
Applying
Meanings
Term
Inspect
Meaning
Browser tool opened by right-clicking an element. It shows that element's HTML and CSS so you can explore a real site's layers. View page source shows the whole HTML.
Practice
<!-- Right-click the heading, then Inspect -->
Testing
Gaps
:https://example.com.au
Check Answer
Spots
3<head><title>Shop</title></head>
4<body><h1>Sale</h1><body>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Fennec Fox' badge — Listener, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which browser feature shows the raw HTML of a whole page?
A. View page source ✓
B. Print preview
View page source opens the full HTML that the server sent. It shows the structure and content layers of the page.
2. How do you open Inspect for one element on a webpage?
A. Double-click the element and press Delete
B. Right-click the element, then choose Inspect ✓
Right-clicking an element and choosing Inspect opens the developer tools at that element's HTML and CSS.
3. What does Inspect show you about a chosen element?
A. Its HTML and the CSS rules applied to it ✓
B. Only the photos stored on the web server
Inspect links each element to its HTML and its CSS styles, so you can see structure and presentation together.
4. You edit a heading's text in Inspect. What happens?
A. Only your local copy in the browser changes ✓
B. The real website changes for every visitor
Inspect edits only the copy loaded in your browser. Refresh the page and the original comes back. The real site is untouched.
5. You turn off a page's CSS in the browser. What do you see?
A. A blank page with nothing on it
B. The structure and content, with no styling ✓
Without CSS, the HTML content and structure remain (headings, paragraphs, lists) but the presentation layer is gone.

Match the Pairs

view-source:https://example.com → Shows the raw HTML source code of the whole page, instead of the rendered page
Right-click > Inspect → Opens the developer tools on the element you clicked, showing its HTML and CSS
Edit a local copy of a page in the browser by changing its text in the Elements panel, without changing the real website → <h1>My own heading</h1>
Turn off CSS to see structure alone: untick a rule in the Styles panel, and the HTML content stays → /* h1 { color: red; } */
Inspect changes the real website for everyone → Edits made in Inspect only change your own local copy in your browser. The real site stays the same, and your changes vanish when you refresh.
View page source shows the CSS of one clicked element only → View page source shows the whole page's HTML. Inspect is the tool that shows the HTML and CSS of one chosen element.

Key Term

Inspect
Browser tool opened by right-clicking an element. It shows that element's HTML and CSS so you can explore a real site's layers. View page source shows the whole HTML.

Fill in the Blanks

1. view-source:https://example.com.au
Hint: Type the URL prefix that opens a page's full HTML source in the browser
2. <!-- Inspect shows the HTML below --> <h1 class="title">Surf Club</h1>
Hint: Type the attribute name that labels an element so CSS can target it
3. .title { color: blue; }
Hint: Type the CSS property that sets the text colour, as seen in the Styles pane
4. https://web.archive.org/web/2010/example.com
Hint: Type the domain of the Wayback Machine, which shows old versions of sites
5. <!-- Delete this line to turn off CSS --> <link rel="stylesheet" href="style.css">
Hint: Type the rel value that tells the browser this linked file holds CSS

Spot the Error

Question 1
A <!DOCTYPE html>
B <html>
C <head><title>Shop</title></head>
D <body><h1>Sale</h1><body>
E </html>
Line D — View page source shows the body must be closed with a closing tag. The second body needs a slash: </body>.
Question 2
A h1 {
B color: navy;
C font-size = 32px;
D }
Line C — In the Styles panel of Inspect, each CSS declaration is property: value. It should use a colon, not an equals sign: font-size: 32px;
Question 3
A <head>
B <link src="style.css"
C rel="stylesheet">
D </head>
Line B — A link element points to its stylesheet with the href attribute, not src. Turning CSS off in the browser removes this file's styling. It should be href="style.css".
Question 4
A <style>
B #intro { color: red; }
C </style>
D <p class="intro">Hi</p>
Line B — The paragraph uses class="intro", so the selector needs a dot, not a hash. A # targets an id. It should be .intro { color: red; }
Question 5
A <ul>
B <li>Home</li>
C <li>About</li>
D <li>Contact</ul>
E </ul>
Line D — Inspect shows each list item as its own element. The li opened here must be closed with </li>, not </ul>.

Student with a class code? Join your class →