HTML/Tutorials/Element, Tag und Attribut

Aus SELFHTML-Wiki
< HTML‎ | Tutorials(Weitergeleitet von Standalone-Tag)
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 (englisch für Etiketten) 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.

Element mit einleitendem und schließendem Tag 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.

verschachtelte Elemente 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.


inhaltsleere 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, link, meta, param, source, track, wbr

Falls solche Elemente Zusatzinformationen benötigen, wie beispielsweise im img Element die URL des darzustellenden Bildes, können sie nur mit Hilfe von Attributen des Tags angegeben werden.

br und img sind inhaltsleere Elemente 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> ... </p>

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.

optionale Tags[Bearbeiten]

Es gibt in HTML einige optionale Tags, die im Markup weggelassen werden können. Sie werden dann vom Browser beim Parsen automatisch eingefügt.

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 inhaltsleeren Elementen, also Elementen, bei denen das Abschluss-Tag weggelassen werden muss, z. B. br oder img.

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. Dies ist übrigens keine neue Eigenschaft von HTML5, sondern galt auch schon für frühere HTML-Versionen.

valide Webseite ohne html, head und body-tags ansehen …
<!doctype html>

<title>Dokument ohne html und head</title>

<h1>Überschrift</h1>
Aufgabe: Öffnen Sie die Webseite mit einem Rechtsklick auf Vorschau in einem neuen Tab und untersuchen Sie sie im Seiteninspektor.
Optional-tags.png
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.

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.

Empfehlung:


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:

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 in Form von Attributen und dazugehörenden Attributwerten enthalten. Neben Attributen, die nur in bestimmten HTML-Elementen vorkommen können, gibt es auch so genannte Universalattribute, die in allen HTML-Elementen erlaubt sind.


Infografik zum Unterschied zwischen Tag, Element und Attribut

Es gibt folgende Arten von Attributen in HTML-Elementen:

  • Attribute mit Zuweisung vorgegebener Werte,
    z. B. bei <input type="text"> oder <input type="number">,
    einem Eingabefeld für einfachen Text oder Zahlen – 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.


HTML-Elemente mit Attributen 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.

HTML5 verlangt Anführungszeichen nur, wenn im Attributwert " ' ` = < > sowie Leerzeichen enthalten sind.

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.


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):

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.

Kommentare[Bearbeiten]

HTML beinhaltet die Möglichkeit, an fast beliebigen Stellen innerhalb einer HTML-Datei Kommentare einzufügen. Diese werden vom Browser ignoriert, d. h. nicht angezeigt.

Kommentare sind z. B. sinnvoll,

  • um interne Angaben zu Autor und Erstelldatum in einer Datei zu platzieren,
  • um interne Anmerkungen zu bestimmten Textstellen zu machen oder
  • Teile des Dokuments während der Entwicklung intern auszukommentieren.

Kommentare werden durch die Zeichenfolge <!-- eingeleitet. Dahinter folgt beliebig langer Kommentartext oder HTML-Markup, das aber nicht als HTML interpretiert wird.

Kommentare können überall dort notiert werden, wo man auch andere HTML-Elemente oder Text notieren könnte. Innerhalb der spitzen Klammern eines Tags ist ein Kommentar nicht erlaubt, bzw. innerhalb der Anführungszeichen eines Attributwertes oder in einem CDATA-Bereich wird er als normaler Textinhalt behandelt.

Kommentare in HTML
<h1>Willkommen!</h1>

<!-- einzeiliger Kommentar -->

<p>viel Text</p>

<!-- und das ist ein mehrzeiliger Kommentar
  zu dem Text mit <p>...</p>
  Letzte Zeile des Kommentars -->
Beachten Sie dass bereits die Zeichenfolge -- den Kommentar beendet. Deshalb lassen sich HTML-Kommentare nicht schachteln. Ebenso ist damit die Zeichenfolge -- innerhalb eines Kommentars nicht erlaubt. Wenn Sie zur deutlichen Hervorhebung eines Kommentars Sonderzeichen als Trennlinie einsetzen wollen, dann können Sie eben nicht den Bindestrich - verwenden, sondern müssen sich für irgendein anderes Zeichen, beispielsweise das Gleichheitszeichen = oder das Sternchen *, entscheiden.

Früher wurden speziell gekennzeichnete Kommentare, sogenannte Conditional Comments, vom Internet Explorer als Browserweiche verwendet.

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.


Guter HTML-Stil[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 sich bemühen, sich an bewährte Konventionen zu halten, damit Ihr HTML-Code für Sie, andere Entwickler und Browser übersichtlich und für spätere Änderungen pflegeleicht ist.

Empfehlung:
  • Ihr HTML-Markup sollte fehlerfrei und gültig (valide) sein, damit es von Browsern und anderen Parsern wie Screenreadern gelesen werden kann. HTML ist nur validierbar, wenn Sie eine Doctype-Angabe verwenden.
  • Von XML entlehnte Tugenden: Wohlgeformte Syntax erleichtert das Lesen und ermöglicht das Verarbeiten als XML:
    • Alle Elementnamen, Attributnamen und deren Werte sind klein geschrieben.
    • Attributwerte sind immer in doppelte Anführungszeichen ("") eingefasst.
    • Verwenden Sie „sprechende“ Klassennamen, die die Funktion und nicht die Art und Weise der Gestaltung beschreiben.
    • Elemente, die in HTML auch ohne schließendes Tag notiert werden dürfen (p, th, td, dt, dd, li), werden immer mit schließendem Tag notiert.
    • Achten Sie auf Einrückungen und Leerzeilen, um Ihren Code übersichtlich zu gliedern.
Beachten Sie: Da XHTML ein XML-Dialekt ist, sind obenstehende Punkte in XHTML zwingend einzuhalten, während sie in HTML „nur“ zum guten Stil gehören.

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.

Weblinks[Bearbeiten]