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