Unsichtbare Tags
Neben dem <html>,<head> und <body>-Tag gibt es weiter, zunächst unsichtbare Tags,
schaut man sich jedoch große webseiten an bestehen diese zu 80% aus eben solchen Tags.
Der <div> Tag
Div-Tags “The Content Division element” (deutsch: “Das Inhalt aufteilende Element”) und andere der Art gehören zu den Strukturierungs-Tags. Man kann sie sich als zunächst verstecke boxen vostellen ind die man dann andere Boxen mit Inhalt - oder weitere solcher Boxen - hineintun kann. Sowas sieht dan z.B. so aus:
Beispiel ohne CSS
<div>
<div>
<h1>Produktname</h1>
<h3>Hey Kauf dir das!</h3>
<a href="/buy">Jetzt Geld verlieren!</a>
</div>
<p>Das Produkt ist super, echt genial, wieso lesen sie das? Kaufen sie!</p>
</div>
Das sieht dann so aus:
Das Produkt ist super, echt genial, wieso lesen sie das? Kaufen sie!
Frage ist jetzt: Wieso macht man sich die mühe da <div> Tags drum zu machen? Nun das ist wo CSS wieder relevant wird,
mit CSS kann ich die Boxen nämlich “umstylen”.
Mit CSS
<div style="background:#121214;color:#fff;padding:10px">
<div style="padding:10px;background:#525252">
<h1>Produktname</h1>
<h3>Hey Kauf dir das!</h3>
<a href="/buy" style="color:#fff">Jetzt Geld verlieren!</a>
</div>
<p>Das Produkt ist super, echt genial, wieso lesen sie das? Kaufen sie!</p>
</div>
Das sieht dann so aus:
Das Produkt ist super, echt genial, wieso lesen sie das? Kaufen sie!
Das macht doch schon mehr Sinn! Der Trick ist das man die Boxen an sich ja auch noch nutzen kann, z.B. um Kontraste sichtbar zu machen oder um damit z.B. Layout-Systeme zu ändern (dazu aber später mehr).