Grundstuktur

Dokumententypen (alt)

HTML 4.01

strict: strenge Variante von HTML 4.01, die viele alte Zöpfe abschneidet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
loose (transitional): erlaubt die Verwendung von abgeschafften (deprecated) Tags und soll den Übergang von HTML 3 zu 4 erleichtern
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
frameset: wie loose aber noch mit Unterstützung für Frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Jedes gültige SGML-Dokument, und damit auch jedes HTML-Dokument, muss in seiner ersten Zeile angeben, um welche Art von Dokument (Dokumententyp) es sich handelt. Hierdurch werden die möglichen Tags und Attribute festgelegt, die in dem Dokument vorkommen dürfen. Die Angabe des Dokumententyps erfolgt mithilfe der sogenannten Dokumententypdeklaration und dem speziellen SGML-Element <!DOCTYPE ...>. Details zu dem Aufbau einer Dokumententypdeklaration würden den Rahmen dieses Dokumentes sprengen, werden aber in entsprechenden Büchern und Vorlesungen zu XML behandelt.

HTML 4.01 kennt drei verschiedene Dokumententypen, und zwar abhängig davon, wie streng die HTML-Datei dem Standard folgen soll.

Dokumententypen (aktuell)

HTML5

nur noch eine einzige, einfache doctype-Deklaration
<!DOCTYPE html>

HTML5 kommt mit einem einzigen Dokumententyp aus und verabschiedet sich weitgehend von den SGML-Artefakten in der Deklaration. Da HTML5 als lebender Standard auch keine Versionen mehr kennt, wird nur noch html als Typ angegeben.

Eine erste HTML-Seite

Source-Code

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine erste Seite</title>
</head>

<body>
  <p>Ein Absatz</p>
</body>

</html>

Ergebnis

Zeichenkodierung (encoding)

Zeichenkodierung legt fest, als welche Bytefolge ein Zeichen abgelegt wird

Unterschiedliche Zeichenkodierungen sind im Einsatz, z. B.

Codepage 850 – Ä entspricht 8E
ISO-8859-1 – Ä entspricht C4
Unicode (UCS2) – Ä entspricht 00 C4
UTF-8 – Ä entspricht C3 84

Zeichenkodierung ist eine Eigenschaft der Datei und wird im HTTP-Header mitgesendet

Bei der Zeichenkodierung (character encoding) geht es um die Frage, als welches Byte oder als welche Bytefolge ein Zeichen dargestellt werden soll. Für die Zeichen des lateinischen Alphabetes, wie sie im Englischen verwendet werden (A-Z, a-z, 0-9) ist die Abbildung auf Bytes noch relativ einfach, da in den allermeisten Fällen ASCII zum Einsatz kommt. Da aber ASCII nur ein 7-Bit-Code ist und damit nur 127 unterschiedliche Zeichen kodieren kann, kommt es bereits bei den Deutschen Sonderzeichen (äöüß) zu Problemen, da diese im ASCII nicht vorkommen. Weiterhin gibt es auf Großrechnern mit EBCDIC eine alternative und mit ASCII nicht kompatible Kodierung.

Beispielsweise kann das deutsche Sonderzeichen „Ä“ abhängig von der Codierung auf ganz unterschiedliche Bytefolgen abgebildet werden.

Übertragung der Zeichenkodierung im Header funktioniert nicht

bei lokalen Dateien
wenn Server die Codierung nicht kennt

In diesem Fall Angabe in der Datei

HTML5
<meta charset="UTF-8">
HTML 4.01 (alt)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Damit eine HTML-Seite von einem Browser korrekt interpretiert werden kann, muss also angegeben werden, in welcher Codierung das Dokument vorliegt. Diese Information kann im Rahmen des HTT-Protokolls vom Server an den Browser als Teil des HTTP-Headers übertragen werden. Dies hilft aber nicht, wenn man die Datei lokal öffnet oder der Server die Codierung nicht kennt bzw. Dateien unterschiedlicher Kodierung auf einem Server verwaltet werden.

Die Information, in welcher Codierung eine HTML-Datei vorliegt, ist eine Eigenschaft der Datei und sollte grundsätzlich in dieser angegeben werden. Gibt man diese Information nicht an, darf man ausschließlich ASCII verwenden, muss also alle Sonderzeichen durch entsprechende HTML-Entitäten ersetzen.

Die Kodierung wird in HTML 4.01 mithilfe eines <meta>-Tags angegeben:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Zeichensatz (Font)

Ein Zeichensatz (Font) definiert das Aussehen eines Zeichens

ÄÖÜabc123 → Helvetica Neue
ÄÖÜabc123 → Times New Roman
ÄÖÜabc123 → Palatino
ÄÖÜabc123 → Comic Sans
ÄÖÜabc123 → Courier

In HTML können über CSS verschiedene Fonts innerhalb eines Dokuments genutzt werden

Der Zeichensatz (Font) legt fest, wie die einzelnen Zeichen dargestellt werden sollen, wie also die Schriftart des Dokumentes ist. Anders als die Zeichenkodierung ist der Zeichensatz (Font) eine Frage der Darstellung und nicht zwingend mit dem Dokument verknüpft, da man ein und dasselbe Dokument mit unterschiedlichen Zeichensätzen darstellen kann. Man kann auch innerhalb eines HTML-Dokuments unterschiedlichen Zeichensätze verwenden.

Regeln für HTML-Dokumente

Formatierung des Dokumentes ist irrelevant

Leerzeichen, Tabulator und Zeilenvorschub sind nur Trenner
Einrückung dient nur Lesbarkeit, wird vom Browser ignoriert

Kommentare analog zum XML und SGML

Bestimmte Sonderzeichen müssen kodiert werden

< als <
> als >
& als &
" als "

HTML-Entitäten

HTML-Dokumente in ASCII-Codierung (7-Bit) können auch Sonderzeichen enthalten

Über den Unicode-Wert

&#DDDDD; in dezimaler Schreibweise, z. B. &#228; für ä
&#xHHHH; in hexadezimaler Schreibweise, z. B. ä für ä

Über eine benannte Entität (Teil des HTML-Standards)

ä und Ä für ä und Ä
ö und Ö für ö und Ö
ü und Ü für ü und Ü
ß für ß

Bei HTML-Entitäten handelt es sich um ein weiteres Erbe aus der SGML-Welt: Da SGML-Dokumente spezielle Zeichen für die Auszeichnung verwenden (vor allem die spitzen Klammern), können diese nicht im normalen Text vorkommen. Um diese Zeichen im Text verwenden zu können, müssen Sie durch sogenannte Entitäten ersetzt werden, also z. B. < durch < und > durch >. Sonderzeichen können über ihren Unicode-Code-Punkt angeben werden (dezimal als &#nnnn;, hexadezimal als &#xhhhh;) oder durch eine entsprechend vordefinierte Entität, die es für viele gängige Sonderzeichen gibt, z. B. Ä für „Ä“.

Tags in (X)HTML

Tags markieren Abschnitte im Text

Name in spitzen Klammern, z. B. <h2>
Schließendes Tag wird durch / gekennzeichnet, z. B. </h2>
Gleicher Name für öffnendes und schließendes Tag
<h2>Überschrift</h2>
XHTML ist case sensitive (Kleinschreibung), HTML nicht
Tags können verschachtelt werden
<h2><em>Überschrift</em> mit Text</h2>

Leere Tags

Es gibt Tags ohne Inhalt (leere Elemente), z. B. <br>
Damit HTML eine Baumstruktur behält, muss es zu jedem öffnenden ein schließendes Tag geben

Tag kann sich selber schließen, z. B. <br/>
Tag als leeres Element schreiben, z. B. <br></br>

Achtet in der Praxis niemand drauf

<img ...>
<br>
<input ...>

Attribute in (X)HTML

Öffnende Tags können Attribute enthalten

Paar aus einem Namen und einen Wert
Wert wird in Anführungszeichen geschrieben (XHTML)
<h2 id="level2">Überschrift</h2>
Universalattribute sind bei jedem Tag möglich

id: eindeutige ID für das Element (für Skripte)
class: Name der CSS-Klasse im Stylesheet
style: eingebettete Style Sheet Attribute
title: Erläuterung zum Element
lang, dir: Sprache und Laufrichtung des Textes

HTML5-Erweiterungen

Einige bestehende Tags wurden erweitert

Jedes HTML-Element kann ein class-Attribut tragen
id-Attribut darf dieselben Zeichen wie class enthalten
Bei <script> ist nun standardmäßig type="text/javascript"
Bei <style> ist nun standardmäßig type="text/css"
Elemente können mit contenteditable="true" editierbar gemacht werden

HTML-, XHTML-Syntax und XHTML

Drei Möglichkeiten für HTML5-Dokumente

HTML-Syntax: die lockeren HTML-Regeln gelten
XHTML-Syntax: man schreibt HTML aber nach XML-Regeln
Echtes XHMTL-Dokument: man schreibt ein XML-Dokument, kein HTML-Dokument

HTML-Syntax

HTML-Syntax: <!DOCTYPE html>

Tags und Attribute können groß- oder kleingeschrieben werden
schließende Tags dürfen fehlen
Anführungszeichen dürfen bei Attributen fehlen
Attribute ohne Wert sind zulässig

<!DOCTYPE html>
<meta charset="UTF-8">
  <title>Hallo</title>
<body>
  <p>Hello World.
  <FORM METHOD=POST>
    <input type=CHECKBOX checked>Item 1
    <INPUT type=checkbox>Item 2
  </FORM>

XHTML-Syntax

XHTML-Syntax: <!DOCTYPE html>

alle Tags und Attribute in Kleinschreibung
alle Tags geschlossen (auch leere Tags), ebenentreu verschachtelt
alle Attribute mit Anführungszeichen und alle Attribute mit Wert

<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8"/>
  <title>Hallo</title>
</head>
<body>
  <p>Hello World.</p>
  <form method="POST">
    <input type="checkbox" checked="checked"/>Item 1
    <input type="checkbox"/>Item 2
  </form>
</body></html>

Echtes XHTML

Dokument ist ein echtes XML-Dokument

Regeln für XHTML-Syntax gelten
Browser verzeiht keine Verstöße gegen XML-Regeln

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Hallo</title>
</head>
<body>
  <p>Hello World.</p>
  <form method="POST">
    <input type="checkbox" checked="checked"/>Item 1
    <input type="checkbox"/>Item 2
  </form>
</body>
</html>

Ausführung von Skripten

Ausführungszeitpunkt von Skripten lässt sich steuern

Attribut	Auswirkung
-	Skript wird sofort geladen und ausgeführt
`async`	Skript wird asynchron geladen und ausgeführt
`defer`	Skript wird erst ausgeführt, wenn das DOM geladen ist