Aufbau von HTML

Da HTML eine Auszeichnungssprache ist, bestehen HTML-Dateien aus dem eigentlichen Inhalt und den Auszeichnungen. In HTML heißen diese Auszeichnungen "Elemente" und dienen dazu, den gesamten Text zu strukturieren.

zum Anfang der SeiteHTML-Elemente

Die einzelnen Abschnitte einer HTML-Datei können als bestimmter Teil der Struktur ausgezeichnet werden. Für jede Struktur, die in HTML definiert werden kann (z.B. Überschriften, Texte, Listen, Tabellen, Hyperlinks, Formulare), gibt es ein entsprechendes Element. Die Bezeichnungen der HTML-Elemente sind meist Abkürzungen der entsprechenden englischen Namen.

Struktur Name englisch Bezeichnung des HTML-Element
Absatz paragraph p
Überschrift heading h1 bis h6 (unterschiedliche Größen)
Bild image img
Betonung emphasis em
Abkürzung abbreviation abbr

Welche HTML-Elemente es gibt, wird durch die verwendete HTML-Version genau vorgegeben.

zum Anfang der SeiteTags

https://de.wikipedia.org/wiki/Tag_(Informatik)

Werden HTML-Elemente als Auszeichnung in eine HTML-Datei eingebaut, so nennt man diese Auszeichnung "Tag" [Aussprache (PONS): tag ⇢I.1]. Diese Bezeichnung ist vom englischen Wort "tag" entlehnt, welches Etikett, Namens- oder Bezeichnungsschild bedeutet; daher wird das "neudeutsche" Wort Tag auch genauso wie im englischen ausgesprochen.

Im Tag wird die Bezeichnung des HTML-Elements als Zeichenfolge für die Auszeichnung verwendet, z.B. p für paragraph, Absatz.

Um den Tag vom Inhalt unterscheiden zu können, wird er mit spitzen Klammern ("kleiner als"- und "größer als"-Zeichen) eingeschlossen. Somit sieht z.B. der Tag für Absätze so aus: <p>.

Tipp: Auf der Computertastatur befinden sich diese Zeichen (in der Regel) gemeinsam auf der Taste ganz links in der untersten Zeile.
Um "<" einzutippen einfach auf die Taste tippen, um ">" zu tippen dabei die Umschalt-Taste gedrückt halten.
Anmerkung: Auf englisch heißt diese Taste "shift" (bewegen, umschalten), auf deutschen Tastaturen wird ein Pfeil nach oben (⇧) als Symbol verwendet: daher wird beim Tippen von Tasten mit Doppelbelegung immer das obere Zeichen eingefügt, wenn die Umschalt-Taste gedrückt ist.

Alles was im Code von HTML-Dateien innerhalb von spitzen Klammern notiert ist, sind daher Tags und werden vom Browser dementsprechend als Auszeichnungen interpretiert.

Alles was im Code außerhalb der spitzen Klammern notiert ist, ist Inhalt und wird vom Browser dargestellt. Wenn in body.

zum Anfang der SeiteGültigkeitsbereich

HTML-Elemente werden als Auszeichnung immer einem Abschnitt des Inhalts zugewiesen – manche einer Position im Inhalt. Für diesen Bereich gelten sie dann und sind dort wirksam.

Dieser Gültigkeitsbereich wird im Code durch Tags markiert, bei denen es zwei Ausprägungen gibt. Wo der Gültigkeitsbereich beginnt, wird ein Anfangstag notiert, wo er endet, wird ein Endtag notiert. Dabei wird auch hier der Wortteil "…tag" wiederum englisch ausgesprochen.

Der Anfangstag besteht aus der Bezeichnung des gewünschten HTML-Elements, welche in spitze Klammern eingeschlossen wird, z.B. <p>.
Der Endtag sieht genauso aus, nur dass der Bezeichnung des HTML-Elements ein (normaler) Schrägstrich vorangestellt wird, z.B. </p>.
Dabei muss natürlich für den Endtag des selbe HTML-Element wie beim Anfangstag verwendet werden.

Tipp: Auf der Computertastatur befindet sich (normaler) Schrägstrich auf der Taste der Ziffer 7, etwa in der Mitte der obersten Zeile (die Zeile mit Zeichen, nicht die Zeile mit Funktionstasten). Um "/" einzutippen die Umschalt-Taste gedrückt halten und die Taste "7" tippen.

  Notierung im Code Beispiele
Anfangstag <Bezeichnung des HTML-Elements>  <p>,  <em>,  <abbr>
Endtag
 </Bezeichnung des HTML-Elements> </p>, </em>, </abbr>

Anmerkung: Im manchen Unterlagen wird der Anfangstag auch "Starttag" oder "öffnendes Tag" genannt, der Endtag wird auch "schließendes Tag" genannt.

Anmerkung: < /> -> XHTML

Die Notierung von Tags in HTML-Dateien ist vergleichbar mit dem System von Verkehrsschildern auf einer Straße.

Deren Gültigkeit reicht vom ersten Schild ("Anfangs"-Schild", das anzeigt welche Vorschrift hier gilt, bis zum passenden "Ende"-Schild. Dieses hat die selbe Beschriftung, welche aber durchgestrichen dargestellt wird.

Anfangstag und Endtag

Im Beispielsbild gilt die Geschwindigkeitsbeschränkung - hier Gelb eingefärbt - vom Anfangsschild mit der Beschriftung 30 "(30)" bis zum Endeschild mit der selben Beschriftung, wobei diese durchgestrichen dargestellt wird "(/30)".

Genauso funktioniert der Gültigkeitsbereich in HTML. Dem Anfangsschild entspricht der Anfangstag mit der Bezeichnung des HTML-Elements, also z.B. <p> für den Beginn eines Absatzes (paragraph). Dem Endeschild entspricht der Endtag mit der selben Bezeichnung aber durchgestrichen dargestellt, bei HTML im Tag mit einem vorangestellten Schrägstrich "/" notiert, also z.B. </p>. Zwischen beiden Tags ist das HTML-Element gültig.

Verkehrsschilder: (30) … hier gilt es … (/30)
HTML: Anfangstag … Gültigkeitsbereich … Endtag
Beispiel: <p> Dieser Text wird als Absatz angezeigt. </p>

zum Anfang der Seiteinhaltsleere Elemente

Es gibt auch Elemente ohne Gültigkeitsbereich, dessen "Wirkung" sich auf eine einzige Stelle beschränkt: z.B. ein Bild oder ein (harter) Zeilenumbruch, der immer an der selben Stelle sein soll. Solche Elemente werden inhaltsleer oder auch standalone genannt.

Tags von inhaltsleeren Elementen

Sie werden mit einem einzelnen Tags (nur Anfangstag, kein Endtag) notiert; z.B. <br> für break, den (harten) Zeilenumbruch.
 unterschiedlich in HTML und XHTML
HTML: z.B. <br> für break = fester Zeilenumbruch
XHTML: <br /> (Endtag durch Schrägstrich "integriert")

<P>

zum Anfang der Seiteersetzte Elemente

Z.B. Bilder; eine weitere Datei (Bilddatei: Foto, Grafik) wird nachgeladen und an dieser Stelle eingesetzt.

Block- bzw. Inline-Elemente (welche Kategorien?)

Inline-Elemente sind in Zeilen, ihr Inhalt ist also eine Folge von Zeichen, die auch am Ende der Zeile umgebrochen sein können.
Vergleichbar mit Format - Zeichen in Word

Block-Elemente bewirken einen rechteckigen Block um ihren Inhalt. Das bedeutet, sie erzeugen immer einen Zeilenumbruch an ihrem Ende. Besteht der Inhalt aus Text, so bleibt der Platz nach dem letzten Zeichen leer (Zeilenumbruch).

Vorgriff Verschachtelung:

Mit anderen Worten: Sobald ein in einem Block-Element ein Inline-Element vorkommt, dürfen darin nur noch weitere Inline-Elemente sein, aber keine Block-Elemente.

zum Anfang der SeiteVerschachtelung

HTML-Elemente können in HTML-Dateien hintereinander stehen, sie können aber auch "verschachtelt" sein, also ein Element befindet sich innerhalb eines anderen.

 Verschachteln von HTML-Elemente (siehe Verschachtelung - Strukturbaum - Strukturpfad)

Elemente verschachtelt

Wichtig dabei ist, dass die Verschachtelung  korrekt ist: Ein Element muss komplett innerhalb eines anderen sein. So kann eine betonte Textstelle (mit em=emphases) innerhalb eines Absatzes (mit p=paragraph) stehen: <p> … <em> … </em> … </p>.

Nicht korrekt wäre: <p> … <em> … </p> … </em>.

Auch hier Darstellung von Schachteln durch "Striche" darunter oder Kästchen.

zum Anfang der SeiteAttribute

Tags können noch weitere, zusätzliche Informationen für den Browser enthalten. Die Eigenschaft der Information heißt Attribut, und diesem wird der gewünschte Wert zugewiesen.

Die Namen der HTML-Attribute sind meist Abkürzungen der entsprechenden englischen Begriffen, wie z.B. lang für die Angabe einer Sprache (language) und src für die Angabe der Quelle einer Datei (source). Die Werte, die für die Attribute angegeben werden, können Zahlen, Schlüsselwörter (wie z.B. "en" für Englisch) oder Dateinamen mit Pfadangabe sein.

HTML-Attribute bestehen immer aus der Attributbezeichnung und dem gewünschten Wert, der unter Anführungszeichen ("Gänsefüßchen") geschrieben ist. Zwischen Attributbezeichnung und Wertangabe steht ein Ist-Gleich-Zeichen (=). Ist z.B. ein Absatz in englischer Sprache geschrieben, so kann diese Information so angegeben werden: <p lang="en">.

Es können auch mehrere Attribute gleichzeitig verwendet werden. Diese werden dann nacheinander - mit Leerzeichen (Abstand) getrennt - verwendet. Ist z.B. ein Absatz in englischer Sprache geschrieben und soll eingeblendet werden, dass es sich um "edles Oxford-English" handelt, so kann diese Information so angegeben werden: <p lang="en" title="Reinstes Oxford-English.">. Splendid, isn't it indeed!

Genauso wie bei den Verkehrsschildern die Zusatzinformationen nur auf den Anfangsschildern stehen, stehen in HTML-Dateien die Attribute nur in den Anfangstags.

Welche Attribute es gibt und welche Werte sie annehmen können, wird durch die verwendetet HTML-Version genau vorgegeben.

Element mit Attribut

Verkehrsschilder: (30 bei Schnee) … hier gilt es … (/30)

HTML:  Anfangstag mit Attribut(e)   …    Gültigkeitsbereich    …    Endtag
Beispiel:         <p           lang="en">   This paragraph is in English.        </p>
Beispiel:         <p lang="en" title="Oxford-English">Splendid, isn't it?</p>

Bei einigen HTML-Elementen gibt es Attribute, die auf alle Fälle benötigt werden, diese heißen dann verpflichtend und müssen verwendet werden.

Einige Attribute gibt es nur bei einzelnen HTML-Elementen. Einige Attribute kann man aber bei allen HTML-Elementen verwenden, diese heißen dann Universal-Attribute. Man kann sie bei allen HTML-element verwenden, da sie keine spezielle Information für ein bestimmtes HTML-Element beschreiben, sondern allgemeine Informationen wie z.B. die Sprache.

Darstellung der einzelnen, Aufbauregeln, Beispiele

XXXXX

Unterschiede von tags in verschiedenen Versionen von (X)HTML

depredated, obsolet

zum Anfang der Seitelogische gegenüber physikalische Auszeichnung

Unterschied logische Auszeichnung (z.B. <strong>, <em>) gegenüber physikalischer Auszeichnung (z.B. <b>, <i>)

zum Anfang der Seitehierarchischer Aufbau

Aufbau von HTML-Dateien (<!DOCTYPE>, <html>,<head>,<body>)

Vereinfachte Darstellung:

<!DOCTYPE html>
<html>
<head>
   … (Meta)Angaben zur Darstellung … 
</head>
<body>
   … Texte und Multimediainhalte, die im Browserfenster 
     dargestellt werden … 
</body>
</html>

Valides (korrekte)  bzw. empfohlenes Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
   <title> … </title>
   <meta charset="utf-8">
</head>
<body>

</body>
</html>

Darstellung

whitespace

Weißraum wird der freie Raum zwischen und um den Text genannt. Er entsteht durch Zeilenumbrüche, Einrückungen und Abständen zwischen den Wörtern und Absätzen.

In HTML werden unter whitespace die Zeichen, HTML-Elemente und Methoden der Darstellung im Browser verstanden, die diesen freien Raum erzeugen.

benannte Zeichen (entities)

https://de.wikipedia.org/wiki/Entit%C3%A4t_(Auszeichnungssprache)

In den Anfangszeiten von HTML gab es zum Speichern der Zeichen eines Textes "Codetabellen" (todo Name) die nur 256 Zeichen umfassten. Es gibt jedoch in vielen Sprachen spezifische Zeichen, die nur in dieser Sprache vorkommen, wie z.B. die Umlaute in der deutschen Sprache. Da all diese Zeichen mehr als 256 sind, passten sie nicht in eine einzige "Codetabelle". (todo Name) Daher gab es für unterschiedliche Sprachen auch jeweils eigene länderspezifische "Codetabellen". (todo Name)

Schriftzeichen aus unterschiedlichen Sprachen, die nicht in der selben "Codetabelle" (todo Name) sind, könnten daher nicht gleichzeitig in der selben Datei verwendet werden.
Weiters wurden in den unterschiedlichen Betriebssystemen der verschiedenen Computer eigene "Codetabellen" (todo Name) verwendeten, die sich ebenfalls unterschieden.

Um sicher zu gehen, dass alle Zeichen korrekt im Browser dargestellt werden, verwendete man nur die Zeichen aus der ersten Hälfte der  "Codetabellen" (todo Name), da diese in allen "Codetabellen" (todo Name) gleich waren (entspricht dem ASCII-Code mit 7 bit).
Um nun auch alle anderen Zeichen außerhalb des ASCII-Codes verwenden zu können, gibt es in HTML "benannte Zeichen", auch "entities" genannt. Dies sind Umschreibungen für die länderspezifischen Zeichen. Diese Umschreibungen werden im HTML-Quellcode verwenden und bestehen nur aus Zeichen aus der ersten Hälfte der "Codetabellen" (todo Name), wodurch gewährleistet ist, dass sie korrekt gespeichert und beim Lesen auch wieder korrekt interpretiert werden können. In der Darstellung des Textes im Browser wird dann anstelle der Umschreibung die Darstellung des Zeichens verwendet . So wird z.B. beim Pfund-Zeichen (Währung in Großbritannien) aus &pound; im HTML-Quellcode die Darstellung £ im Browser.
Weiters konnte man damit Zeichen aus unterschiedlichen "Codetabellen" (todo Name) gleichzeitig in der selben HTML-Datei benutzen.

Beispiele für Umschreibungen für Zeichen, die nicht im ASCII-Code vorhanden sind, wie z.B. länderspezifische Zeichen wie deutsche Umlaute oder Sonderzeichen wie Währungssymbole, unterschiedliche Anführungszeichen, mathematischen Symbole: &uuml; für "kleines u Umlaut = ü", &Auml; für "großes A Umlaut = Ä", &szlig; für "Ligatur (zwei zusammen dargestellte Schriftzeichen) aus s und z = ß", &euro; für "Euro = €", &times; für "Mal (Multiplikation) = ×".
Wie man sieht besteht die Umschreibung immer aus einem "&" am Beginn (leitet das benannte Zeichen ein), dem vorgegebenen Namen (nur mit Zeichen aus dem ASCII-Code) und einem ";" (Strichpunkt) am Ende (beendet das benannt Zeichen).

Bei der Verwendung von Unicode als "Codetabelle" (todo Name) - erkennbar an charset=utf-8 in einen der <meta …>-Tags im <head>-Bereich des HTML-Quellcodes - sind benannte Zeichen nicht mehr notwendig, da alle (aktuellen) Computer die selbe "Codetabelle" (todo Name) verwenden.
MAN DARF NICHT NACHTRÄGLICH EINFACH ÄNDERN!

Ausnahmen, auch wenn man Unicode verwendet:
Werden im Text HTML-eigene Zeichen wie <, > und & verwendet, so müssen diese im HTML-Quellcode durch benannte Zeichen "maskiert" werden. Denn diese Zeichen haben im HTML-Quellcode eine bestimmte Funktion und würden daher eine unerwünschte Wirkung auslösen.
Erklärung: Das "kleiner" Zeichen bzw. "spitze Klammer auf" Zeichen im HTML-Quellcode würde bedeuten "jetzt beginnt ein HTML-Tag". Würde die Textstelle "a<b" (a kleiner b) genau so im HTML-Quellcode stehen, würden Browser <b  als den Anfangstag für "bold" interpretieren und dann meinen, dass das schließende "größer" Zeichen bzw. "spitze Klammer zu" Zeichen fehlt - auf alle Fälle ist die Gefahr groß, dass der Browser den Text nicht wie gewünscht darstellt.
Das gleiche gilt für das "kaufmännische Und" welches im Quellcode ein benanntes Zeichen einleitet. Würde die Textstelle "GmbH & Co" genau so im HTML-Quellcode stehen, würden Browser & Co als den Anfang eines benannten Zeichen "Co" interpretieren und dann meinen, dass der schließende Strichpunkt fehlt - auf alle Fälle ist die Gefahr groß, dass der Browser den Text nicht wie gewünscht darstellt.
Meist wird empfohlen, dass auch Anführungszeichen " (manchmal auch Gänsefüßchen genannt) umschrieben werden, da auch sie im HTML-Quellcode eine Bedeutung haben: Sie umschließen die Werte bei HTML-Attributen (z.B. <a href="impressum.html">). Somit könnten Browser z.B. bei <p>"Mehr Licht" sollen die letzten Worte von Johann Wolfgang von Goethe gewesen sein.</p> im Quellcode die Stelle "Mehr Licht" als den Wert eines Attributs interpretieren und dann meinen, dass der Anfangstag <p> zu früh geschlossen ist und der Attributname fehlt - auf alle Fälle ist die Gefahr groß, dass der Browser den Text nicht wie gewünscht darstellt.
So werden die HTML-eigenen Zeichen im HTML-Quellcode umschrieben:

Zeichen Name in HTML Übersetzung
< &lt; lower then = Kleiner-Zeichen
> &gt; greater then = Größer-Zeichen
& &amp; ampersand = kaufmännisches Und (Et-Zeichen)
" &quot; quotes (quotation marks) = Anführungszeichen


Weiters gibt es einige Zeichen die man in Unicode (mit charset=utf-8) direkt im Quellcode stehen haben kann, die man aber trotzdem besser mit benannten Zeichen in den HTML-Quellcode eingibt bzw. stehen hat:

Zeichen Name in HTML Übersetzung und Erläuterung
   &nbsp; non breaking space = Geschütztes Leerzeichen
Die direkte Darstellung im HTML-Quellcode würde sich von einem normalen Leerzeichen nicht unterscheiden und es wäre daher nicht erkennbar.
­ &shy; soft hyphen = bedingter Bindestrich (nicht Trennstrich)


nicht auf Tastatur
um sicher zu gehen


Man kann die benannten Zeichen auch dann verwenden, wenn man nicht weiß, wie man sie direkt über die Tastatur eingeben kann. Dann tippt man einfach die Umschreibung in den HTML-Quellcode ein oder kopiert sie aus einer Zeichenreferenz-Tabelle in den HTML-Quellcode.

Eingabe Zeichen mit Tastatur:
Viele Zeichen wie die deutschen Umlaute kann man auf einer Tastatur (mit deutschem Layout) direkt eintippen.
Für einige Zeichen wie @ und € gibt es Tastenkombinationen (Windows: AltGr+Q und AltGr+E; Apple: Alt+L und Alt+E - Anmerkung: Auf einigen Apple-Tastaturen ist die Alt-Taste mit "⌥" oder "Option" beschriftet. ).
https://de.wikipedia.org/wiki/Wahltaste
Theoretisch kann man alle Zeichen des Unicodes über Tastatur-Codes eingeben (Windows, Apple, Linux?)

Eingabe benanntes Zeichen mit Tastatur:
Im HTML-Quellcode eintippen (siehe Zeichenreferenz-Tabelle)

Eingabe benannter Zeichen über Menü:
Expression Web: Menü Einfügen, Symbol
BlueGriffon: Menü Einfügen, Zeichen und Symbole

Anmerkung: Verwendet man Unicode (mit charset=utf-8) kann man Umlaute direkt in HTML-Quellcode stehen haben und braucht diese nicht mit benannten Zeichen umschreiben.

Kommentare

Kommentare: In den HTML-Code (und anderen formalen Sprachen) kann man auch Kommentare einfügen. Das sind Texte, die der Browser ignoriert und nicht benutzt. Kommentare dienen der/dem AutorIn, um Zusatzinformationen an beliebigen Stellen im Code zu schreiben: z.B. um Stellen zu markieren und wiederfinden, Erläuterungen oder Hinweise zu haben etc.

In HTML beginnt ein Kommentar mit <!-- und mit -->) endet er (in CSS: /* und */). Alles was dazwischen geschrieben steht, wird vom Browser nicht interpretiert.

Da Kommentare vom Browser nicht interpretiert werden, kann man hier Umlaute und Sonderzeichen verwenden

Vorsicht: Der gesamte Text zwischen <!-- und --> (bzw. /* und */) ist Kommentar und wird ignoriert, auch um einen Zeilenumbruch herum. Will man Kommentare über zwei Zeilen verfassen, so dürfen keine HTML-Elemente dazwischen sein. Ansonsten muss man den Kommentar in zwei Teile teilen.
Beispiele aus HTML, CSS und andere Sprachen funktionieren gleichermaßen::