Quick Diät für den Quelltext -div Suppen vermeiden – Dein Beitrag zum Klimawandel

Quellcode aufräumen

Viele verwenden sehr oft Divs, um einzelne Teile einer html Seite zu gestalten.

Dies ist sehr oft unnötig, denn die Hierarchie der einzelnen Angaben (Elemente, tags) hilft zu gestalten ohne Div-Suppe.

Ein Quellcode, der so schlank wie möglich ist, spart Traffic. Traffic kostet nicht nur Geld, sondern vor allem Energie: Strom– Stromerzeugung schädigt derzeit noch unser Kima.

Deshalb ist ein schlanker – aufgeräumter – Quellcode Dein Beitrag zum Klimaschutz!

Beispiel eines aufgeblähten Quellcodes


<div id="content">
    <div class="ueberschrift">
        <h1>Ich bin die &#220;berschrift.
          </h1>
    </div><!--class ueberschrift end-->

      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
          
          <div class="meta">
              <p>Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
            </div><!--class meta end-->
        </div><!--class post end-->
        
</div><!--id content end-->

Hier kann man sich 2 div einsparen

div class ueberschrift und div meta

Man braucht sich nur laut vorzusagen was man machen möchte und dies dann in der Style.css, der Cascading StyleSheet Datei hineinschreiben:

Ich möchte die Überschrift unter der id content blau.
Keine andere Überschrift, nur die unter der id content. Das geht so:


#content h1{ color:blue;}

So bringt man das div class meta weg.

Ich möchte die p mit den Meta Angaben rot und am rechten Rand stehen haben.

.meta{color:red; text-align:right;}

Jetzt wirst Du sagen, das habe ich vorher auch in der style.css drin stehen gehabt. 😉

Möglich, aber das div ist unnötig.

Schlank und rank sieht das HTML jetzt so aus.



<div id="content">
    
        <h1>Ich bin die Überschrift.
          </h1>
    

      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
          
          
              <p class="meta">Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
           
        </div><!--class post end-->
        
</div><!--id content end-->

Bei Fragen einfach einen Kommentar schreiben. Gern helfe ich.

Ich freue mich über einen Social Bookmark und übers Weitersagen, mts

Ebenfalls informativ und lesenswert

8 Kommentare zu “Quick Diät für den Quelltext -div Suppen vermeiden – Dein Beitrag zum Klimawandel

  1. Henry

    naja, die richtige div-suppe war das ja nicht. da bekomm ich bei manch anderen seiten schon eher „einen dicken hals“, wenn ich den quelltext analysieren möchte ^^

  2. mts

    Henry ja

    doch – um das System der div Suppen aufzuzeigen reicht es allemal-hoffe ich :zwinker:

    hmm ich kann auf Deiner Website kaum navigieren – zig Links führen ins Leere – ist mir nur jetzt aufgefallen

    lg

  3. chio

    Jössas…..
    Ich will gar nicht nachzählen, wieviele Bytes ich mir (und anderen) da einspare. Unterm Strich: 0.5 Promille? Wenn der Server so schnell liefern kann wie ich empfangen – eine hundertstel Sekunde?
    Das könnte ich zB. auch beim Lesen von überflüssigen Inhalten sparen: Nicht albern sein; der Flaschenhals liegt ganz woanders. Hier nicht.

  4. mts

    Der Vergleich hat mindestens genausoviel Berechtigung wie der Vergleich mit der Google Suche – nur Zweiteres wird irgendwann dazu herangezogen, die Preise fürs Surfen mit einer Steuer zu belegen, wo dann wieder niemand weiß was damit geschieht. Der Flaschenhals ist demnach nicht wirklich anders.

    lg

  5. Mark

    Da gebe ich dir Recht. Man sollte zumindest über das Thema nachdenken! Bei meinen Seiten gibt es auch noch viel zu tun 🙂 Liebe Grüße, Mark

  6. Paul

    ich mag diese Website (habe schon einiges Nützliches hier gefunden). Auch dieser Artikel ist durchaus interessant, aber die Argumentation mit dem Klimawandel rückt ihn doch in die Nähe der Rubrik „Kurioses“

  7. Rolf

    Danke. Habe herzlich gelacht.
    Ich hoffe meine Webseite trägt etwas zum Klimaschutz bei. Falls dem so ist werde ich mir einen entsprechenen Kleber aufs Auto pappen. Lol.

    Aber ernsthaft, leider ist es so, dass ich mit Frontpage und CSS arbeite und von HTML nur soviel verstehe als das ich darin einen Fehler finden und beheben un eventuell Aenderungen anbringen kann – selbst schreiben ist Fehlanzeige.

    Das heisst, ich kann leider au diesem Wege nur bescheiden zum Klimaschutz beitragen.