Der Basiscode des Internets: HTML

Grundfrage:

Nachdem wir in den letzten Artikeln das Internet selbst und das wichtigste Programm - den Browser - näher beleuchtet haben, geht es diesmal darum, die Bausteine der Webseiten kennenzulernen. Die drei Kürzel HTML, CSS und JS stehen dabei für die wichtigsten Technologien rund um moderne Webseiten. Doch was steckt hinter den kryptischen Namen und was tun sie?
Wir starten die Serie mit HTML, das die Grundlage jede Webseite darstellt.


Kurzfassung für eilige Leser:

HTML (Hyper-Text Markup Language) kümmert sich als Basissprache der Webseite vor Allem um die Strukturierung der Seiteninhalte, beispielsweise in Überschriften, Texte und Bilder sowie deren inhaltliche Bedeutung (Semantik).
Ebenso werden damit (unsichtbar für den Anwender) wichtige Informationen für Browser und Suchmaschinen programmiert, z.B. zu Urheber, wo Optikanweisungen (CSS) und Logikfunktionen (JS) zu finden sind.
Mit der neuesten Version HTML5 kommen zunehmend mächtigere Funktionen wie beispielsweise das Abspielen von Video und Musik sowie erweiterte Eingabehilfen für Benutzer zum Standard.


Langfassung für wirklich Interessierte:

Mehr als nur Text

Mit der Erfindung des Hypertext Transfer Protocol (HTTP) machte sich Tim Berners-Lee für immer unsterblich, war es doch der Beginn des Internets wie wir es heute kennen: eine gigantische Sammlung von Webseiten.

Eine Webseite wird in der Sprache HTML (HyperText Markup Language) geschrieben. Der Begriff "Hypertext" beschreibt, dass es dabei nicht nur um den (Inhalts-)Text selbst geht, sondern auch um die Verlinkung zu anderen Seiten, die Einbettung von anderen Medien (z.B. Bildern) und v.a. um Struktur.

HTML selbst ist eine spezifische Variante der allgemeinen Beschreibungssprache XML (eXtensible Markup Language), die man verwenden kann um jede Art von strukturierten Daten computerlesbar aufzuschreiben. Die sog. Syntax der Sprache - die Art und Weise wie Befehle geschrieben werden - ist für Menschen sehr einfach zu lesen, v.a. weil sie sehr beschreibend ist und keine Logikbausteine enthält.

Struktur und Ordnung

HTML ist nicht nur strukturierend tätig, sondern ebenfalls dafür da, dem Inhalt der Seite eine Bedeutung, die sog. Semantik, zu geben.

Metadaten
Sehen wir uns ein Buch an: dieses hat neben dem eigentlichen Inhalt (z.B einer Geschichte) viele weitere Eigenschaften, beispielsweise Titel, Autor, Erscheinungsjahr, Verlag und Genre. Diese Angaben haben nichts mit dem Inhalt zu tun, sind aber v.a. für Büchereien und Handel interessant. Diese Art von Daten nennt man Metadaten und dasselbe gibt es auch in HTML.

Im sog. HEAD der Webseite werden beispielsweise Angaben für die Suchmaschine (Suchbegriffe) verwaltet oder geben an, wer der Urheber der Seite ist. Schriftarten, Zeichensatz und Sprache sind ebenso Teil dieser - für den Besucher unsichtbaren - Angaben wie Formatierungsbefehle (CSS) und die interaktive Programmierung (JavaScript). Details zu den letzten Beiden gibt es in den kommenden Artikeln der "Basiscode" Reihe.


Semantik des Inhalts
Der Buchinhalt - um bei der Analogie zu bleiben - besteht hauptsächlich aus Kapiteln und Absätzen, gespickt mit Zitaten, Tabellen oder hervorgehobenem (wichtigem) Text. Gibt man einem Text eine dieser (optischen) Eigenschaften, so verändert das den Inhalt nicht. Die zusätzlichen Informationen helfen aber bei der Orientierung.

In HTML werden diese Eigenschaften unsichtbar im Code programmiert und damit vor Allem maschinenlesbar gemacht. Das vorrangige Ziel ist dabei, dass kein Text auf einer Webseite bedeutungslos, d.h. ohne Semantik ist.

Eine gute Semantik hilft auch anderen Programmen wie Screenreadern, die eine Seite intelligent vorlesen oder in Blindenschrift darstellen können. Sie erleichtern den Programmierern und Designern von Webseiten die Arbeit, einfach indem sofort klar ist, welcher Teil der Webseite welche Bedeutung / Funktion hat.


Optik
Da die semantische Kennzeichnung durch HTML-Code zunächst nicht sichtbar ist, wird sie üblicherweise durch eine spezielle Formatierung ausgedrückt. Eine Überschrift wird beispielsweise mit größerer Schrift dargestellt und steht für sich alleine in einer Zeile. Wichtiger Text wird meist kursiv oder fett geschrieben.

Diese Formatierung hat keinen Nutzen im Sinne der Semantik, ist ist nur der visuelle Ausdruck der Bedeutung. Der Browser hat dazu bereits Standards für alle Semantiken definiert (mehr oder weniger gute), unter anderem die Beispiele des vorherigen Absatzes.

Es sollte aber stets berücksichtigt werden, dass die Semantik keine spezielle Optik vorgibt. Der Browser folgt nur einer - von Buch und Zeitschriften etablierten - Formgebung, damit die Webseite auch ohne zusätzliche Formatierung des Inhalts gut verständlich ist. Theoretisch könnte eine Überschrift aber auch ganz klein oder wie Standardtext formatiert sein, seine inhaltliche Kennzeichnung als Überschrift wäre dank des unsichtbaren HTML-Codes trotzdem gegeben und entsprechend maschinenlesbar.

Aus der - heute gerne verdrängten - Historie enthält HTML unglücklicherweise noch Befehle, die rein zur Formatierung von Text dienen. Diese verändern rein die Optik, nicht aber die Bedeutung des Inhalts und gehen damit am Ziel von HTML vorbei. Sie erschweren es zusätzlich, die Optik einer Webseite zu modifizieren (z.B. andere Farbtöne).

Aus diesem Grund wurde für die grafische Gestaltung von Webseiteninhalten die spezialisierte Sprache CSS geschaffen, mehr dazu in weiteren Artikeln. Da leider immer noch viele Seiten diese veralteten Befehle verwenden, werden sie vom Browser leider noch unterstützt.


Struktur
Neben wichtigen Metadaten und inhaltlicher Semantik gibt HTML natürlich auch Struktur vor. Schließlich muss der Browser wissen, wo Text steht, Bilder angezeigt werden sollen und das Menü zu finden ist. Spezialisierte Befehle dienen der Gruppierung von Inhalten, z.B. um Überschriften samt ihrem Inhalt zu kennzeichnen.

Eine Mischung aus Struktur und Semantik sind Inhaltssammlungen wie Tabellen, Aufzählungslisten oder Formulare. HTML beschreibt zwar keine komplexe Logik - dafür wurde JavaScript erschaffen - kann aber im kleinen Rahmen doch das Verhalten von Elementen vorgeben, zum Beispiel ob eine verlinkte Seite im gleichen Fenster oder in einem neuen Fenster geöffnet werden soll oder was passieren soll, wenn man ein Bestellformular absendet.


HTML5?

Das aktuelle Hype-Thema HTML5 werde ich hier (noch) nicht aufgreifen, vor allem da der Name irreführend ist. HTML5 ist nicht die Weiterenwicklung der letzten Version HTML4, sondern ein Marketingbegriff. Unter HTML5-Flagge segeln allerdings nicht nur Neuerungen in HTML selbst sondern ebenfalls viele Dinge im Bereich CSS und JavaScript. Ich werde also erst auf diese neue Technologie-Sammlung eingehen, wenn wir uns auch mit den anderen beiden Webseiten-Technologien CSS und JS befasst haben.


Fazit

HTML arbeitet vor Allem unsichtbar unter der Haube und baut das Struktur- und Semantik-Gerüst, auf das außergewöhnliches Design und interaktive Funktionen aufsetzen können. Explizit nicht mehr Aufgabe von HTML ist heutzutage die Optik wie beispielsweise Textformatierung, Farbgestaltung und Abstandsregeln.

Auch wenn man es nicht glaubt: HTML ist sehr einfach zu erlernen. Sobald man das Grundprinzip verstanden hat ist der Rest sehr einfach, nach ein paar Stunden kann jeder seine erste rudimentäre Webseite erstellen.

Wer versuchen will HTML Code zu lesen, dem kann ich die tolle Seite CSSZENGARDEN empfehlen, die sehr einfach und mit korrekter Semantik beschrieben ist. Einfach zur Seite surfen, irgendwo auf die rechte Maustaste klicken und "Quellcode anzeigen (Show source)" wählen. Im neu geöffneten Browserfenster kann man dann sehen, was hinter der Fassade steckt. Die zeitlose Dokumentation SelfHTML hilft danach bei den ersten Schritten zur eigenen Webseite ("Tutorials").

Interessiert an einem HTML-Anfängerkurs? Schreibt mir!


Keine Kommentare:

Kommentar veröffentlichen