Die Sprachelemente von HTML

Dem Text bzw. Teilen des Textes im Dokument wird durch bestimmte Auszeichnungen (Markups) eine Struktur verliehen.

Die Auszeichnung basiert auf SGML-Elementen. Die meisten dieser Elemente werden durch Tag-Paare definiert. Einige kommen aber auch alleine als Standalone-Tags vor.
Der Begriff Tag kommt aus dem Englischen und bedeutet soviel wie Etikett, Anhänger oder Schlild.

Die HTML-Sprachelemente werden können in unterschiedliche Kategorien unterteilt werden.

HTML Tags

Tags werden in fast allen Fällen als Tag-Paar definiert.

Sie bestehen aus einem

Start-Tag: <Schlüsselwort>

und einem

End-Tag: </Schlüsselwort>

Dabei steht Schlüsselwort für einen "HTML-Befehl". HTML-Tags werden immer von spitzen Klammern umschlossen.

Ein Tag-Paar bildet zusammen mit dem dazwischenliegenden Inhalt ein HTML-Element.

<Schlüsselwort>Inhalt</Schlüsselwort>

Häufig beinhalten HTML-Tags auch Attribute, die dem HTML-Element zusätzliche Eigenschaften zuordnen. Bei manchen HTML-Elementen ist die Angabe bestimmter Attribute Pflicht, wenn es sich um ein valides HTML-Dokument handeln soll.

<Schlüsselwort Attribut="AttributWert"> Inhalt</Schlüsselwort>

Attribute in HTML-Tags

Ein HTML-Element kann durch zusätzliche Attribute ergänzt werden. Manche HTML-Elemente machen ohne zusätzliche Attribute keinen Sinn. Die Funktionalität des Attributs ergibt sich meistens direkt aus dem Attribut-Bezeichner.

Attribute werden innerhalb eines HTML-Elements definiert. Die Zuordnung zwischen Attribut-Bezeichner und Attribut-Wert erfolgt über das = Zeichen. Der Attribut-Wert muss in doppelte Anführungszeichen " gesetzt werden. Mehrere Attribute werden durch Leerzeichen getrennt.

<HTML-Element Attribut-Bezeichner1="Attribut-Wert1" Attribut-Bezeichner2="Attribut-Wert2" >

Kommentare in HTML-Dokumenten

Kommentare dienen zur Beschreibung der Funktionalität des Quelltextes.

Beim Debuggen von Quelltext kann man zur Funktionsprüfung Teile des Quelltextes "auskommentieren", d.h. in einen Kommentar verwandeln und somit aus der Ausführung herausnehmen. Man kann diese Teile dann einfach wieder durch Entfernen der Kommentar-Tags in Funktion setzen.

Auch in HTML-Dokumenten können Kommentare eingesetzt werden. Dabei gilt folgende Syntax:

<!-- Kommentartext -->

Kommentare dienen zwar der Übersichtlichkeit des Quelltextes bei der Erstellung. Jedoch werden die Inhalte des Kommentars jedes Mal mit dem HTML-Dokument übertragen und erhöhen den Traffic, was vor allem bei Funkkanälen unerwünscht ist. Dies sollte man immer berücksichtigen und bei fertigen HTML-Dokumenten die Kommentare aufs Nötigste reduzieren.

HTML Sonderzeichen

Da der Browser einige Zeichen, wie z.B. < als Befehl interpretieren würde, ist es notwendig, einige Zeichen als Sonderzeichen zu definieren. Für solche Zeichen gibt es in HTML eine spezielle Namensgebung, die HTML-Entitäts-Referenzen.

HTML-eigene Zeichen sind:

Verweise / Links / Hyperlinks

Grundlegende (und praktische) Elemente eines HTML-Dokuments sind Verweise (auch Links oder Hyperlinks).

Arten von Hyperlinks

Hyperlinks lassen sich in folgende Kategorien einteilen:

• interne Links: Verweise innerhalb des Dokuments / innerhalb der Seite.
• externe Links: Verweise auf andere Dokumente außerhalb der Seite im www.
• funktionale Links: Öffnen von PDF-Dateien oder Schreiben von E-Mails.

Syntax für Links

Der Tag für einen Link ist der Anchor-Tag:

<a href="Hyperlink">LinkText</a>

In den Anführungszeichen hinter dem href Attribut steht der Hyperlink auf das Dokument auf welches verwiesen wird.

LinkText steht für den Namen des Links, der standardmäßig blau und unterstrichen dargestellt wird.

Strukturierungselemente in HTML-Dokumenten

Die klassischen Strukturierungselemente für HTML-Dokumente sind Absätze, Überschriften, Tabellen und Listen.

In HTML5 kommen noch zahlreiche Strukturierungselemente hinzu, die dem Dokument eine semantische Struktur geben sollen. Diese HTML5-Strukturierungselemente sollten in einer gut programmierten Website auch genutzt werden, denn sie werden von Suchmaschinen bei der Indizierung der Website hinsichtlich der Inhalte genutzt. Der sinnvolle Einsatz der neuen Strukturierungselemente bewirkt ein besseres Ranking der Website.

Bilder in HTML-Dokumenten

Mit dem <img> Tag lassen sich Bilder und Fotos in HTML-Dokumente integrieren.

Zusätzlich bietet HTML5 das <figure> Element an, mit dem man Bilder komfortabel platzieren und mit Beschriftungen versehen kann.

Folgende Aspekte sind beim Einfügen von Bildern unbedingt zu berücksichtigen:

• Dateiformat: Nur *.gif, *.png und *.jpg Dateien werden von allen Browsern akzeptiert. Die meisten Browser stellen auch *.svg Dateien korrekt dar.
• Bild-Größe: Im Sinne von schnellen Ladezeiten sollten die Bilder möglichst klein gehalten werden. Dabei muss natürlich ein Kompromiss zwischen Dateigröße und Darstellungsqualität eingegangen werden. Häufig bringt auch die Anpassung des Dateiformats an das jeweilige Bild große Unterschiede bezüglich der Ladezeiten.
• Urheberrechte: Die Urheberrechte des Erstellers des Bildes aber auch von abgebildeten Objekten oder Personen müssen in jedem Fall berücksichtigt werden! Zuwiderhandlungen können sehr teuer werden!!!