HTML-Markup verschlanken
Freitag, 30. Januar 2009Hier ein kleiner Tipp, wie man sein HTML-Dokument verschlanken kann.
Ein mit mehreren Klassen ausgezeichnetes Dokument wie dieses Beispiel:
<div class="linkercontainer"> <h1 class="headlinelinks">Überschrift</h1> <h2 class="subheadlinelinks">Einleitende Überschrift</h2> <p class="linkertext">Fliesstext</p></div><div class="rechtercontainer"> <h1 class="headlinerechts">Überschrift</h1> <h2 class="subheadlinerechts">Einleitende Überschrift</h2> <p class="rechtertext">Fliesstext</p></div>
… läßt sich durch die Vergabe von IDs (funktioniert auch mit Klassen) verschlanken:
<div id="linkercontainer"> <h1>Überschrift</h1> <h2>Einleitende Überschrift</h2> <p>Fliesstext</p></div><div id="rechtercontainer"> <h1>Überschrift</h1> <h2>Einleitende Überschrift</h2> <p>Fliesstext</p></div>
Durch diese Diät wird das Dokument gleich viel schlanker und übersichtlicher; streckenweise kann man die Dateigröße eines Dokuments gut und gern um die Hälfte reduzieren — je nach Umfang.
In der CSS-Datei kann man nun auch ohne Klasse z.B. die Headline <h2> innerhalb des linken Containers gezielt ansprechen:
#linkercontainer h2 {color: red;}
Richtig nett wird es, wenn man <body>-IDs vergibt, um den aktiven Button einer Liste automatisch hervorzuheben. Eine Klasse wie z.B. „selected“ kann man sich in diesem Beispiel sparen:
<body id="home"><ul> <li id="homebtn"><a href="index.php" title="Home">Home</a></li> <li id="aboutbtn"><a href="about.php" title="About">About</a></li> <li id="fotosbtn"><a href="fotos.php" title="Fotos">Fotos</a></li></ul>
In der CSS-Datei sieht das Ganze dann so aus:
a:link {color: white;}#home #homebtn a,
#about #aboutbtn a,
#fotos #fotosbtn a {color: red;}
Wird nun beispielsweise die Seite „Fotos“ mit der <body>-ID „fotos“ aufgerufen, bekommt der Button mit der ID „fotosbtn“ die Schriftfarbe „Rot“ zugewiesen.
Dieses Beispiel ist in Kombination mit PHP sehr praktisch, wenn man die Navigation mit „include“ in eine Seite einbindet. Änderungen an der Navigation gehen so zügig von der Hand.
Falls sich Fehler eingeschlichen haben sollten, bitte ich um Nachsicht und Nachricht — danke.
Feed abonnieren