Einführung in HTML – Semantik eines (X)HTML Dokuments

Warum eine korrekte Semantik?

Der wohl größte Vorteil ist die Suchmaschienenoptimierung. Suchmaschienen erkennen zum Beispiel Überschriften anhand von h-Tags und können dementsprechend den folgenden Text als Wichtig gewichten. Desweiteren können sich Blinde Menschen durch sogenannte Screenreader Überschriften und Sonstige Elemente vorlesen lassen um sich besser zurecht zu finden. Ein großes Problem stellt hierbei unter anderem der massige Einsatz und Missbrauch von Tabellen dar, wie es zim Beispiel auch das wBB tut. Der eigentlich Zweck von Tabellen ist, linear darstellbare Daten wie zum Beispiel Statistiken zu zeigen. Diese Eigenschaft wird allerdings oft überschritten, sodass es ganze Seitenlayouts nur auf Tabellen Basis gibt. Hierbei kommt es zu Problemen hinsichtlich der Barrierefreiheit der entsprechenden Seite und zur Beudeutungslosigkeit der Quellcodes. Gute und semantisch korrekte Websites weisen einen sehr strukturierten Code auf, welcher sich ohne Probleme nachvollziehen lässt. Die weiteren Vorteile liegen dabei auf der Hand. Schlankere und bessere Quellcodes lassen die Seite schneller Laden, daher muss man bei allen HTML Elementen auf ihre Bedeutung achten. Daher geht der Trend hin zu div und span Tags, welche aber falsch und unkorrekt eingesetzt werden. Werden diese einfach nur so zusammengeschustert um die Seite eingezeigt zu bekommen, kann man auch direkt wieder auf Tabellen umsteigen. Auch wenn der XHTML Validator sagt, dass alles korrekt ist und die Leute sich damit auszeichnen ist es grundlegend falsch. Im folgenden wird eine Beispiel Datei für eine semantisch korrekte Weibsite vorgelegt.

Praxisbeispiel

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>

<title>Test</title>

<link rel="stylesheet" type="text/css" href="cssdateiname.css" title="Layout" />

</head>

<body>

<div>Hier könnte ein Logo bpsw. hin.</div>

<h1>DIE Ãœberschrift. Seitenname etc.</h1>

<ul>

<li><a href="http://www.dynamic-vision.com/v2/#">Navi</a></li>

<li><a href="http://www.dynamic-vision.com/v2/#">Navi 2</a></li>

</ul>

<div>Der Inhalt der Website, sprich der Content.

<h2>Eine untergeordnete Ãœberschrift</h2>

<p>Textabsatz.</p>

<p>Textabsatz.</p>

</div>

</body>

</html>

So sieht man z.B, dass man keine span Tags für die Texte braucht. Keine classe, für die span Tags, für Überschriften, definieren muss. Und man muss die Definitionslisten auch nicht für eine Einrückung der Textinhalte missbrauchen.

Am: 1. Oktober 2006 in Generell geschrieben von Benedikt.




 3 Leserbriefe

  1. » Shortview vs. Studivz » DeadPixel – Portfolio und Weblog von Moritz Gießmann schrieb:

    […] …läuft ein 1a klappriges uralt-Tabellenlayout ohne jegliche Semantik. Alles ist mit Tabellen strukturiert und es sind weder “h1″ – “h6″ zu finden noch irgend ein “em”, “p”, “strong” oder sonst ein semantisches Element. Wo mein Eindruck bis jetzt ganz gut war, ist das Portal bei dieser Disziplin gnadenlos durchgefallen, aber das kann man ja noch nachbessern. Eigentlich sollte man doch wissen, dass ein Tabellenlayout böse ist! Auch bei der Semantik sollte man schon wegen SEO gründen nicht sparen, wo es doch so einfach ist semantisch korrekten Code zu schreiben. […]

  2. 10 goldene Regeln des modernen Webdesigns « Centr // Freies Denken. Mein Blog. schrieb:

    […] 6 Setze <fieldset> und <legend> ein Diese beiden HTML Tags vergisst man gerne. Fasse thematisch in Beziehung stehende Elemente mit <fieldset> und <legend> zusammen um dem Benutzer das Verstehen und Ausfüllen eines Formulars zu erleichtern. Achte auf die Semantik. […]

  3. Layout bei IE fehlerhaft – html.de Forum – HTML f�r Anf�nger & Fortgeschrittene schrieb:

    […] Probleme definiert, Lösungen angeboten Best Viewed with / Optimiert für … Webdesign und Usability Einführung in HTML – Semantik eines (X)HTML Dokuments | Schweizer Glücksspielexperten __________________ Gruß, Tar Bitte beachte: Der obige Text stellt meine Meinung dar. Beim […]

 Hinterlasse einen Kommentar