Doctype
Eine externe CSS-Datei mit:...
Eine externe CSS-Datei mit:
<link rel="stylesheet" type="text/
css" href="https://www.domain.com/
cssdaten.css" media="screen"/>Generell sollten Sie sowohl JavaScript als auch CSS in externen Dateien speichern und über die gezeigten Aufrufe im Browser hinzuladen, statt die CSS-Anweisungen und JavaScripts selbst mit in die HTML-Datei zu packen. Dieses Vorgehen beschleunigt das Laden der Seite, weil das CSS parallel zu HTML heruntergeladen wird.Achten Sie aber andererseits auch darauf, dass möglichst wenige externe CSS-Dateien geladen werden müssen, sonst kehrt sich der Effekt um.JavaScript sollten Sie, soweit das bei der jeweiligen Programmfunktionalität möglich ist, nicht im <head>-Bereich laden, sondern möglichst am Ende der HTML-Datei. Denn solange eine JavaScript- Datei lädt, muss der Browser warten und kann die Seite nicht weiter rendern. Eine Ausnahme ist beispielsweise der aktuelle Google-Analytics-Code, der selbst dafür sorgt, dass die Seite nicht verzögert dargestellt wird.
Doctype
Ein Buch mit sieben Siegeln ist für viele der Doctype einer HTML-Seite. Jahrelang hat es in der Praxis kaum eine Rolle gespielt, welcher Doctype definiert war. Viele Browser - allen voran Microsofts Internet Explorer - hatten Standards ohnehin ignoriert und ihre eigenen Regeln aufgestellt, worauf Webdesigner mit allerlei Workarounds und nicht- Standard-konformem Code reagierten, um das gewünschte Ergebnis zu erzielen.
Moderne Browser verhalten sich inzwischen aber weitestgehend standardkonform und haben eigentlich nur noch zum Zwecke der Abwärtskompatibilität zwei verschiedene Rendering-Modi: den Standard-Mode und den Quirks-Mode. Im Standard-Mode werden Webseiten strikt standardkonform gemäß der Doctype-Deklaration interpretiert. Ist der Doctype falsch angegeben oder enthält der HTML-Code der Webseite Fehler, führt das zu Darstellungsfehlern. Der Quirks-Modus interpretiert den Code dagegen sehr großzügig und behebt die meisten Probleme automatisch.Wer ein neues Website-Design entwickelt oder alte Seiten auf Vordermann bringt, sollte aber unbedingt auf den Standard-Mode setzen. Denn der Quirks-Mode behebt die eigentlichen Code-Fehler nicht, er überdeckt sie nur. Unter Umständen tut das jeder Browser aber auf unterschiedliche Weise.Deklarieren Sie den Doctype korrekt und nutzen Sie damit den Standard- Mode der Browser, sparen Sie sich oft eine langwierige Fehlersuche bei unerklärlichen Darstellungsproblemen Ihrer Seiten im Browser. Damit ist Ihre Code zukunftssicher und verursacht bei neuen Browser-Versionen wesentlich weniger Pflegeaufwand. Und Browser interpretieren fehlerfreien Code im Standardmodus performanter.
Doctype richtig angeben
Die Doctype-Deklaration verweist auf eine Document Type Definition (DTD) und sagt dem Browser damit, nach welcher HTML-Version das Dokument erstellt wurde und wie es demnach interpretiert werden muss. Die Doctype-Deklaration steht am Beginn des HTML-Dokumentes noch vor dem <html>-Tag, beispielsweise:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "https://www.w3.org/
TR/html4/strict.dtd">Soll XHTML verwendet werden, ist vor der Doctype-Deklaration die XML-Version anzugeben und danach der XML-Namensraum. Beispiel:
<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "https://
www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"><html xmlns="https://www.w3.org/1999/
xhtml">Fehlt eine Doctype-Deklaration oder wird eine HTML-Version älter als HTML 4 angegeben, schalten Browser übrigens generell in den Quirks-Modus. Sehr ausführlich behandelt Carsten Protsch das Thema Doctype- Switch auf seiner Website (carstenprotsch.de/zwischennetz/doctype/ ). Eine ausführliche Darstellung zum Grundgerüst eine HTML-Seite insgesamt finden Sie bei Selfhtml (de.selfhtml.org/html/allgemein/grundgeruest.htm ).
HTML und CSS fehlerfrei
Weblinks
validator.w3.org code.google.com/speed/page-speed/ carsten-protsch.de/zwischennetz/doctype/ de.selfhtml.org/html/allgemein/grundgeruest.htmEigentlich ist es eine Selbstverständlichkeit, doch in der Praxis sieht man mehr falsche als richtige Webseiten. Trotz toleranter Browser, die viele Fehler verzeihen, hat falscher HTML-Code einige unkalkulierbare Nachteile. Allen voran: Suchmaschinen- Crawler sind bei Weitem nicht so tolerant wie Browser, weil sie auf Geschwindigkeit optimiert sind und sich keine Zeit nehmen, die wahren Intentionen des Programmierers fehlerhaften Codes zu ermitteln.Stoßen sie auf Fehler, brechen sie das Laden einer Seite unter Umständen komplett ab oder interpretieren den Code falsch. In der Konsequenz wird eine Seite zwar im Browser richtig angezeigt, von der Suchmaschine aber nicht oder nicht vollständig erfasst.Achten Sie bei Ihrem CSS-Code auf möglichst schlanke Dateien mit möglichst wenig Spezial-Formatierungen. Das macht zum einen die Fehlersuche wesentlich einfacher, beschleunigt zum anderen aber auch das Laden und Darstellen der Webseiten im Browser. Soweit irgendwie möglich sollten CSS-Deklarationen vermieden werden, die dem Browser viel Rendering- Leistung abverlangen. Das trifft vor allem auf verschachtelte Selektoren zu, wie sie leider beispielsweise auch von gängigen WordPress-Plugins wie NG Gallery verwendet werden, wo sie dann schwer zu entfernen sind, etwa
.ngg-gallery-list li.selected aGoogles Page Speed Analyzer hilft, solche Flaschenhälse zu identifizieren (code.google.com/speed/page-speed/ ).Bevor Sie also ein neues Template, ein neues Design oder einzelne statische Seiten online stellen, sollten Sie die Validität des Codes prüfen, beispielsweise mit dem kostenlosen W3C Markup Validation Service (validator.w3.org ), der sehr genaue Hinweise zur Behebung von Fehlern gibt. Nicht nur den HTML-Code sollten Sie dabei die W3C-Analyse durchlaufen lassen, sondern auch Ihre CSS-Dateien.Denn zu leicht schleichen sich auch hier Fehler ein, die unerwartete Darstellungsprobleme verursachen können, im Extremfall aber auch die Suchmaschinen-Crawler verwirren - bis hin zur Situation, dass die jeweilige Webseite falsch oder gar nicht mehr indiziert wird, wenn durch fehlerhaftes CSS beispielsweise Content unbeabsichtigt versteckt wird. Browser gleichen solche Fehler in der Regel aus, Suchmaschinen-Crawler dagegen nicht.
