HTML/Regeln/Element, Tag und Attribut

Aus SELFHTML-Wiki
< HTML‎ | Regeln(Weitergeleitet von HTML/optionale Tags)
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 Klartext , also Zeichen aus dem normalen Zeichenvorrat und keine unsichtbaren Steuerzeichen wie Textverarbeitungsprogramme.


Elemente und Tags[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 …
<h1>HTML - die Sprache des Web</h1>
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 </.

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.

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<nowiki><br> Durch des Frühlings holden, belebenden Blick,<nowiki><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.

Das das img-Element als Standalone-Tag keinen Inhalt hat, müssen weitergehende Informationen, wie etwa, welches Bild geladen und dargestellt werden soll, in im Tag enthaltenen Attributen notiert werden.

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.



optionale Tags[Bearbeiten]

Es gibt in HTML einige optionale Tags, unter anderem die, die die Grundstruktur eines HTML-Dokumentes kennzeichnen.

Empfehlung: SELFHTML empfiehlt, auch optionale Tags zu notieren.

Die Tags <html>, </html>, <head>, </head>, <body> und </body>, die die Grundstruktur einer HTML-Seite kennzeichnen, sind optional, d.h. sie können beim Schreiben von HTML normalerweise weggelassen werden.

Dies ist übrigens keine neue Eigenschaft von HTML5, sondern galt auch schon für frühere HTML-Versionen.

Beachten Sie: Die Ausführungen auf dieser Seite gelten ausschließlich für HTML. Bei XHTML müssen die genannten Tags alle notiert werden.

Elemente sind Pflicht, Tags sind optional[Bearbeiten]

Die Elemente html, head und body sind auch bei HTML Pflicht und werden, wenn der HTML-Autor eines von ihnen weggelassen hat, vom Browser ergänzt. Dabei werden sie natürlich nicht automatisch in die HTML-Datei hineingeschrieben, aber der Browser ergänzt sie in seiner internen Repräsentation des DOM. Das heißt, man kann sich beim Schreiben von CSS oder JavaScript auf die genannten Elemente beziehen, auch wenn sie beim Schreiben der zugehörigen HTML-Datei weggelassen wurden.

Keine Konsistenz erforderlich[Bearbeiten]

Man muss beim Aufschreiben und Weglassen von optionalen Tags auch keine konsistente Linie verfolgen. So ist es technisch korrekt, z.B. <html> wegzulassen (d.h. vom Browser ergänzen zu lassen), aber trotzdem </html> hinzuschreiben. Dies ist aber unnötig verwirrend und sollte vermieden werden.

HTML5: Einschränkungen bei HTML-Kommentaren[Bearbeiten]

Die HTML5-Spezifikation des W3C weist darauf hin, dass das öffnende <html>-Tag nur dann weggelassen werden kann, wenn das erste, was sich im html-Element befindet, kein HTML-Kommentar ist und dass das schließende </html>-Tag weggelassen werden kann, wenn auf das html-Element nicht direkt ein HTML-Kommentar folgt [1]. (Für die Elemente head und body gilt Entsprechendes.)

Diese Einschränkungen sind vielleicht verwirrend, da sie ein bisschen irreführend formuliert sind. Es ist nicht verboten, z.B. Folgendes zu schreiben:

Beispiel
<!doctype html>
  <!-- Mein Kommentar -->
  <head>
    <meta charset="utf-8">
    <title>aussagekräftiger Titel der Seite</title>
  </head>
  <body>
    <p>Der Inhalt der Seite</p>
  </body>
<!-- Noch ein Kommentar -->

Von der formalen Richtigkeit des obigen Codes kann man sich leicht mit einem Validator überzeugen.

Die Spezifikation bezieht sich hier auf die interne Repräsentation des Browsers. Das Weglassen von Tags wie <html> ist ja deswegen erlaubt, weil der Browser normalerweise zweifelsfrei feststellen kann, wo das html-Element beginnt. Wenn auf den Doctype unmittelbar ein <head>-Tag folgt, dann weiß der Browser – weil an dieser Stelle das head-Element noch gar nicht folgen darf – dass er zuvor das <html>-Tag ergänzen muss.

Das einzige kleine Problem dabei sind HTML-Kommentare, die an jeder beliebigen Stelle in die Struktur eingefügt werden können. Da der HTML-Kommentar an dieser Stelle:

Beispiel
<!doctype html>
  <!-- Mein Kommentar -->

durchaus korrekt ist, wird der Browser davor also niemals das <html>-Tag ergänzen. Wenn es also für den HTML-Autor aus irgendeinem Grund wichtig ist, dass der HTML-Kommentar in der internen Repräsentation des Browsers das erste ist, was sich im html-Element befindet, dann muss er das <html>-Tag notieren, ansonsten landet der HTML-Kommentar vor dem html-Element.

Ebenso wird der Browser den Kommentar am Ende der HTML-Datei immer innerhalb des body-Elements positionieren. Auch hier gilt: Will man den Kommentar am Ende einer HTML-Datei außerhalb des body-Elements platziert wissen, dann muss man das </body-Tag notieren.

Entsprechendes gilt auch für die übrigen optionalen Tags, die die Grundstruktur eines HTML-Dokumentes kennzeichnen.

Elemente mit optionalem Abschluss-Tag[Bearbeiten]

Bei einigen Elementen, z.B. p oder li, darf man das schließende Tag weglassen. Die Browser werden das schließende Tag ergänzen. Allerdings muss das nicht immer mit der Intention des Autors übereinstimmen.

Beachten Sie: Verwechseln Sie dies nicht mit leeren Elementen, also Elementen, bei denen das Abschluss-Tag weggelassen werden muss, z. B. <br>.

Empfehlungen[Bearbeiten]

Die traditionelle Empfehlung, die auch SELFHTML immer vertreten hat, lautet, alle optionalen Tags zu notieren. Der Vorteil ist, sofern man valides HTML schreibt, dass der HTML-Code dann immer mit der internen Repräsentation des Browsers übereinstimmt, wodurch die Wahrscheinlichkeit von Missverständnissen verringert wird. Außerdem können Sie natürlich einem Element ohne öffnendes Tag keine Attribute geben.

Der Google HTML/CSS Style Guide empfiehlt hingegen, alle optionalen Tags konsequent wegzulassen:

Beispiel: Eine vollständige HTML-Datei, bei der die optionalen Tags weggelassen wurden
<!DOCTYPE html>
<meta charset="utf-8">
<title>Saving money, saving bytes</title>
<p>Qed.
Beispiel aus dem Google HTML/CSS Style Guide (leicht modifiziert)

Dies diene einem schnellen Überblick über das HTML und optimiere es gleich im Hinblick auf die Dateigröße. Andererseits werde es einige Zeit zur Umsetzung brauchen, weil es deutlich von dem abweiche, was Webentwickler typischerweise lernten (wie etwa bei SELFHTML).

Empfehlung: In der HTML-Referenz können Sie für jedes einzelne Element nachschlagen, welche Tags notwendig, optional oder verboten sind.

Attribute in Tags[Bearbeiten]

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

Infografik zum Unterschied zwischen Tag, Element und Attribut


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="number" 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. 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]