Tags inside tags

Students put one tag inside another, close the last one opened first, and find out that the browser guesses silently when tags are missing or cross.

Structure and style a page · Text and style · about 40 minutes · Open the student lesson

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

Slides Download Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can put one tag inside another, such as inside .
I can close tags in the right order: the last one opened closes first.
I can explain that the browser shows no error for a wrong closing tag, only a best guess.

Timing

Predict and Run 10 min · Investigate 12 min · Modify 8 min · Make 10 min

Before class

Read the unit primer "HTML structure in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).

The idea: nesting. Tags go inside other tags like boxes inside boxes, so the tag opened last must be closed first. Turn on Boxes in the playground and every tag becomes a box, which shows the nesting.

Unlike Python, HTML never stops with an error. A missing or crossed tag gives a page that looks wrong, and the browser says nothing.

Running the lesson

Predict and Run: many students think only water changes, or that the inner tag cancels the outer one. Turn on Boxes and ask which boxes water sits in. Ask the pairs who chose option 3 why they think the inner tag cancels the outer one.
Investigate: the crossing is on one line. Ask which tag was opened last and whether it closed first. The missing  trace is the surprise: the bold runs on into the next paragraphs and no message appears.
Modify and Make: one change at a time, check the page each time. In Boxes, a correct page has every box fully inside another.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

Box it on paper (investigate, 4 min)
On paper, write
, and for one sentence. Draw a box around each tag pair. Do any boxes cross?

Boxes that cross are the bug. Ask which closing tag has to move so every box sits inside another.

The hard part (on purpose)

Closing tags in the right order. Turn on Boxes and ask which box is inside which, rather than correcting the tags.

When students get stuck

What you will see	A question to ask	The fix
Everything after one word is bold or slanted.	Which closing tag is missing?	Add the missing </strong> or </em> straight after the words it should cover.
Bold and slanted words stop in the wrong places.	Which tag did you open last, and did it close first?	Close in reverse order of opening, </em> then </strong>.
A tag shows on the page as text.	Does it have both < and >, and a slash if it is a closing tag?	Every tag needs both brackets, and a closing tag needs the slash.

Answers to the checks

Predict: Which words will look both bold and slanted?
Only water. The is inside the , so water gets both looks. a hat and sunscreen are only inside , so they are bold but not slanted.
Sam's notice: Sam wants a hat and water bold, with water also slanted. The end of the paragraph looks wrong, but nothing reports an error. Click the line where the tags cross.
line 3
Line 3 closes while is still open, so the two tags overlap. The last tag opened must close first: , then .
No error message: The first paragraph is missing its . Fill in whether each line of text looks bold.
yes, yes
The browser shows no error. It closes the tag at the end of the paragraph, then opens it again in the next ones, so the bold carries on to the end of the page. A missing closing tag changes the page without any warning.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Fix the order

<h1>Sports day</h1>
<p>Bring <strong>a hat and <em>water</em></strong> on Friday.</p>

Modify › Both at once

<h1>Sports day</h1>
<p>Bring <strong>a hat and <em>water</em></strong> on <strong><em>Friday</em></strong>.</p>

Make

<h1>School trip</h1>
<h2>When</h2>
<p>The trip is on Tuesday. The bus leaves at <strong>8 am <em>sharp</em></strong>.</p>
<h2>What to bring</h2>
<p>Bring <strong>lunch</strong>, a hat and a <em>water</em> bottle.</p>

Stretch and support

Stretch: Put inside inside inside nothing else, then draw the boxes on paper. Add a comment above each paragraph with .

Support: Give students the Modify starter and ask only for the first task: swap two closing tags. Use Boxes to show the boxes cross.

Exit ticket

A student writes Friday night. What is wrong, and what will the browser say?

The tags cross: was opened last so must come first. The browser says nothing; it makes a best guess and the page may look wrong.

What each step is for

Predict: Students expect an inner tag to replace the outer one, or not to work; a nested tag adds its look to the outer one.
Run: A tag inside a tag adds to it, and the tag opened last must close first.
Investigate: Nesting means the last tag opened closes first; when it does not, the browser guesses and says nothing.
Modify: Fixing the order of closing tags, then nesting two tags yourself.

Where it leads

Next lesson adds CSS: a rule can style every tag of one kind at once, and nesting is what lets it colour just the important words. Class idea: show a news website with the page source open and spot tags inside tags.