Webdesign ohne DIV

Beispiel Design Seite

Auch diese Seite verzichtet auf DIVs, warum auch immer...

Eine Artikelverzeichnis Seite

Ich mag noch immer keine DIV-Suppen

UrlaubsbildAm Freitag habe ich ein Suchmaschinen Optimierung, Marketing Seminar besucht. Dort habe ich erfahren, dass Artikelverzeichnisse immer beliebter werden im Rahmen des sogenannten Linkbuilding.

Der Vortragende vertrat die Meinung, dass Google in erster Linie, dem Quellcode wenig Aufmerksamkeit bietet und zweitens ein, zwei kleine Fehler im Quellcode, eher vom Vorteil sind im Ranking. Weiter haben wir uns über die optimale Struktur eines Artikelverzeichnis, aus Sicht einer Suchmaschine, unterhalten. Übrigens, der richtige Quellcode macht laut SEO Kreisen, circa 30 Prozent einer SEO Tätigkeit aus. Doch zurück zum Artikelverzeichnis. Eine solche, oder so ähnliche Struktur wäre vortheilhaft: Ein H1 Tag relativ am Anfang von body Tag, welches das Suchbegriff enthält. Danach H2 und H3 Tags im Text gespickt mit dem Suchbegriff. Und natürlich ganz viel Text. Der Quellcode sollte solide sein und wenn es geht dann bitte den HTML Anteil so gering wie möglich halten.

HTML Struktur

Am besten nur Inhalt

Nun das HTML Konstrukt dieser SeiteUrlaubsbild 2 verwendet weder DIVs, noch Tabellen, noch Listen um den Inhalt zu strukturieren und zu designen. Es sind lediglich Überschriften (h1, h2, h3), eine Navigationsliste, und ansonsten Paragraphen und hin und wieder mal ein Bild. Es reicht vollkommen die Liste zu positionieren, danach wird es mittels CSS ein Kinderspiel, den Rest anzugleichen. Ich denke über solche Seiten würden sich Google, Yahoo, MSN und all die anderen Suchmaschinen freuen.

Es ist auch eine Kleinigkeit das Design der Seite zwei-spaltig zu gestalten. Auch die Linkliste liese sich zum Beispiel horizontal unter der Hauptüberschrift positionieren. Ein drei-spaltiges Design habe ich noch nicht ausprobiert.

Haben Sie gewusst, dass es möglich ist mit CSS zu zählen?! Leider wird es nicht von allen Browsern unterstützt, zum Beispiel der Internet Explorer versteht diese CSS Anweisung nicht. Die Beta Version des Internet Explorer 7 soll das dann beherrschen, ebenso Tabbed Browsing, usw... Durch das Zählen mit CSS geht es ein Schritt weiter in Richtung Trennung der Inhalte von der Darstellung. Auf diese Zeiten freue ich mich sehr.
Aber diese Zeiten haben wir noch nicht erreicht. Diese Seite ist lediglich ein Experiment. So in etwa stelle ich mir eine Suchmaschinenoptimierte HTML Struktur für ein Artikelverzeichniseintrag. Eventuell sollten die H2 in der Navigationsliste eher H4 sein, aber das ist nur eine Kleinigkeit.
Ein 'heisser Geheimtip' sollen übrigens H3 Überschriften im Footer Tag sein. Vobei ich mir jetzt von der semantischen Seite eines Dokumentes, das nicht so ganz vorstellen kann, was die da zu suchen hätten. Ich verzichte auf die H3 Tags im Footer.

Code

Ohne viel Schnick Schnack

Hier nun der Quellcode dieser Seite. Das CSS stelle ich nicht mehr vor. Es kann jedoch runtergeladen werden. Entweder hier oder im vorgestellten Code an entsprechender Stelle. Auch an dieser Stelle nochmal eine Warnung, diese Seite ist lediglich ein Experiment und für den Alltagseinsatz eher nicht geeignet.
Dieses Code Beispiel kann nicht zur Nachahmung empfohlen werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Webdesign ohne DIV</title>
<meta name="Language" content="de" />
<style type="text/css">
    <!-- @import "screen-inhalt.css";  -->
</style>
</head>
<body>
   <h1><a accesskey="i" href="index.html" name="top">
   <span>Start</span></a><span>Start</span></h1>

   <ul id="sitemap">
        <li>
           <h2>Inhalts&uuml;bersicht</h2>
           <ul>
              <li><a accesskey="a" href="#a">Artikelverzeichnis Seite</a></li>
              <li><a accesskey="b" href="#b">HTML Struktur</a></li>
              <li><a accesskey="c" href="#c">Code</a></li>
              <li><a accesskey="d" href="#c">Projekt</a></li>
           </ul>
        </li>
        <li>
           <h2>Navigation</h2>
           <ul>
              <li><a href="seite-a.html">Seite A</a></li>
              <li><a href="seite-b.html">Seite B</a></li>
              <li><a href="seite-c.html">Seite C</a></li>
           </ul>
        </li>
   </ul>

   <h2>Auch diese Seite verzichtet auf DIVs, warum auch immer...</h2>
   <h3><a name="a">Eine Artikelverzeichnis Seite</a></h3>
   <span>Ich mag noch immer keine DIV-Suppen</span>
   <p> T E X T </p>
   <p> T E X T </p>
   <h3><a name="b">Titel 1</a></h3>
   <span>Beschreibung</span>
   <p> T E X T </p>
   <p> T E X T </p>
   <p> T E X T </p>
   <h3><a name="c">Titel 2</a></h3>
   <p><em>Kursiv</em></p>
   <h3><a name="d">Titel 3</a></h3>
   <p> T E X T </p>

   <p class="contact"><a href="impressum.php">Impressum</a></p>
</body>
</html>

Ein Seitendesign ohne DIV Elemente ist auch sinnlos. DIV Elemente eignen sich hervorragend, vorallem weil sie keine semantische Relevanz besitzen, um eine Webseite optisch in verschiedenen Bereiche zu unterteilen.

Projekt

Über Feedback, Kritik, solange sie konstruktiv und in einem zivilisierten Rahmen vorgetragen wird, freue ich mich selbstverständlich. Und auch hier der Ruf an die Photoshop Junkies, wenn jemand ein besseres Design weiss, immer her damit. Schreiben Sie mir eine E-Mail.

Impressum