Mozilla: Learning and Teaching Web Literacy


Tag Tag Revolution

Made by MOUSE and remixed by Mozilla and the National Writing Project

Learners will choreograph a dance party with tag cards, learning code and participation.

20 minutes

  • Preparation

    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.

  • 5
    min

    Introduction

    An image of a group of people gathered to do this activity outside
    Image credit: MOUSE_org

    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. "View Source" is usually under the "View" or "Tools" tab of a browser's menu. 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.

  • 10
    min

    Getting Started

    Explain to participants that they are about to have a fun dance competition to show them how HTML tags work. To get things started,

    1. Arrange the players into a circle, making sure there is enough room to walk around the outside of the circle.

    2. 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>.

    3. 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.

    4. When you stop the music, the Coders attach the tags to the members of the circle they are standing closest to.

    5. 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.
    6. Now select 2 new tags and hand them to the Coders (for instance <sing> and </sing>).

    7. Repeat steps 3 & 4. This time, when the Coders hand over the tags, anyone who is between the <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.

    8. 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.

    9. 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.

  • 5
    min

    Following Up (Optional)

    Ask learners to choose any website and “view source” to look for tags and guess what each tag does.

    NOTE: some websites, like Google or Facebook have more complicated code and not enough simple HTML to explore. News sites, wikipedia, blogs, YouTube, and company or organization websites are better choices for beginners.

    Reflect on the activity with participants in a short discussion using guiding questions like this:

    • What was it like to play this game?
    • What did you do when you were not between the open and closed tags?
    • What happened when you were between 2 different tags?