Kopfdaten und Meta

Kopfdaten und Meta

Farbe für den Hintergrund

Sie können eine Farbe für den Hintergrund des Anzeigefensters bestimmen. Die gesamte HTML-Datei wird auf dieser Hintergrundfarbe angezeigt.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body bgcolor="#CCFFFF">  <h1>Text, Verweise, Grafikreferenzen usw.</h1>  </body>  </html>  

Info Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut bgcolor= bestimmen Sie die Farbe für den Bildschirmhintergrund (bgcolor = background color = Hintergrundfarbe). Die gesamte HTML-Datei wird auf der hier definierten Hintergrundfabe angezeigt. Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML. Das Attribut bgcolor= ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. so:

<body style="background-color:#CCFFFF">  

Info Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, müssen Sie die Hintergrundfarbe in jeder HTML-Datei neu definieren. Natürlich können Sie auch fur jede HTML-Datei andere Farben definieren. Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende (kontrastierende) Textvordergrundfarben definieren.

Farben für Text und Verweise

Sie können dateiweite Farben definieren:

  • für Text (gültig für alle Elemente wie überschriften, normalen Fließtext, Listen usw.),
  • für Verweise zu noch nicht besuchten Stellen,
  • fur Verweise zu bereits besuchten Stellen,
  • für Verweise, während sie angeklickt werden.
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body bgcolor="#663333" text="#FFCC99" link="#FF9966" vlink="#FF9900" alink="#FFFFFF">  <h1>Text</h1>  <a href="http://de.yahoo.com/"<Verweis zu Yahoo</a>  </body>  </html>  

Info Die Angaben erfolgen im einleitenden <body>-Tag der HTML-Datei. Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML.

  • Mit text= definieren Sie eine Farbe für den Text.
  • Mit link= definieren Sie eine Farbe fur Verweise zu noch nicht besuchten Dateien (link = Verweis).
  • Mit vIink= definieren Sie eine Farbe ftir Verweise zu bereits besuchten Dateien (alink = visited link = besuchter Verweis).
  • Mit alink= definieren Sie eine Farbe für Verweise, die der Anwender gerade anklickt (alink = activated link = aktivierter Verweis).

Alle diese Attribute sind als deprecated eingestuft und sollen künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. im Dateikopf zwischen <head> und </head> mit dem folgenden Quelltext:

<style type="text/css">  body {  background-color:#663333; color:#FFCC99;  }  a:link {  color:#FF9966;  }  a:visited {  color:#FF9900;  }  a:active {  color:#FFFFFF;  }  </style>  

Info Die definierten Textvordergrundfarben sollten mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben wählen (z.B. Weiß, Gelb, Hellgrün und Hellblau).

Weitere Möglichkeiten

Bei Verwendung von Stylesheets lesen Sie zunächst in Kapitel wie man CSS-Formate definiert. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: background-color, color, Pseudoklassen für Verweise. Das <body>-Tag kann auch Universalattribute enthalten.

Hintergrundbild (Wallpaper)

Sie können für die Anzeige einer HTML-Datei ein Hintergrundbild bestimmen. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, sodass ein Tapeteneffekt (Wallpaper) entsteht. Besonders geeignet fur Wallpaper-Effekte sind relativ kleine Grafiken, die irgendein abstraktes Muster darstellen. Typische Beispiele finden Sie im Kapitel über Grafiken im Wallpapers (Hintergrundbilder). Die Hintergrundgrafik sollte als Grafikdatei im GIF-Format oder JPEG-Format vorliegen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body background="background.jpg" text="#990000" link="#0D00CC" vlink="#000066" alink="#0D0000">  <h1>Text</h1>  <a href="http://www.yahoo.de/"><b>Verweis zu Yahoo</b></a>  </body>  </html>  

Info Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut background= bestimmen Sie eine Grafikdatei als Hintergrundbild (background = Hintergrund). Die gesamte HTML-Datei wird auf dem hier definierten Hintergrundbild angezeigt. Das Attribut background= ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. so:

<body style="background-image:url (/background.jpg)">  

Info Bei der Adressierung des Hintergrundbildes gelten die Regeln zum Referenzieren in HTML. Das Hintergrundbild gilt jeweils fur die HTML-Datei, in der es definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll, müssen Sie die Angabe in jeder HTML-Datei wiederholen. Wenn Sie ein Hintergrundbild definieren, sollten Sie auch passende Farben fur Text und Verweise definieren. Verwenden Sie bei textorientierten WWW-Seiten unauffällige Hintergrundbilder, bei denen die Lesbarkeit des Textes nicht leidet. Auffällige Hintergrundfarben sollten Sie nur verwenden, wenn die gesamte WWW-Seite grafisch aufgebaut ist und wenn die Grafiken im Vordergrund zu dem auffälligen Hintergrund passen. Netscape ab Version 4.x und MS Internet Explorer ab Version 4.x interpretieren auch animierte GlF-Grafiken als Hintergrundbilder. Der Internet Explorer kennt ein zusätzliches Attribut bgproperties="fixed" im einleitenden (body)-Tag, mit dem Sie ein unbewegliches Hintergrundbild erzeugen können. Dieses Attribut gehörte jedoch nie zum HTML-Standard und lässt sich auch durch eine CSS-Angabe ersetzen, z.B. so:

<body style="background-image:url (/background.jpg); background-attachment:fixed;">  

Weitere Möglichkeiten

Bei Verwendung von Stylesheets lesen Sie zunächst wie man CSS-Formate definiert. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: background-image, background-repeat, background-attachment, background-position, background, color, Pseudoklassen für Verweise.

Seitenränder definieren

Bitte benutzen Sie die hier beschriebenen HTML-Attribute nur in begründeten Ausnahmefällen – sie werden hier nur der Vollständigkeit halber erwähnt. Diese Attribute gehörten nie zum HTML-Standard und sind ein typisches Beispiel dafur, welcher Wirrwarr entsteht, wenn Browser ihr eigenes Süppchen kochen. Internet Explorer+Netscape. Benutzen Sie auf jeden Fall Stylesheets zum Definieren von Seitenrändern.

<html>  <head>  <title>Text des Titels</title>  </head>  <body marginwidth="50" marginheight="100" topmargin="100" leftmargin="50">  <h1>Text</h1>  viel Text usw.  </body>  </html>  

Info Die Angabe für Seitenränder erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit leftmargin= bestimmen Sie den Abstand zwischen linkem bzw. rechtem Fensterrand und Inhalt der Datei (leftmargin = linker Rand). Mit topmargin= bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Inhalt der Datei (topmargin = oberer Rand). Mit marginwidth= und marginheight= bestimmen Sie die entsprechenden Abstände. Alle Angaben erfolgen in Pixeln. Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere. Die definierten Seitenränder gelten jeweils für die HTML-Datei, in der sie definiert werden. Wenn Sie ein Projekt aus mehreren HTML-Dateien erstellen, das einheitliche Seitenränder haben soll, müssen Sie die Seitenränder in jeder HTML-Datei neu definieren. Natürlich können Sie auch fur alle Dateien unterschiedliche Seitenränder definieren.

Seitenränder mit Stylesheets

Hier noch ein Beispiel, wie Sie die gleichen Seitenränder von Stylesheets erreichen können:

<head>  <style type="text/css">   body {  margin-left: 50px;  margin-right: 50px;  margin-top: 100px;  margin-bottom: 100px  }  </style>  </head>  

Info Mit den obigen Angaben im HTML-Dateikopf erreichen Sie die gleiche Wirkung. Diese Angaben werden von Netscape seit Version 4.0 und vom Internet Explorer seit Version 3.0 interpretiert. Außerdem sind diese Angaben vom W3-Konsortium standardisiert.

Hintergrundmusik

Sie können bestimmen, dass beim Aufruf einer HTML-Datei eine Hintergrundmusik ertönt. Dazu gibt es zwei Lösungen. Beide der im folgenden beschriebenen Lösungen – die eine für Internet Explorer, die andere für Netscape – sind proprietär. Dazu kommt, dass Netscape 4.x in einigen Zwischenversionen dabei versagt. Beide Lösungen gehören nicht zum HTML-Standard. Ferner sollten Sie sich beim Wunsch, Hintergrundmusik einzubinden, darüber im Klaren sein, dass die Mehrzahl der Anwender im Web genervt ist von dem Gedudel und sehr schnell wieder aus solchen Seiten verschwindet.

<html>  <head>  <title>Text des Titels</title>  <!-- Microsoft: -->  <bgsound src="background.mid" loop="infinite">  </head>  <body>  <!-- Netscape:  -->  <embed src="background.mid" autostart="true" loop="true" hidden="true" height="0" widht="0">  <h1>Inhalt der Seite</h1>  </body>  </html>  

Info Mit <bgsound ...> definieren Sie im Kopf einer HTML-Datei eine Hintergrundmusik nach Microsoft-Syntax für die Anzeige der Datei (bgsound = background sound = Hintergrundmusik). Mit <embed . . . > erreichen Sie das Gleiche für Netscape (embed= einbetten). Hinter der Angabe src= folgt in beiden Fällen die Angabe der gewünschten Musikdatei (src = source = Quelle). Es sollte sich möglichst um Dateien der Typen MID, AU oder WAV handeln. Um eine sichtbare Anzeige des Abspiel-Players zu unterdrücken, sind bei der Netscape-Syntax die Angaben hidden="true" height="0" width="0" erforderlich (width = Breite, height = Höhe, hidden = versteckt). Auch den automatischen Start des Abspielvorgangs müssen Sie in der Netscape-Syntax explizit angeben – durch autostart="true". Schließlich können Sie noch bestimmen, ob die Musikdatei nur einmal, mehrmals oder endlos oft (bis zum Aufrufen einer anderen HTML-Datei) abgespielt wird. Nach der Microsoft-Syntax können Sie mit loop= "infinite" eine Endloswiederholung erzwingen. Wenn Sie die Wiederholungszahl begrenzen wollen, geben Sie anstelle von infinite einfach die gewünschte Anzahl der Wiederholungen an. Bei der Netscape-Syntax haben Sie nur die Wahl zwischen Endloswiederholung und keiner Wiederholung. Um eine Endloswiederholung zu erzwingen, notieren Sie die Angabe loop= "true" . Ansonsten lassen Sie die Angabe einfach weg. Im obigen Beispiel wird vorausgesetzt, dass sich die Musikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Datei in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genauso wie beim Einbinden von Grafiken. Die Ausgabe einer Hintergrundmusik setzt beim Anwender natürlich entsprechende Hardware (Soundkarte, Lautsprecher) voraus. Ferner muss der Webbrowser die Möglichkeit haben, die Ausgabe der Musikdatei zu steuern.

HTML-Meta-Angaben

Im Gegensatz zum Dokumenttitel sind die Meta-Angaben (häufig auch Meta-Tags genannt) in HTML ein Fass ohne Boden, ein Gegenstand von Voodoo-Glaube und ein Instrument, das von Gremien des Bibliothekswesens bis hin zum Jugendschutz gehätschelt wird. Über Meta-Angaben in HTML gibt es im Web fast ebenso viele Feature-Seiten wie zum Thema HTML allgemein.

Der Grund ist, dass Meta-Angaben die HTML-eigene Schnittstelle für jede Art von Information über ein Dokument darstellen. HTML selber gibt nur zwei Pflichtattribute vor, die ein Meta-Tag enthalten muss: entweder name= oder http-equiv= und content=. Dazu zwei Beispiele:

<meta http-equiv=" Last-Modified" content=" Tue, 15 Nov 2004 12:45:26 GMT">  <meta name="keywords" content="Fahrrad, Bike, Tour">  

Info Das Attribut http-equiv= stellt eine Information für den Webserver bereit. Es handelt sich im Grunde um Kopfanweisungen des HTTP-Protokolls (HTTP-Header), die vom Webserver an einen aufrufenden Client (z.B. einen Browser) gesendet werden, wenn dieser die Seite aufruft.

Dagegen enthalten Meta-Angaben mit dem Attribut

name= Informationen, die sich an diverse auslesende Programme oder Scripts richten. Das kann beispielsweise der aufrufende Browser sein, eine Zusatz-Software wie z.B. eine Kindersicherung oder der Robot einer Suchmaschine. Die Beispielangabe zu http-equiv verwendet das HTTP-Header-Kommando Last-Modified. Dieses enthält eine Angabe darüber, wann das Dokument zuletzt geändert wurde. Ein Webserver kann diese Angabe bei der Abstimmung mit einem aufrufenden Browser darüber nutzen, ob eine Seite aus dem Browser-Cache geladen werden kann oder ob sie neu vom Server übertragen werden soll. Die Meta-Angabe zu den keywords (wichtige Stichwörter zum Dokumentinhalt) orientiert sich dagegen eher an Suchmaschinen-Robots. Diese können beispielsweise so reagieren, dass die Webseite bei der Suche nach einem der in dieser Angabe genannten Stichwörter besonders weit oben in den Suchtreffern aufgelistet wird, da davon auszugehen ist, dass das Dokument zu den Stichwörtern besonders viele oder wichtige Informationen enthält. Leider ist diese schöne Theorie aber von der Schäbigkeit und dem Geltungsdrang vieler Seitenanbieter zunichte gemacht worden, die dieses Verhalten von Such-Robots dazu nutzten, um ihre keyword-Angaben mit lauter oft gesuchten Begriffen zu schmücken, ohne Bezug zum tatsächlichen Inhalt des Dokuments. Da wurde beispielsweise versucht, zu vermietende Ferienhäuser durch sexuelle Stichwörter in den Suchmaschinen besser zu platzieren. Daher werden keyword-Angaben von heute maßgeblichen Robots wie dem von Google gar nicht mehr besonders gewichtet.

Dringend zu empfehlende Meta-Angaben

Folgende Meta-Angaben sind in jedem Fall zu empfehlen und sollten auf keiner Webseite fehlen:

  • Angabe zur Zeichenkodierung bzw. zum Zeichensatz
  • Angabe mit einer allgemeinen Beschreibung des Inhalts

Die Angabe zum Zeichensatz bzw. zur Zeichenkodierung haben Sie bereits kennen gelernt. Hier noch einmal zwei Beispiele:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  

Info Die Angabe richtet sich durch das Attribut http-equiv= also bereits an den Webserver, damit dieser das Dokument korrekt verarbeiten kann. Dem Attribut wird als Wert content-type zugewiesen. Das obligatorische Attribut content= erhält in diesem Fall einen Wert, der einem bestimmten Schema folgt. Der Wert besteht aus zwei Angaben, die durch ein Semikolon voneinander getrennt sind. Der erste Teil ist der Mime-Type, mit dem der Webserver das Dokument an aufrufende Clients ausliefern soll, und der zweite Teil enthält die Angabe zum Zeichensatz oder zum Zeichenkodierungsprinzip.

Wertzuweisungen, die einem solchen Schema entsprechen,

sind bei Meta-Angaben übrigens nicht selten. Das Schema ist jedoch nicht in der HTML-Spezifikation vorgeschrieben, sondern in der Spezifikation oder Konvention der Software, für die die Angabe gedacht ist.

Nehmen wir als Beispiel den ersten Suchtreffer aus einer Suchmaschine. Er führt uns zur Startseite der Domain http://www.sibiweb.de/. Im Quelltext dieser Seite findet sich folgende Meta-Angabe:

<meta name="description" content="Informationsforum für alle Themen rund um die Region Siebenbürgen und die Siebenbürger Sachsen.">  

Info Verwendet die Suchmaschine diese vom Webautor eingepflegte Meta-Angabe, um unterhalb des anklickbaren Suchtreffers den Inhalt der Seite kurz zu beschreiben. Es ist also in Ihrem eigenen Interesse, dass diese Meta-Angabe in Ihren HTML-Dokumenten nicht fehlt und einen nicht zu langen, aber aussagekräftigen Inhalt hat, der die Angaben im Dokumenttitel sinnvoll ergänzt. Die Meta-Angabe zur Seitenkurzbeschreibung wird durch die Attribut-Wert-Kombination name="description" realisiert. Bei content= können Sie dann die gewünschte Kurzbeschreibung eingeben. Innerhalb des Beschreibungstextes ist übrigens kein weiteres HTML-Markup erlaubt!

Weitere Meta-Angaben zum Dokumentinhalt

Meta-Daten zur einzelnen Webseite können nicht nur für fremde Software, sondern auch für eigene Zwecke sinnvoll sein, etwa als Dateninput in eine eigene, site-spezifische Suchmaschine. Aber auch, wenn Sie einfach nur dokumentspezifische Daten wie das Veröffentlichungsdatum oder die Autoren des Inhalts festhalten wollen, haben sich entsprechende Meta-Angaben etabliert. Nachfolgend einige Beispiele:

<meta name="author" content="Anna Hirsch, ahirsch@ahirsch.info">  <meta name="date" content="2005-10-15T08:30:00+01:00">  <meta name="keywords" content="Sommersalate, leichte Kost, Rezepte">  

Info Mit den Beispielangaben wird Anna Hirsch als Autorin der Seite ausgewiesen, als Veröffentlichungszeitpunkt der Seite wird der 15. Oktober 2005, 8:30 Uhr (gemessen mit + 1 Stunde gegenüber Greenwich-Zeit) angegeben und ein paar Stichworte charakterisieren den Inhalt der Seite. Die Datums- und Zeitangabe folgt auch wieder einem festen Schema, das von vielen Softwareprodukten in dieser Form erkannt wird.

Meta-Angaben nach Dublin Core

Für die meisten Seiten reichen die zuvor genannten Meta-Angaben zum Dokumentinhalt aus. Bei umfangreicheren Publikationen mit wissenschaftlichem Anspruch entstehen jedoch weiterreichende Wünsche. HTML macht Ihnen wie schon erwähnt keine Vorschriften, was den Inhalt von Meta-Tags betrifft. Doch ist es immer sinnvoller, wenn ein Standardisierungsgremium sich um ein allgemein anerkanntes Schema bemüht, das dann auf möglichst breiter Basis Akzeptanz findet. So hat sich eine internationale Gruppe von Experten unter dem Namen Dublin Core vereint, um ein Meta-Angaben-Schema für Webseiten zu etablieren, das wissenschaftlichen und bibliothekarischen Ansprüchen gerecht wird. Nachfolgend ein Beispiel für ein Set an Meta-Angaben nach dem Dublin-Core-Schema:

<meta name="DC.Title" content="Zur Urknall-Theorie">  <meta name="DC.Creator" content="Harald Sternguck">  <meta name="DC.Subject" content="Astronomie">  <meta name="DC.Description" content="Pro- und Contra-Argumente zur Urknall-Theorie aus philosophischer Sicht">  <meta name="DC.Publisher" content="Web-Magazin: Wissen gestern, heute, morgen">  <meta name="DC.Contributor" content="Pia Lichtblau">  <meta name="DC.Date" content="2005-10-15">  <meta name="DC.Type" content="Text">  <meta name="DC.Format" content="text/html">  <meta name="DC.Identifier" content="http://server/urknall/">  <meta name="DC.Source" content="Buch / ISBN:7-23094-2389047-5">  <meta name="DC.Language" content="de">  <meta name="DC.Relation" content="Artikel Printausgabe 05/2005, S.47ff">  <meta name="DC.Coverage" content="21st century">  <meta name="DC.Rights" content=" http://server/copyright.htm">  

Info Alle Meta-Angaben nach Dublin Core werden durch das name-Attribut identifiziert. Die Wertzuweisung an dieses Attribut besteht stets nach dem Schema DC.Angabetyp, wobei das DC für „Dublin Core“ steht.

DC.Title wiederholt noch einmal den Dokumenttitel als Meta-Angabe. DC.Creator ist der Autor oder die inhaltsverantwortliche Person oder Organisation. DC.Subject soll den zugehörigen Themenbereich eingrenzen. DC.Description entspricht der gewöhnlichen Meta-Angabe zur Kurzbeschreibung des Dokumentinhalts. DC.Publisher kann sich von DC.Creator unterscheiden, wenn die Webseiten nicht vom Autor selber betreut werden, sondern von einem Drittanbieter. DC.Contributor ist für Personen oder Organisationen gedacht, die zum Inhalt oder zur Form beigetragen haben, z.B. Übersetzer oder Illustratoren. DC.Date enthält das Datum der Veröffentlichung, und zwar ohne Uhrzeit in der Form JJJJ-MM-TT. Bei DC.Type soll der Dokumenttyp charakterisiert werden – Dublin Core schlägt dazu die folgenden Angaben vor: Collection (Zusammenstellung), Dataset (für Listen oder Tabellen), Event (wenn der Inhalt z.B. eine Terminankündigung oder dergleichen ist), Image (wenn der Inhalt im Wesentlichen eine Grafik ist), InteractiveResource (wenn der Inhalt z.B. wesentlich aus einem Flash-Movie für User-Interaktion besteht), MovingImage (wenn der Inhalt wesentlich aus einem Video besteht), PhysicalObject (wenn der Inhalt wesentlich aus einer 3D-Darstellung oder -Animation besteht), Service (wenn es sich z.B. um einen User-Service wie Online-Banking handelt), Software (wenn der Inhalt wesentlich aus der Download- oder Ausführmöglichkeit einer Software besteht), Sound (wenn der Inhalt wesentlich aus Musik oder Geräuschen besteht, z.B. bei einem Webradiosender), Stilllmage (eine Spezialform von Image) und Text (wohl der häufigste Typ).

DC.Format ist der Mime-Type des Dokuments, bei HTML also im Normalfall text/html. DC.Identifier ist eine Angabe zum „Original“ des Dokuments. Bei Webseiten ist dies sinnvollerweise die Original-URL, wo das Dokument gespeichert ist. DC.Source ist die Angabe zu einer Quelle, die für das aktuelle Dokument inhaltlich maßgeblich war. DC.Relation stellt den Bezug zu einer anderen Publikation her, z.B. zu einer Printversion des aktuellen Dokuments. DC.Coverage ist etwas schwer zu fassen und soll einen räumlichen oder zeitlichen Bezug herstellen. DC.Rights schließlich ist ein Hinweis auf juristisch relevante Hintergrundinformation zum aktuellen Dokument, z.B. auf AGBs, Copyright-Hinweise usw. Idealerweise wird dazu eine URL-Adresse angegeben, unter der die betreffende Information zu finden ist.

Niemand zwingt Sie, stets das ganze DC-Set zu notieren,

wenn Sie mit den DC-Meta-Tags arbeiten möchten. Was sich aus dem Set letztlich verwendet lässt, hängt selbstverständlich vom Inhalt und von der Art der eigenen Webseiten ab. Andersherum sind auch Mehrfachangaben zulässig, z.B. wenn mehrere Personen bei DC.Contributor zu nennen sind. In Suchmaschinen wie Google spielen die DC-Angaben bislang eine eher untergeordnete oder gar keine Rolle.

Spezielle Meta-Angaben für Such-Robots

Einige Meta-Angaben orientieren sich speziell an Such-Robots, also an den Programmen der Suchmaschinen, die Webseiten scannen und den Inhalt in die Datenbank der Suchmaschine übertragen. Folgende Meta-Angaben sind je nach Situation sinnvoll:

<meta name="robots" content="noindex">  

Info Mit dieser Angabe verbieten Sie einem Suchprogramm, den Inhalt des HTML-Dokuments an seine Suchdatenbank zu übermitteln. Das kann z.B. für Impressumsseiten interessant sein, auf denen Sie möglicherweise persönliche Daten wie Wohnadresse, Umsatzsteuer-ID, Bankverbindung usw. angeben, von denen Sie aber nicht unbedingt wünschen, dass diese über Google und andere Suchmaschinen direkt auffindbar sind.

<meta name="robots" content="nofollow">  

Info Diese Angabe ergänzt die Angabe für noindex, indem Sie dem Such-Robot verbieten, Links, die in dem aktuellen HTML-Dokument enthalten sind, zu folgen.

<meta name="revisit-after" content="14 days">  

Info Diese Angabe empfiehlt dem Such-Robot, die Seite spätestens nach 14 Tagen erneut zu scannen, da anzunehmen ist, dass sich bis dahin ihr Inhalt geändert hat.

Spezielle Meta-Angaben für Webserver

Dies sind Meta-Tags mit dem Attribut http-equiv=. Es besteht keine Garantie, dass jede Angabe von jedem Webserver oder von einem von ihm ausgeführten Script tatsächlich und korrekt interpretiert wird. Dennoch haben sich eine Reihe von Meta-Angaben etabliert, die in vielen Fällen funktionieren und nützliche Dienste leisten können. Folgende Angaben gehören dazu (Beispiele):

<meta http-equiv="content-encoding" content="gzip">  

Info Diese Angabe weist den Webserver an, das Dokument wenn möglich ZIP-komprimiert an den Browser auszuliefern. Bei textlastigen Dokumenten kann sich dadurch die zu übertragende Datenrate erheblich reduzieren. Das Dokument kann deutlich schneller im Browser angezeigt werden.

<meta http-equiv="expires" content="Wed, 1 Jan 2006 00:00:00 GMT">  

Info Diese Angabe bedeutet, dass das Dokument nach dem angegebenen Zeitpunkt bei Anforderung nicht mehr aus einem Cache-Speicher (z.B. aus dem Browser-Cache) geholt werden darf, sondern in jedem Fall neu vom Server übertragen werden muss. Sinnvoll ist diese Angabe, wenn Sie wissen, dass das Dokument bis zu diesem Zeitpunkt auf jeden Fall einen aktuelleren Inhalt haben wird.

<meta http-equiv="refresh" content="3;URL=http://server/">  

Info Diese in der Praxis sehr häufig verwendete Angabe bietet HTML-Autoren die Möglichkeit, ohne weitere Serverkenntnisse eine Weiterleitung zu einer anderen Adresse zu notieren. Das aktuelle Dokument wird dabei zwar in den Browser geladen, doch dieser führt nach der angegebenen Anzahl Sekunden (im obigen Beispiel 3) einen automatischen Redirect auf die angegebene Adresse aus.

<meta http-equiv="cache-control" content="no-cache">  

Info Mithilfe dieser Angabe können Sie verhindern, dass ein aufrufender Browser das Dokument in seinem Browser-Cache speichert. Sie stellen stattdessen sicher, dass das Dokument bei jedem Aufruf neu vom Server übertragen werden muss. Sinnvoll ist dies vor allem bei Dokumenten, die sich sehr oft ändern, und vor allem bei serverseitig dynamisch erzeugten Dokumenten (also z.B. bei HTML-Output von PHP-Scripts).

<meta http-equiv="cache-control" content="maxage=86400">  

Info Auch diese Angabe beeinflusst das Cache-Verhalten des Browsers. Die maxage-Angabe legt fest, wie viele Sekunden (im Beispiel 86400, das entspricht einem Kalendertag) das Dokument höchstens im Cache verbleiben darf, bevor es bei einer neuen Anforderung neu vom Server übertragen werden muss. Sinnvoll ist eine solche Angabe z.B. für die Datei eines Newstickers, der einmal täglich aktualisiert wird.

Logische Verlinkung mit anderen Inhalten

Die logische Verlinkung mit anderen Seiten ist eines der spannendsten Hypertext-Features von HTML, obwohl sie immer noch viel zu selten auf Webseiten genutzt wird. Der Grund dafür ist, dass das entsprechende link-Element, das im Dateikopf notiert wird und verschiedenste Arten der Verlinkung erlaubt, lange Zeit von allen Browsern ignoriert wurde. Was um so erstaunlicher ist, als das Element ein Urgestein von HTML ist und seit den frühen 90er Jahren zum HTML-Standard gehört. Immerhin ist das link-Element vielen Autoren dadurch vertraut geworden, dass es die HTML-übliche Methode zum Einbinden externer Stylesheets ist. Doch das Element kann viel mehr und wer eine anwenderfreundliche Website anbieten will, sollte sich die Mühe machen, eine zusätzliche Navigation mithilfe des link-Elements zu realisieren. Das link-Element wird im Dateikopf, also zwischen <head> und </head> notiert. Ein erstes Beispiel:

<link rel="search" title="Suchen" href="/cgi-bin/suche.cgi">  

Info Das Beispiel verweist auf eine site-spezifische Suche. Browser, die das link-Element in der angedachten Weise interpretieren, bieten eine Navigationsleiste an, über die ein entsprechender Eintrag verfügbar ist. In welcher Weise die Navigation im Browser realisiert wird, ist nicht vorgeschrieben und produktspezifisch. Anwender, die sich an die Bedienung jedoch erst mal gewöhnen, wissen sie zu schätzen.

Aufbau von logischen Links

Betrachten wir das Markup von logischen Links genauer:

<link rel="search" title="Suchen" href="/cgi-bin/suche.cgi">  

Info Jeder logische Link wird durch ein <link>-Tag realisiert, das in HTML kein Abschluss-Tag hat. In XHTML muss daher am Ende die Zeichenfolge /> notiert werden. Links dieser Art haben stets drei Attribute. Mit dem Attribut rel= wird der Typ des Links bestimmt. Mit title= vergeben Sie die Beschriftung der Schaltfläche oder des Menüeintrags, die der Browser dem Anwender in der Navigation für diesen Link anbietet. Bei href= geben Sie die URL-Adresse an, die der Browser aufrufen soll, wenn der Anwender den Link auswählt. Es kann sich um Adressierungen wie http://mein.server.xy/irgendwo.html handeln, aber auch um lokale Adressierungen wie /irgendwo.html oder ../../irgendwo.html. Als Alternative zum rel-Attribut ist im HTML-Standard auch noch ein rev-Attribut für Rückverweise vorgesehen. Dies hat jedoch in der Praxis bislang keine Bedeutung.

Nützliche logische Links

Nachfolgend Beispiele für logische Links, die für viele Websites geeignet sind:

<link rel="contents" href="sitemap.htm" title="Inhalt">  

Info Mit rel="contents" verweisen Sie auf eine Seite innerhalb Ihres Projekts, die ein Inhaltsverzeichnis darstellt. Viele Sites, die kein zentrales Inhaltsverzeichnis im Stil eines Buches haben, bieten als Alternative eine so genannte Sitemap an.

<link rel="chapter" href="index.htm" title="Kapitel">  

Info Mit rel="chapter" verweisen Sie auf die Startseite eines Kapitels. Eine Kapitelunterteilung, die sich stark an der Buchmetapher orientiert, findet sich vor allem bei wissenschaftlich orientierten Webpublikationen oder bei technischen Dokumentationen im Web.

<link rel="index" href="stw.htm" title="Stichwörter">  

Info Mit rel="index" sollten Sie nicht, wie das Wort nahe legt, auf die Startseite der Website verweisen, sondern auf ein Begriffs- oder Stichwortverzeichnis oder zumindest auf irgendeine vergleichbare Art von alphabetisch oder anderweitig sortierter Übersicht mit anklickbaren Links.

<link rel="copyright" href="agb.htm" title="AGB">  

Info Mit rel="copyright" sollten Sie eigentlich auf eine Seite verweisen, die Angaben zum geistigen Schutz Ihrer Inhalte enthält. Da das Copyright im deutschen Recht allerdings ohnehin durch das Urheberrechtsgesetz klar geregelt ist, lässt sich der Copyright-Link auch „umbiegen“, um damit juristisch relevante Informationen zu verlinken, die je nach Webangebot im Gegensatz zum Urheberrechtshinweis explizit veröffentlicht werden müssen. So ist beispielsweise ein Shop-Betreiber verpflichtet, seine allgemeinen Geschäftsbedingungen (AGB) explizit auf seinen Webseiten abrufbar zu halten. Für diesen Zweck ist der logische Link im obigen Beispiel entfremdet worden.

<link rel="next" href="page-5.htm" title="nächste Seite">  <link rel="prev" href="page-3.htm" title="vorherige Seite">  <link rel="up" href="index.htm" title="nach oben">  <link rel="top" href="augsburg.htm" title="Homepage">  

Info Diese logischen Links ermöglichen dem Anwender ein bequemes Navigieren in der Hierarchie Ihres Webangebots. Mit rel="next" und rel="prev" können Sie in einer Serie von Seiten Verweise zum Vor- und Zurückblättern anbieten. Mit rel="up" verweisen Sie in Angeboten, die sich über mehrere logische Hierarchieebenen erstrecken, eine logische Ebene höher und rel="top" bietet sich zum Sprung auf die Projektstartseite an. Bei rel="top" scheiden sich allerdings die Geister – manche Anbieter nutzen diesen Link auch, um einfach auf der aktuell angezeigten Seite zum Anfang zurückzuspringen.

<link rel="alternate" href="en/index.htm" title="english">  

Info Mit rel="alternate" können Sie auf eine andere Version der aktuellen Seite verweisen. Ideal geeignet ist dieser Verweistyp, wenn Sie ein mehrsprachiges Webangebot haben. In diesem Fall können Sie auf eine anderssprachige Version der gleichen Seite verweisen. Es ist selbstverständlich erlaubt, logische Links bestimmter Typen mehrfach zu verwenden. Wenn Sie also beispielsweise auch französisch- und spanischsprachige Versionen der gleichen Seite anbieten, können Sie auch zwei oder drei Links der Sorte rel="alternate" anbieten. Wie ein Browser das an seiner Bedienoberfläche umsetzt, ist sein Problem, nicht Ihres. Ebenso wenig müssen Sie alle verfügbaren logischen Links einsetzen. Wenn Sie z.B. nur auf die Startseite und auf eine Sitemap-Seite verweisen wollen, spricht nichts dagegen.

Adressbasis für referenzierte Dateien

Eine weitere, mitunter nützliche Angabe im Kopf einer HTML-Datei ist die Adressbasis für referenzierte Dateien. Dazu ein Beispiel:

<head>  <base href="http://der.andere.server/bilder/">  <!-- ... andere Angaben im Dateikopf ... -->  </head>  

Info Mit dem base-Element können Sie zentral eine Adressbasis bestimmen. Wenn Sie nun im Dokument beispielsweise wie folgt eine Grafik referenzieren

<img src="bild001.gif" alt="Bild 1">  

dann berücksichtigt der Browser die angegebene Adressbasis und fordert das Bild von folgender Adresse an: http://der.andere.server/bilder/bild001.gif. Die zentral definierte Adressbasis gilt übrigens für alle im Dokument referenzierten Dateien.

Titel einer HTML-Datei

Ein HTML-Dokument (nicht XHTML!) benötigt nicht zwingend ein umschließendes html-Element, nicht mal ein head– oder body-Element. Aber ein title-Element ist immer vorgeschrieben, wenn gültiges HTML erzeugt werden soll. In der Praxis sollten Sie zwar niemals auf das html-, das head– und das body-Element verzichten, doch soll dieser Hinweis einfach verdeutlichen, welch große Bedeutung dem Titel des Dokuments beigemessen wird. Notiert wird er ganz einfach:

<title>Was auch immer</title>  

Da es sich um wichtigen sprachlichen Inhalt handelt, kann es nichts schaden, die Sprache mit anzugeben, z.B.:

<title lang="de">Was auch immer</title>  

Wenn Sie übrigens bei XHTML das lang-Attribut einsetzen wollen, notieren Sie stets folgende Doppelform:

<[elementname] lang="de" xml:lang="de">  

Die immense Bedeutung des Dokumenttitels ist einfach zu erklären:

  • Der Titel erscheint bei Aufruf des Dokuments bei den meisten Browsern in der Titelleiste.
  • Der Titel wird angeboten, wenn der User ein Bookmark/Favoriten auf die Seite setzt
  • Der Titel erscheint in der History-Liste der bereits besuchten Webseiten im Browser.
  • Der Titel ist bei Suchmaschinen der anklickbare Verweistext, wenn die betreffende Seite dort als Treffer zu einer Suche aufgelistet wird.
  • Es lohnt sich also, dem Titel die nötige Aufmerksamkeit zu widmen. Da Websites ja in aller Regel aus einer Menge von einzelnen Seiten bestehen, die aber irgendwie zusammengehören und ein Ganzes bilden, liegt es nahe, sich ein einheitliches Schema für die Dokumenttitel der einzelnen Seiten zu überlegen. Es ist beispielsweise schlecht, wenn der Titel der Produktübersichtsseite „Firma XY: Produktübersicht“ lautet und der Titel der Kontaktübersichtsseite „Kontaktseite“. Sinnvoller wäre ein einheitliches Schema wie „XY: Produktübersichtsseite“ und „XY: Kontaktübersichtsseite“. Der Titel sollte nicht zu lang sein. Stellen Sie sich den Titel dazu am besten als Menüeintrag in den Favoriten des Safari oder als Eintrag in der als Sidebar zuschaltbaren Bookmark-Baumstruktur bei Browsern wie Firefox oder Opera vor.

Über den Autor

Marian Wurm
Marian Wurm

Gründer und geschäftsführender Gesellschafter der Löwenstark Online-Marketing GmbH. Marian Wurm entwickelt im Nebengewerbe zu seiner Ausbildung als Informatikkaufmann erste Online-Shops auf OS:Commerce Basis mit einem Team von freien Programmierern aus dem Homeoffice.