Wir sind bei Wingmen ja durchaus für unsere Spiele bekannt. Auf unser Brettspiel „Och Menno! GUUHGL“ werden wir immer wieder angesprochen, und auch unser Kartenspiel „403 Forbidden“ erfreute sich auf der letzten SMX München großer Beliebtheit. (Übrigens: Wer dieses Jahr noch am Überlegen ist, erhält über den Gutscheincode wingmen_smx26 15% Rabatt).
Letztes Jahr hat es mich dann gereizt, das Ganze ins Digitale zu verlagern, um das Schöne mit dem Praktischen zu verbinden. Denn spielerisch lernt es sich bekanntlich am besten und warum sollten HTML-Grundlagen immer nur trockene Theorie sein? Die konkrete Spielidee kam dann ganz analog am Familientisch: Wir haben zu der Zeit die Kniffel-Variante „Knister“ rauf und runtergespielt. Da dachte ich mir: Das muss doch auch mit HTML-Tags funktionieren.
GlĂĽck, Strategie und HTML-Wissen
Herausgekommen ist das <html> GAME. Das Prinzip ist einfach, aber knifflig: Du bekommst per Zufall ein HTML-Element angezeigt (z. B. eine <h1>, ein <a> oder ein <meta name="description">). Deine Aufgabe ist es, dieses Element clever in einem 5x5-Feld zu platzieren.
Dabei brauchst Du genau drei Dinge, um einen Highscore zu erzielen:
- GlĂĽck: Welche Tags Dir der Zufall anbietet, liegt nicht in Deiner Hand.
- Strategie: Wo platzierst Du das Element, um Dir spätere Wege nicht zu verbauen? Kleiner Pro-Tipp: Achte auf die Diagonalen – hier zählen die Punkte doppelt!
- HTML-Knowhow: Du musst die Regeln eines sauberen HTML-Dokuments verinnerlicht haben.
Spiel-Logik vs. Wahres Leben
Im echten Leben spielen die Reihenfolge und die Verschachtelung im Quellcode eine entscheidende Rolle. Im Spiel sind wir etwas freier: Hier gibt es keine strikte Leserichtung von oben nach unten. Du kannst Punkte in Zeilen, Spalten und eben diagonal sammeln. Das Spielfeld repräsentiert Deine Website, bestehend aus unterschiedlichen Landingpages.
Trotzdem gelten die SEO-Regeln, die wir alle kennen:
- Die Dokumentenkontur: Eine logische Struktur hilft Usern und Bots, den Inhalt besser zu erfassen. Eine
<h1>ist Pflicht, darf aber (wie in der Realität) nur einmal pro Reihe, Spalte oder bei den beiden Diagonalen vorkommen. Für den Highscore lohnt sich zudem eine saubere Abfolge mit<h2>und<h3>– das bringt Dich zum Status „Heading Hero“. - Hubs, Full House & „Being Bold“: Schwerpunkte setzen lohnt sich. Im Spiel bedeutet das: Sammle gleiche Tags wie
<a>(Links),<p>(Content) oder<b>(Bold) in einer Reihe. Je mehr gleiche Elemente, desto höher die Punktzahl – bis hin zum „Full House“. - Der HTML-Guru: Das ist die Königsdisziplin im Spiel. Um hier voll abzuräumen, musst Du alle Pflichtfelder eines validen Dokuments in einer 5er-Reihe unterbringen:
<html>,<head>,<title>und<body>. - Das perfekte Snippet: Ein valides Dokument ist gut, ein klickstarkes Snippet ist besser. Wenn Du zur oben genannten Reihe noch eine
<meta name="description">hinzufügst, erhältst Du die maximale Punktzahl.
Probier es einfach aus
Bist Du nur ein „Tag-Trainee“ oder schaffst Du es zum „Markup-Meister“? Das Spiel läuft direkt im Browser, ohne Anmeldung.
👉 Hier geht es zum HTML-Game
Viel Erfolg beim Tags-Schubsen! Und wenn Du einen richtig hohen Score knackst: Mach gerne einen Screenshot und schick ihn mir per Mail oder poste ihn auf LinkedIn (und tagge Wingmen). Wir sind gespannt, wer den Highscore erreicht...