Students label text with headings and paragraphs, and find out that the browser ignores line breaks in the code.
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.
Predict and Run 10 min · Investigate 12 min · Modify 10 min · Make 8 min
Read the unit primer "HTML structure in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).
The surprise for students: pressing Enter in the code does not make a new line on the page. Only a new <p> does. A tag is a label in angle brackets, like <p>. Most tags come in pairs: an opening tag <p> and a closing tag </p> with a slash, wrapped around the text they label.
<p>. Ask one pair from each answer to say why. Most will say 4: that is the idea the lesson turns around.<h1> means the main heading. The one-line question is the key idea, that the tags decide and not the lines of code.<h1>, <h2> and <p>.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.
Swap notices with a partner. Without running them, point to each paragraph and say where one ends and the next begins.
Listen for students who point at lines of code instead of at the tags. Ask which tag told them where the paragraph ended.
Seeing that line breaks in the code do nothing. Let the Predict surprise land, and ask which tag starts a new line rather than fixing it.
| What you will see | A question to ask | The fix |
|---|---|---|
| Text the student typed on a new line runs on from the line before. | Which tag starts a new paragraph? | Wrap each paragraph in its own <p> and </p>. Pressing Enter in the code does not change the page. |
| A tag shows on the page as text, such as <h2 or h2>. | Does every tag have both of its angle brackets? | Every tag needs < and >, and a closing tag needs the slash, as in </h2>. |
| Everything after a heading is big and bold. | Where does the heading end? | Add the missing closing tag, such as </h2>, straight after the heading words. |
One possible solution for each task. Other correct programs are fine.
<h1>Swimming carnival</h1>
<p>The swimming carnival is on Thursday. Bring a towel.</p>
<h1>Swimming carnival</h1>
<p>The swimming carnival is on Thursday.</p><p>Bring a towel.</p>
<h1>Swimming carnival</h1>
<h2>When</h2>
<p>The swimming carnival is on Thursday.</p>
<h2>What to bring</h2>
<p>Bring a towel.</p>
<h1>Spring concert</h1>
<h2>When and where</h2>
<p>The concert is on Wednesday at 6 pm in the hall.</p>
<h2>Who is playing</h2>
<p>The Year 7 band, the choir and the string group.</p>
Stretch: Add a third section with an <h2> heading, and try <h3> and <h4> to see what the heading numbers do.
Support: Give students the Modify starter and ask them only to change the words between the tags, then add one <h2>. Point to the Reference drawer for each tag.
A student presses Enter in the middle of a paragraph in their code, but the page does not change. Why, and how do they start a new line?
The browser ignores line breaks in the code. To start a new paragraph, end the first with </p> and start the next with <p>.
Next lesson puts tags inside other tags, so a word can be important inside a paragraph, and finds out what the browser does when a tag is missing. Class idea: show a news website and ask students to spot the headings and paragraphs.