Offline Icebreakers | HTML Thimble Tag Puzzle

15 minutes

Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.

Activity 2 of 6

Read the Web

21st Century Skills

Collaboration Communication Problem-solving

Web Literacy Skills

Synthesize

Learning Objectives

Understand and demonstrate how opening and clsoing t6ags complete HTML elements on a webpage.

Audience

13+
Beginner web users

Materials

Cards labeled with opening and closing HTML tags for common elements like p, h1, and img.

Preparation

Write "opening" and "closing" tags on index cards or post-its (use different colors for each pair, ex: <html> tags in blue, <head> tags in orange, <body> in dark green, <p> in light green, <title> in pink = 5 pairs), and print a simple HTML document to serve as a cheat sheet.
Activity

10 minutes

First, spread cards around the room and ask each kid to pick a tag. If you have less than 10 participants, use less tags (exclude less crucial tags, starting with <h1> and </h1>, and <p> and </p> or tell each kid to find a "perfect pair" (ex: <head> and </head>).

Next, ask participants to find their "perfect pairs" (ex: kid1 holding <body> and kid2 holding </body>) and have them explain to the rest of the group what role they believe their tag plays in the HTML document (they can ask for the HTML "cheat sheet"). After the "perfect pairs" describe their "role", see if the entire group can nest the tags in the right order. If you have enough participants you can ask them to position themselves in rows in the room. If space is limited or if a kid has more than one tag, ask them to place the cards on a surface (table or floor) nested in the right order. Remind them to avoid "floating heads" and "open bodies."

Finally, drawing on these answers, create a digital version of the HTML Tag Puzzle in Thimble, while asking the group to choose what to write as <p> and <h1> (or, if they´ve been eliminated, as <head> and <body>).
Reflection

5 minutes

Have the group collectively assess its performance. Do they believe they have created a functioning HTML document in Thimble? If there are errors in their ordering, ask the participants to "debug" the code, offering placement suggestions to their peers. Continue this debugging, providing guidance as necessary, until participants have created a working Thimble template.

Up Next --> Puzzles for Teaching HTML