Syntax
HTML-Tags
HTML-Seiten bestehen aus einem Satz von sog. HTML-Tags. Die HTML-Tags dienen dazu die Elemente einer Webseite semantisch zu spezifizieren. D. h. mit HTML-Tags kann z. B. ein Text als Überschrift oder als ein Absatz definiert werden. HTML-Tags sind Schlüsselwörter die in spitze Klammern gesetzt werden und selber nicht auf der Webseite dargestellt werden. Dabei treten HTML-Tags meistens paarweise auf. Diese werden dann als Start-Tag (oder Opening-Tag) und End-Tag (oder Closing-Tag) bezeichnet. Ein Start-Tag beginnt immer mit „<“ und endet mit „>“. Ein End-Tag beginnt immer mit „</“ und endet wie das Start-Tag mit „>“.
Die folgenden beiden Tags spezifizieren z. B. den dazwischenliegenden Text als Überschrift:
<h1>Das ist eine Überschrift</h1>
HTML-Elemente
Ein HTML-Element besteht i. d. R. aus einem Start-Tag, einem End-Tag und den dazwischen liegenden Element-Inhalt (Element-Content).
Beispiel 1:
Beispiel 2:
Beispiel 3:
Ein paar Elemente haben keinen Inhalt und werden deshalb im Start-Tag beendet:
<br /> = Zeilenumbruch
<hr /> = Horizontale Linie
Einige Elemente besitzen zusätzlich Attribute, mit denen der Inhalt genauer definiert werden kann. So muss z. B. bei einem Bild-Element (<img … />) als Attribut die Quelldatei angegeben werden. Außerdem kann bei einem Bild-Element zusätzlich z. B. noch die Breite angegeben werden:
Beispiel 4:
HTML-Elemente können auch verschachtelt werden. Im folgenden Beispiel wird mit dem „b“-Element ein Teil des „p“-Elements fett formatiert:
Beispiel 5:
Groß- und Kleinschreibung
Einfaches HTML ist nicht „case-sensitive“, d. h. Groß- und Kleinschreibung spielt keine Rolle.
Die folgenden vier Absätze sind in einfachem HTML identisch:
<p>Das ist ein Absatz!</p>
<P>Das ist ein Absatz!</P>
<p>Das ist ein Absatz!</P>
<P>Das ist ein Absatz!</p>
Auch bei Attribut-Namen spielt Groß- und Kleinschreibung keine Rolle.
Auch folgende HTML-Elemente werden identisch behandelt und dargestellt:
<img src=“MeinBild1.png“ width=“600“ />
<img SRC=“MeinBild1.png“ Width=“600“ />
<img sRc=“MeinBild1.png“ wiDtH=“600“ />
Es wird jedoch vom W3C empfohlen durchgängig kleine Zeichen für Tag- und Attribut-Namen zu verwenden!
Wie in Kapitel 1 bereits beschrieben, wurde XHTML entwickelt, um eine sauberere Syntax beim Erstellen von HTML-Seiten zu erzwingen.
Bei XHTML gibt es folgende verschärfte Syntaxregeln:
1. Das Doctype-Element ist Pflicht!
2. Die Elemente „html“, „head“, „title“ und „body“ müssen mindestens in einem Dokument enthalten sein!
3. Alle Elemente müssen geschlossen werden!
4. Elemente müssen korrekt verschachtelt werden!
5. Elementnamen immer in kleinen Buchstaben!
6. Attributnamen immer in kleinen Buchstaben!
7. Attributwerte immer in Anführungsstriche!
Auch wenn alle namhaften Browser einfaches HTML wesentlich toleranter behandeln, wird vom W3C empfohlen sich immer an die XHTML-Syntaxregeln zu halten. Damit kann das Problem vermindert werden, dass eine Webseite in unterschiedlichen Browsern unterschiedlich dargestellt wird, weil die einzelnen Browser einfaches HTML ggf. unterschiedlich tolerant behandeln.
Verwendung von Formatierungs-Tags
HTML-Elemente sollen heute per Definition die Elemente einer Webseite semantisch spezifizieren und keine Informationen zur Formatierung der Elemente beinhalten. In den Anfängen wurde HTML aber auch zur Formatierung von Elementen verwendet. So gibt es z. B. HTML-Elemente, mit denen Text „fett“ (<b>) oder „kursiv“ (<i>) dargestellt werden kann. Außerdem können auch über Element-Attribute Formatierungen vorgenommen werden, wie z. B. die dicke von Tabellen-Umrandungen (<table border=“2“>...</table>).
Solche Formatierungsdefinitionen werden heute i. d. R. vollständig mit CSS (Cascading Style Sheets) erstellt. Das W3C empfiehlt deshalb, möglichst keine Formatierungen mehr mit HTML zu definieren. Aus Gründen der Kompatibilität stellen alle aktuellen namhaften Browser solche Formatierungs-Tags jedoch immer noch korrekt dar.
Auch in diesem Tutorial gibt es ein Kapitel zu den Formatierungs-Tags und es werden teilweise auch Attribute verwendet, die den Inhalt formatieren. Dies hat den einfachen Grund, dass es dem Benutzer des Tutorials möglich sein soll, nur durch die Verwendung von HTML einigermaßen passable einfache Webseiten erstellen zu können. Im folgenden Tutorial „CSS“ werden dann konsequent keine HTML-Formatierungsdefinitionen mehr verwendet.
Kommentare werden nicht auf der Webseite angezeigt, sondern dienen nur der Dokumentation des HTML-Textes. Kommentare beginnen mit „<!--“ und enden mit „-->“. Dazwischen kann der Kommentar beliebigen Text enthalten.
Außerdem können Kommentare dazu verwendet werden ganze Passagen in einem HTML-Dokument auszukommentieren, um z. B. Fehler zu suchen oder verschiedene Möglichkeiten zur Strukturierung der Seite zu testen.
Eine weitere Besonderheit von HTML ist, dass Zeilenumbrüche in einem HTML-Dokument ignoriert werden. Dafür gibt es jedoch Elemente, wie z. B. Überschriften (<h1>...</h1>, <h2>...</h2>, ...) und Absätze (<p>...</p>), nach denen automatisch ein Zeilenumbruch eingefügt wird.
Außerdem werden beim Anzeigen von HTML-Dokumenten nur maximal ein Leerzeichen am Stück angezeigt. Mehrere Leerzeichen am Stück werden bis auf das erste Leerzeichen ignoriert.
Die minimale Struktur einer HTML-Seite ohne Inhalt, besteht aus folgenden Elementen:
| Element | Beschreibung |
| <!DOCTYPE ...> | Spezifiziert die HTML-Version für den Browser |
| <html> ... </html> | Umschließt das gesamte HTML-Dokument (ohne Doctype-Element) |
| <head> ... </head> | Umschließt den gesamten Header |
| <title> ... </title> | Spezifiziert den Titel der Webseite |
| <body> ... </body> | Umschließt den gesamten Inhalt der Webseite |
Der Header wird nicht auf einer Webseite angezeigt. Er dient zum einen dazu, zusätzliche Informationen zu hinterlegen, wie z. B. Autor oder Titel der Webseite. Zum anderen können im Header andere Dokumente, wie z. B. CSS-Dateien oder JavaScript-Dateien, mit der Seite verknüpft werden.
Der Titel, der mit dem „<title> ... </title>“-Element im Header spezifiziert wird, wird auf dem Reiter im Browser angezeigt und standardmäßig für den Namen des Lesezeichens verwendet, wenn die Seite als Lesezeichen abgelegt wird.