What this lesson teaches
Children learn HTML basics by crafting a digital treasure map, understanding tags and structure. This hands-on approach makes coding visible and relatable, as they literally map out information in a fun context.
Digital Literacy
Can you finish create your code map in about 30 min?
Create Your Code Map
You will children learn HTML basics by crafting a digital treasure map, understanding tags and structure.
Duration30 min
Age GroupAges 11–12
DifficultyIntermediate
SubjectDigital Literacy
See how this hands-on lesson works
Sign in to start the full activity flow, save this lesson, print a learner version, and track XP. The preview below is public so parents and educators can evaluate the activity before joining.
What you need
How the activity runs
The learning connection
Utilizing Bruner's CPA approach, this activity engages children in a concrete and then symbolic understanding of HTML. By physically arranging and coding elements, they create a tangible representation of abstract HTML, solidifying their grasp of web structure.
Try it with your learner
1. Open a simple text editor like Notepad or an online HTML editor. 2. Write '<html>' to start your document. 3. Add '<head><title>Treasure Map</title></head>' for the page title. 4. Create a '<body>' section and add a list of 5 hidden treasures using '<ul>' and '<li>' tags. 5. Insert an image of a treasure chest using '<img src="URL" alt="Treasure Chest">'. 6. Save your file as 'treasure_map.html' and open it in a web browser to see your creation!