- TIP: This game is best played with groups over 10. If you have a larger group, you may want to add some extra silly tags or if you have a small group you may want to use fewer. Feel free to make up your own. Be creative.
- Make Tag Cards: Either print-out the Tag Cards here, or make your own on separate pieces of paper, write the following “tags” (be sure to include the arrow!):
- Open tags: "<clap> →" (also sing, stomp, spin, shake)
- Close tags: "</clap> ←" (also sing, stomp, spin, shake)
- Clear enough space in the room for players to stand in a circle.
Steps for the Activity
IntroductionIntroduction: Ask participants to raise their hands if they know some HTML already. On a projector, go to any website and click “View Source” to show the HTML code for that page. If you have a participant with HTML experience, ask them to see if they can point out a “Tag” in the code. Make sure to introduce these concepts before starting the game:
- HTML stands for Hypertext Markup Language and is the standard “markup” for contributing pages to the web.
- HTML Tags tell your web browser how translate the code into the website that most Internet users will see . For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words on the page.
- An Open Tag, <tag>, tells the webpage when to start doing something, while a Closed Tag, </tag>, tells the webpage when to stop.
Get Started!Explain to participants that they are about to have a fun dance competition to show them how HTML tags work.
- Arrange the players into a circle, making sure there is enough room to walk around the outside of the circle.
- Select 2 players from the group to be the “Coders”. Hand one of them the first open tag and the other one the corresponding closed tag. Start with an easy one like <clap> and </clap>.
- Start the music and have the 2 Coders walk around the outside of the circle while the other players stand still. Make sure the Coders keep a little distance between them. You could have them start walking 5 paces back from each other.
- When you stop the music, the Coders attach the tags to the members of the circle they are standing closest to.
- Everyone who is standing in between the arrows of the open tag <clap> and closed tag </clap> will now have to start clapping (the people wearing the tags, don’t have to). The clapping players should continue to clap for the rest of the game.
- Now select 2 new tags and hand them to the Coders (for instance <sing> and </sing>).
- Repeat steps 3 & 4. This time, when the Coders hand over the tags, anyone who is between the <sing> and </sing> tags will have to sing. If any players are between both the <clap> tags AND the <sing> tags, then they will have to clap AND sing.
- Continue these steps again with the rest of the tags (and any other tags you want to add the game) to make a fun, complicated tag dance party! When the Coders have the final tags, ask them to join the circle wherever they are once the music stops (instead of handing the tags to people in the circle). Everyone standing between the tags the Coders are holding performs the actions on their tags.
- After all the tags have been used, you could have the players with tags move around one at a time to change up who is doing what. This will help communicate how tags work in html code.
Ask learners to choose any website and “view source” to look for tags and guess what each tag does. example of HTML code and have students try to point out the tags. [NOTE: some websites, like Google.com or facebook.com, have more complicated code and not enough simple HTML to explore. News sites, wikipedia, blogs, youtube, company/organization websites are better choices for beginners.]
- Describe the purpose of HTML tags within source code
- Describe the function of both open tags and closed tags
- Demonstrate how HTML tags affect elements on a webpage
- Tag cards: draw your own with paper/marker or print these tag cards
- Tape, string, or paper clips to make it possible for participants to wear the tags, hands-free
- Music (upbeat!)
- To encourage learners to apply their new knowledge of HTML syntax to real HTML tags, try following this activity with the Source Whisperer activity.
This activity is licensed under the Creative Commons Attribution-ShareAlike License.