Webdesign

World Wide Web

Andreas Blomenhofer

HTML und XHTML

HTML

ist eine Abkürzung und steht für „Hypertext Markup Language“. Diese Auszeichnungssprache für Webseiten, bildet die Struktur via Textform. HTML bildet das Gerüst einer Webseite, das mit Inhalte gefüllt wird.

Man kann sich das vorstellen, wie eine Form zum Kuchen backen, die man mit Teig und Früchten befüllt. Der Teig entspricht in diesem Vergleich die Texte, Listen und Bilder einer Webseite. HTML ist also die Karosserie einer Internetseite. Die Hypertext-Auszeichnungssprache ist der technische Sprachstandard im Internet und sagt einem Webbrowser, wie die Internetseite dargestellt werden soll.

XHTML

bedeutet ausgeschrieben „Extensible Hypertext Markup Language“. Es bedeutet soviel wie „Erweitertes HTML“ und ist ebenfalls ein neuerer Internetstandard des World Wide Web Consortiums. Anders als bei HTML, deren Grundsprache auf SGML (Vernormte Auszeichnungssprache) basiert, fordert XHTML kompatiblere Syntaxregeln die auf XML basieren.

Das HTML bzw. XHTML Gerüst einer Internetseite

Die HTML-Struktur

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Die XHTML-Struktur

<!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" xml:lang="de" lang="de">
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Nun wir wollen uns einfach mal Step by Step von oben nach unten abarbeiten, was dieser Scriptbaum auszusagen hat.

1. Die sprachliche Dokumenten-Deklaration

Der Dokumententyp <!DOCTYPE html…> gibt dem Webbrowser eine Regel vor, wie ein HTML- bzw. XHTML-Dokument zu verstehen ist, worauf sich der Webbrowser auf die Kommunikationsebene einstellt.

Wie bei einem Land, dass sich über mehrere Jahre entwickelt hat, haben sich verschiedene Arten von Dialekte gebildet. Genauso ist es mit HTML und XHTML in World Wide Web.

Es gibt mehrere Varianten des Doctypes, wie ein Webbrowser mit einer XHTML-Datei umgehen soll. Da ich nur mit XHTML arbeite werde ich diese Richtung erläutern.

XHTML-Methode „Strict“

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Die Strict-Variante schließt veraltete HTML-Elemente aus dem Standard aus, die nicht mehr verwendet werden oder aus der Mode sind. Diese Methode der HTML-Deklaration ist eine strengere Form in der Entwicklung, da das Ziel der Strict-Variante ist, die eigentliche Formatierung via CSS (Cascading Style Sheets) zu erzwingen.

Zudem fordert diese Variante, dass die Webseiten-Inhalte in einer ordnungsgemäßen und standardisierten Reihenfolge aufgebaut werden und duldet keine Toleranz für Abweichungen.

Mit der Strict Methode ist es daher die sauberste Methode eine ordentliche XHTML-Entwicklung zu realisieren. Ich verwende nur diese Deklaration des Dokumententyps, um eine wirklich saubere Webseitenentwicklung zu gewährleisten.

XHTML-Methode „Transitional“

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Diese Art des Dokumententyps ist toleranter gegenüber der Strict-Variante.
Wenn man keinen Ausweg hat, die Strict-Methode einzuhalten, ist diese Form eine Alternative, wenn aber auch eine notdürftige.

Transitional ist flexibler in der Entwicklung, aber es kann keine dauerhafte Gewährleitung garantiert werden.

Ich verwende diese Art nicht, weil wenn bestimmte HTML-Elemente ausgedient haben und Webbrowser einen neuen HTML bzw. XHTML-Standard verfolgen, entsteht schneller in der Zukunft, Darstellungsfehler in der Webseite. Mit der Strict-Variante ist dieses Problem einzudämmen. Also meine Meinung ist, nur mit der sauberen Strict-Methode zu arbeiten und die Webseiteninhalte sauber mit CSS zu formatieren.

2. Der Kopfbereich einer Webseite

Zwischen dem Bereich <head>…</head> werden Kopfdaten-Informationen hinterlegt. Wie bei einem Gehirn wird das Gedächtnis einer Webseite mit <meta>-Informationen gefüllt, die den Suchmaschinen sagen sollen, wie sich der Inhalt aufbaut, und sich der Inhalt beschreibt. Diese Informationen werden auf der Webseite selbst nicht angezeigt.

Für die Webserver beispielsweise sagen zzgl. die <link>-Informationen, wo sich eine CSS oder JavaScript-Datei auf dem Webserver befindet, um diese mit in den Ablauf einzubinden.

Hier ein Beispiel

<!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" xml:lang="de" lang="de">
  <head>
    <title>Der Titel einer Webseite</title>
    <meta name="keywords" content="relevante suchbegriffe, durch, komma, getrennt" />
    <meta name="description" content="Webseiten-Kurzbeschreibung mit ca. 150 bis 165 Zeichen" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="http://www.domain.de/datei.css" media="screen" />
    <!-- Weitere Meta-Informationen -->
  </head>
  <body>
    <!-- Hier der eigentliche Webseiteninhalt -->
  </body>
</html>

3. Der Körper einer Webseite

Der Webseitenkörper der zwischen <body>…</body> ausgezeichnet wird, enthät die sichtbaren Bereiche des Webseitenaufbaus, sowie die Textinhalte und Bilder.
Hier werden die HTML bzw. XHTML-Befehle intigriert.

Man spricht von sogenannten HTML-TAGs. Es gibt TAG-Paare die aus einem Start- und End-TAG bestehen. Es gibt aber auch Standalone-TAGs, wie das Image-Tag, mit dem Sie ein Bild in eine Webseite einfügen können.

TAG-Paare und Standalone-TAGs in XHTML

TAG-Paare:

<h1>Überschrift</h1>
<a href="http://www.webdesign-www.de"
title="professionelles Webdesign">Webdesign</a>
<p>Textinhalt</p>

Das Start-TAG wird mit einem „<“ eingeleitet, gefolgt von dem Befehls-Kürzel, wie z.B. „p“ (für Text-Absatz) und geschlossen mit einem „>“.

Nach diesem Starttag folgt der Textinhalt, der auf die Webseite eingebaut werden soll.

Anschließend wird das End-TAG eingeleitet das zzgl. dem Start-TAG nach dem „<“ ein „/“ mit eingefügt wird. So werden Start- und End-TAGs in HTML und XHTML unterschieden.

Standalone-Tag:

<img src="pfad/zum/bild.jpg" alt="Bildbeschreibung" />

Dieses Standalone-TAG wird nur einem „<“ eingeleitet. Dazwischen folgen die dazugehörigen Attribute und Werte. Geschlossen wird dieses Standalone-TAG in XHTML mit „/>“.

XHTML-Beispiel mit Inhalt im <body>…</body>-TAG

<!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" xml:lang="de" lang="de">
  <head>
    <title>Professionelles Webdesign - Webdesign World Wide Web</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="de" />
  </head>
  <body>
    <h1>Professionelles Webdesign</h1>
    <div>
      <img src="http://www.webdesign-www.de/files/kommunikationsdesigner-muenchen-logo-imp.jpg"
      alt="professionelles Webdesign" />
    </div>
    <p>Dieser Webdesign Anbieter bietet <a href="http://www.webdesign-www.de"
    title="professionelles Webdesign">professionelles Webdesign</a>.</p>
  </body>
</html>

Dieses Beispiel ist aber auch nur bedingt richtig, dennoch valide verwendbar, wenn man nur mit HTML arbeitet. Hierfür kann man <meta http-equiv=“content-type“ content=“text/html; charset=utf-8″ /> verwenden. Absolut korrekt wäre bei die Meta-Angabe <meta http-equiv=“Content-Type“ content=“application/xhtml+xml; charset=utf-8″ />, nur der Internet Explorer unterstützt diese Form nicht.

Deshalb wäre eine optimale Unterstützung mit PHP sehr ratsam, das wie folgt aussieht:

<?php
  $header_content_type = (strpos($_SERVER['HTTP_ACCEPT'],
  'application/xhtml+xml')!==false) ? 'application/xhtml+xml' : 'text/html';
  header('Content-Type: '.$header_content_type.'; charset=UTF-8');
?>

Schlusswort zu HTML und XHTML

Ich freue mich immer über Vorschläge für Verbesserungen, wenn etwas nicht verstanden wurde oder über Mitteilungen, wenn sich Fehler eingeschlichen haben, die ich folglich korrigieren kann.

Vielen Dank!

Andreas Blomenhofer

Hinterlasse eine Antwort