InWissenswertes

Layout mal tabellenlos

Heutzutage gibt es zwei Möglichkeiten eine Webseite zu gestalten. Einmal über Tabellen, oder mit Stylesheets, was oft als tabellenloses Design bezeichnet wird.

Tabellenlayout
Ein übliches Design kann durch Tabellen gestaltet werden, dann ist eine unsichtbare Tabelle dazu da die verschiedenen Elemente einer Webseite zu positionieren.

Beispiel:

<table>

<tr>

<td>logo.jpg</td>

<td>logo leer rechts</td>

</tr>

<tr>

<td> </td><td> </td><tr>

<tr><td>

<table>

<tr> <td>Menü</td>

<td>Inhalt</td>

</tr>

</table>

</td>

</tr>

</table>

Problematisch bei dieser Technik ist, dass oft viele Tabellen verschachtelt werden um das gewünschte Layout zu erhalten, so wird oft gerne eine Webseite von Microsoft zitiert, die über 40 verschachtelte Tabellen hatte, und damit wahrscheinlich mehr Code als Inhalt hatte. Bei zuviel Code ist es leichter möglich invaliden Code zu produzieren. Damit kann der Suchroboter Probleme haben, da er HTML-Code und Textinhalt nicht mehr trennen kann und dann keinen verwertbaren Inhalt hat.

CSS-Layout (tabellenlos)
Seit der Einführung von Stylesheets (CSS) ist es aber möglich die Elemente spezifisch zu positionieren.

Beispiel:

<div id="logo">logo.jpg</div>

<div id="menu">Menü</div>

<div id="inhalt">Inhalt</div>

Durch den viel geringeren Code im HTML-Bereich ist es für eine Suchmaschine ein leichtes nur noch den gesuchten Inhalt zu finden, dadurch spart die Suchmaschine Zeit beim auslesen und berechnen des Inhalts.

Die Programmierung eines Tabellenlosen Layouts hat nicht nur Vorteile für Suchmaschinen sondern:

  • bereiten erst den Weg für ein barrierefreies Internet
  • sind übersichtlich für den Programmier
  • durch die klare Trennung von  Design und Inhalt ist es ein leichtes das Layout zu wechseln ohne den eigentlichen Inhalt zu verändern
  • die Seiten laden schneller durch den geringeren Code

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *