HTML/Regeln/Element, Tag und Attribut

Aus SELFHTML-Wiki
< HTML‎ | Regeln
Wechseln zu: Navigation, Suche

HTML-Dateien bestehen aus dem normalen Text, den der Besucher der Webseite später sehen wird. Hinzu kommt der Code, der den Text semantisch (nach seiner Bedeutung) markiert, also definiert, was beispielsweise ein Absatz oder eine Überschrift ist. Dieses Markup verwendet Zeichen aus dem normalen Zeichenvorrat, also keine unsichtbaren Steuerzeichen wie Textverarbeitungsprogramme.


Markup[Bearbeiten]

Das Markup oder der HTML-Code besteht aus Klartext für den Inhalt und den Elementen.

Elemente und Tags in HTML[Bearbeiten]

Der Inhalt von HTML-Dateien wird mit HTML-Elementen ausgezeichnet. HTML-Elemente werden durch so genannte Tags (engl. für Etikett) markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der „Gültigkeitsbereich“ des entsprechenden Elements. Tags werden in spitzen Klammern notiert.

Beispiel ansehen …
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Elemente und Tags</title> </head> <body> <h1>HTML - die Sprache des Web</h1> </body> </html>
Das Beispiel zeigt eine Überschrift 1. Ordnung, die durch das h1-Element ausgezeichnet ist.
Das einleitende Tag <h1> signalisiert, dass eine Überschrift 1. Ordnung folgt (h = heading = Überschrift). Das abschließende Tag </h1> signalisiert das Ende der Überschrift. Ein abschließendes Tag beginnt mit einer öffnenden spitzen Klammer und einem Schrägstrich </.


alleinstehende Elemente[Bearbeiten]

Es gibt auch einige Elemente mit „Standalone-Tags“. Dies sind leere Elemente, die keinen Inhalt haben und deshalb nur aus einem Tag bestehen statt aus Anfangs- und End-Tag.

Leere Elemente sind: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Beispiel ansehen …
<h1>Vor dem Tor</h1> <p><img src="...Park_an_der_Ilm.jpg" alt="Park an der Ilm"> Vom Eise befreit sind Strom und Bäche<br> Durch des Frühlings holden, belebenden Blick,<br> ...
Innerhalb des Absatzes befindet sich ein img-Element. Da es selbst keinen Inhalt hat, sondern eine externe Grafik referenziert, benötigt es auch kein schließendes Tag.
Am Ende der zweiten Zeile signalisiert <br>, dass ein manueller Zeilenumbruch eingefügt werden soll (br = break = Umbruch). Auch dieses Element hat nur ein Tag.

Exkurs: XHTML[Bearbeiten]

Beachten Sie: Bei HTML spielt es keine Rolle, ob die Elementnamen in den Tags in Klein- oder Großbuchstaben notiert werden. Dort bedeuten z.B. <h1> und <H1> das Gleiche. Im XML-basierten XHTML müssen die Elementnamen dagegen klein geschrieben werden. Es ist deshalb zu empfehlen, die Elementnamen immer klein zu schreiben, egal ob Sie HTML oder XHTML schreiben wollen.
Beachten Sie: Wenn Sie XHTML-gerecht schreiben wollen, müssen Sie Elemente mit Standalone-Tags anders notieren: Anstelle von <br> müssen Sie dann <br /> notieren – also den Elementnamen mit einem abschließenden Schrägstrich. Alternativ dazu können Sie auch <br></br> notieren, also ein Element mit Anfangs- und End-Tag, aber ohne Inhalt.

Verschachtelung von Elementen[Bearbeiten]

Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Deshalb sprechen Fachleute auch von strukturiertem Markup.

Beispiel ansehen …
<h1><em>HTML</em> - die Sprache des Web</h1>
Mit dem Element em wird ein Teil eines Fließtextes als betont (engl. emphasized) ausgezeichnet. Der Text zwischen <em> und </em> erhält in den meisten Browsern eine andere Darstellung, häufig kursiv.

Attribute in Tags[Bearbeiten]

Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten.

Beispiel ansehen …
<h1><abbr title="Hypertext Markup Language">HTML</abbr> - die Sprache des Web</h1> <p id="hinweis"> Wenn Sie mehr wissen wollen, dann öffnen Sie die Verweise in einem neuen Tab. </p> <p id="info"> <a href="https://wiki.selfhtml.org">Wiki</a> <a href="https://forum.selfhtml.org">Forum</a> </p>
Das abbr-Tag enthält ein title-Attribut mit der Langform der Abkürzung.
Die zwei Textabsätze im Dokument enthalten ein id-Attribut, in denen sie eindeutige Bezeichner erhalten (, die z.B. über CSS formatiert werden können).
Durch die unterschiedlichen Werte der href-Attribute zeigen die beiden Verweise auf unterschiedliche Ziele.

Es gibt folgende Arten von Attributen in HTML-Elementen:

  • Attribute mit Zuweisung vorgegebener Werte, z.B. bei <input type="text">, einem Eingabefeld für einfachen Text – hier sind nur bestimmte Werte erlaubt.
  • Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. bei <input type="password" maxlength="10"> – ein Eingabefeld, in das der Benutzer bis zu 10 Zeichen eingeben kann - hier wird eine numerische Angabe erwartet.
  • Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <p title="Aussage mit Vorbehalt"> – hier kann ein beliebiger Text zugewiesen werden.

HTML5 verlangt Anführungszeichen nur, wenn im Attributwert " ' ` = < > sowie Leerzeichen enthalten sind. Für HTML 4.01 dürfen Attribute ohne Anführungszeichen notiert werden, wenn sie nur a-z, A-Z, 0-9 und - . _ : enthalten.

Empfehlung: Obwohl es also vom HTML-Standard her zulässig wäre, dass bestimmte Attributwerte auch ohne Anführungszeichen geschrieben werden können, sollten Sie diese Möglichkeit nicht nutzen. Es verringert die Wahrscheinlichkeit von Fehlern, wenn Sie grundsätzlich alle Werte, die Sie Attributen zuweisen, in einfache ' oder doppelte " Anführungszeichen setzen. Sie können diese zwei Arten innerhalb einer Datei beliebig mischen, lediglich für ein einzelnes Attribut müssen an Anfang und Ende dieselben Zeichen benutzt werden. Welches Zeichen Sie wählen, ist im Prinzip egal.

Wie bei Elementnamen, so gilt auch bei Attributnamen: Bei HTML (einschließlich HTML5) spielt es keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. Im XML-basierten XHTML müssen die Attributnamen dagegen durchgehend klein geschrieben werden. Bei den Wertzuweisungen an Attribute kann Groß- und Kleinschreibung abhängig von der Art des Wertes unterschieden werden oder auch nicht.

Neben Attributen, die nur in bestimmten HTML-Elementen vorkommen können, gibt es auch so genannte Universalattribute, die in vielen bzw. fast allen HTML-Elementen erlaubt sind.

Beispiel: Universalattribut id
<p id="Einleitung">Text</p>
Das Beispiel definiert einen Textabsatz mit den HTML-Tags <p> und </p>. Im einleitenden <p>-Tag wird ein Universalattribut notiert, nämlich das Attribut id. Damit können Sie dokumentweit eindeutige Namen für einzelne HTML-Elemente vergeben. Einzelheiten über solche Attribute erfahren Sie im Abschnitt über Universalattribute.


Boolesche Attribute[Bearbeiten]

Boolesche Attribute können nur zwei Zustände angeben: wahr oder falsch - daher ihre Bezeichnung. Das heißt, dass sie entweder vorhanden sind (entspricht dem Zustand wahr), oder eben nicht (entspricht dem Zustand falsch). Bei XML-konformer Schreibweise muss ein Attributwert notiert werden, weshalb laut Spezifikation entweder der kanonische Name (also der Attributname selbst) in Kleinschreibweise notiert wird, oder ein leerer Wert (siehe die letzten beiden video-Elemente im folgenden Beispiel):

Beispiel: Boolesche Attribute
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für Boolesche Attribute</title> </head> <body> <video></video> <!-- FALSCH --> <video controls></video> <!-- WAHR --> <video controls=""></video> <!-- WAHR --> <video controls="controls"></video> <!-- WAHR --> </body> </html>
Das Beispiel zeigt, welchen Wert das controls-Attribut des video-Elements angeben kann. Bei WAHR wird der Browser aufgefordert, ein Benutzer-Interface anzuzeigen. Bei FALSCH (Standardwert) passiert nichts.
Empfehlung: Der besseren Lesbarkeit wegen wird die zuerst genannte Schreibweise (entweder ist das Attribut vorhanden oder nicht) empfohlen.

Event-Handler[Bearbeiten]

Früher wurden Event-Handler auch als HTML-Attribute verwendet. Nach den Grundsätzen des unobtrusive JavaScript sollen aber HTML-Markup und Scripte getrennt werden. Deshalb finden Sie Informationen über Ereignisbehandlung unter JavaScript/DOM/Event/Übersicht.


Ausgabe von HTML-Code[Bearbeiten]

Solchermaßen ausgezeichnete HTML-Dokumente werden vom Browser eingelesen und dann geparst: Die HTML-Auszeichnungen werden erkannt und in die Dokumentenstruktur, das DOM umgesetzt. Danach wird dies auf dem Bildschirm gerendert. In Screenreadern verläuft der Prozess identisch, das Dokument wird aber nicht auf dem Bildschirm dargestellt, sondern vorgelesen.

Da Browser, die fehlerhafte HTML-Seiten mit einem Absturz bestrafen, am breiten Markt keine Chance hätten, weil sie und nicht der Webseiten-Ersteller verantwortlich gemacht würden, sind die HTML-Parser der heute verbreiteten Browser ziemlich gutmütige Wesen, die so ziemlich alles schlucken, was ihnen vorgesetzt wird und irgendetwas daraus machen, meistens sogar durchaus das, was der Autor der Web-Seite erreichen wollte.

Trotzdem sollten Sie immer anstreben, dass Ihre selbst erstellte HTML-Seite alle Regeln einhält. Dies können Sie mit einem sogenannten Validator tun.

Diese allgemeinen Regeln haben Sie im vorhergehenden Text kennengelernt, die Verschachtelungsregeln der Elemente finden Sie in der HTML-Referenz.


Weblinks[Bearbeiten]