Der neunte Tag - HTML-Grundkurs

HTML-Grundkurs
Abgrenzung zwischen den Termini "Deklarationssprache" und "Programmiersprache": In der Deklarationssprache werden Struktur und Design festgelegt, während Programmiersprachen (wie z. B. PHP, Javascript, AJAX - asynchrones Javascript) auf Objekten aufbauen, die manipuliert werden können. Bei HTML 5 und CSS 3 verschwimmt diese Trennung, denn dann sind in HTML auch Animationen möglich (siehe z. B. blog.kulturbanause.de/2010/06/sensationelle-html5-demos/).

Programm zur Erstellung einer HTML-Datei
HTML-Dateien können mittels eines Text-Editors erstellt werden, müssen anschließend mit der Endung .html abgespeichert werden, damit bei Doppelklick auf den Dateinamen im Explorer automatisch ein Brower zum Öffnen der Datei verwendet wird.


Struktur von HTML-Dateien


Eine HTML-Datei beginnt immer
mit dem Tag (im Folgenden steht das Anführungszeichen unten für eckige Klammer auf und das Anführungszeichen oben für die schließende eckige Klammer)  „html“, gefolgt von dem „head“ in dem z. B. Scripte oder das CSS hinterlegt und der Sitetitle definiert wird, dem „title“Mein erster Titel „/title“ und dem Body (Seiteninhalt), der von „body“ und „/body“ eingerahmt ist. Wichtig ist, dass alle HTML-Tags, die geöffnet werden auch wieder geschlossen werden müssen. Die Schließung erfolgt immer mit einem vorangestellten "/" also z. B. „/head“, „/html“.

Wichtig: Der Title, die Meta-Description und die Meta-Keywords (letzteres wird nur noch von Bing und Yahoo! ausgelesen) müssen die wichtigsten (Nischen-)Keywords, die wir für unsere Seite ermittelt haben, beinhalten. Dies haben wir uns am Beispiel der Seite von Frau Lammenett Sekretariat24.com angesehen. Die Summe der Keywords sollte auf sechs begrenzt werden. Mehr lesen die Suchmaschinen ohnehin nicht aus.

Content ist King!
Alles, was zwischen den Body-Tags steht, ist sehr wichtig und spielt im SEO-Bereich eine sehr große Rolle. Die im Rahmen der SEO-Optimierung ermittelten Keywords und Nischen-Keywords müssen hier möglichst oft auftauchen. Je höher der Prozentsatz der eingesetzten Keywords am gesamten Text, desto relevanter ist die Seite und wird von Google entsprechend bewertet. Weiterhin wichtig ist natürlich auch die Offsite-Optimierung, d. h. die Verlinkung der eigenen Seite auf möglichst vielen, qualitativ hochwertigen Seiten.

h1-h6-Überschriften
Wichtig ist, den Body-Bereich ordentlich und SEO-wirksam zu strukturieren. Überschriften können in der Rangordnung h1 bis h6 definiert werden, wobei h1 die Hauptüberschrift darstellt, h6 die niedrigste Hierarchiestufe. Dies zeigt sich auch in der HTML-Darstellung. 

Der alt-Tag und der Bild-Title
Weiterhin für die SEO-Optimierung wichtig, bei eingefügten Bildern einen alt-Text für alle die Browser einzufügen, die das Bild nicht darstellen können und dem Bild einen Titel zu geben. Sowohl der alt-Text als auch der Titel sollten aus SEO-Gründen die wichtigsten Keywords enthalten. 

Der Summary-Tag bei Tabellen
Einen ähnlichen Trick kann man auch bei Tabellen einsetzen. Hier ist es anstelle des alt-Tags der Summary-Tag zu verwenden, der Keywords enthalten kann.

Anmerkung: Kommentarzeilen
Darüber hinaus kann auch Kommentarzeilen einfügen, die nicht vom Browser ausgelesen werden.

Keyword-Dichte
Optimal wäre eine Keyword-Dichte (Keyword-Density von 6%). Das Ziel ist allerdings schwer zu erreichen, da sonst der Text schnell unleserlich wird. Der Alt-Text und der Summary-Text können aber helfen, das Ergebnis zu verbessern. Überprüfen kann man das Ergebnis mittels SEO-Quake (Menüpunkt "Keyword density" im SEO-Quake-Firefox-Add-on. Dort findet man neben der Keyword density auch die Spalte "Found in". Hier sollte bei den wichtigsten Keywords immer "T" und "D" stehen als Abkürzung für "in Sitetitle enthalten" und "in Meta Description enthalten".

SEO-Quickcheck
Ein sehr guter SEO-Quickcheck kann kostenfrei auf der Seitwert-Seite vorgenommen werden.


Weiterführende Quelle zur Vertiefung der HTML-Kenntnisse Unter www.3schools.com findet man sehr gut verständliche Anleitungen zur Erstellung einer Webseite.