KI-HTML schnell lesen & verstehen

Vor dir liegen 300 Zeilen Markup mit Klassen-Ketten an jedem Element. Der Reflex, alles von oben nach unten zu lesen, ist die langsamste Methode. Profis lesen Struktur zuerst und nutzen die DevTools als Röntgengerät. Hier sind die fünf Techniken.

Technik 1 — blende die Klassen mental aus

Beim ersten Durchgang interessieren dich nur Tag-Namen und Verschachtelung — die Klassen sind reines Rauschen. Klick den Schalter und sieh, wie dieselben 14 Zeilen plötzlich eine klare Geschichte erzählen.

<div>                        ← Seiten-Container
  <div>                      ← Kopfzeile (flex)
    <div>Produkte</div>          sollte <h1> sein
    <div onclick>+ Neu</div>     sollte <button> sein
  </div>
  <div>                      ← Karten-Raster (grid)
    <div>                    ← eine Karte
      <img alt="image">          alt ist Platzhalter
      <div>Kamera</div>          Produktname
      <div>129 €</div>           Preis
    </div>
  </div>
</div>

Technik 2 — die DevTools als Röntgengerät

Rechtsklick auf ein Element → „Untersuchen" / „Inspect" (oder F12). Das ist der schnellste Weg vom „was ich sehe" zum „welcher Code es ist":

• Element-Picker (das Pfeil-Icon oben links): auf etwas auf der Seite klicken → springt direkt zur Stelle im DOM-Baum.
• Styles-Panel: zeigt jede Regel, die greift — durchgestrichene sind überschrieben (Spezifität!). Du siehst sofort, wer gewinnt.
• Box-Modell-Diagramm: visualisiert margin/border/ padding mit echten Pixeln — Gold beim Abstands-Debugging.
• Layout-Badges: neben einem Element steht flex oder grid — Klick überlagert die Linien.

Technik 3 — suchen statt scrollen

Du siehst auf der Seite den Text „129 €" und willst zum Code? Im DevTools-Elements-Panel Strg/Cmd + F und den sichtbaren Text eintippen — der Baum springt hin. Genauso im Editor: nie scrollen, immer den Text suchen, den du auf dem Schirm siehst.

Technik 4 — formatieren & einklappen

Minifiziertes oder einzeiliges HTML? Im Editor Format Document (Prettier) macht es lesbar. Dann die Falt-Pfeile nutzen: klappe Blöcke zu, bis nur die oberste Ebene steht — das ist deine Landkarte.

Technik 5 — lass die KI ihren Code erklären

Du darfst zurückfragen. Drei Prompts, die fast immer helfen:

• "Fasse die Struktur dieses HTML in einer kommentierten
   Gliederung zusammen — nur Tags und Bereiche, ohne Klassen."

• "Welche dieser <div>s sind reine Wrapper und könnten weg,
   ohne die Optik zu ändern?"

• "Schreib das mit semantischen Tags (header/main/nav/...) neu,
   ohne das Aussehen zu verändern."