HTML-Übersicht

HyperText Markup Language (HTML) ist die standardmäßige Auszeichnungssprache zur Beschreibung der Struktur von im Web angezeigten Dokumenten. HTML besteht aus einer Reihe von Elementen und Attributen, mit denen alle Komponenten eines Dokuments ausgezeichnet werden, um es sinnvoll zu strukturieren.

HTML-Dokumente sind im Grunde eine Baumstruktur aus Knoten, die HTML-Elemente und Textknoten umfasst. HTML-Elemente bieten die Semantik und Formatierung von Dokumenten sowie das Erstellen von Absätzen, Listen und Tabellen sowie das Einbetten von Bildern und Formularsteuerelementen. Für jedes Element können mehrere Attribute angegeben sein. Viele Elemente können Inhalte haben, einschließlich anderer Elemente und Text. Andere Elemente sind leer, wobei das Tag und die Attribute ihre Funktion definieren.

Es gibt verschiedene Kategorien von Elementen, darunter Metadaten, Abschnitte, Text, Inline-Semantik, Formular, interaktiv, Medien, Komponente und Skripterstellung. Die meisten werden wir in dieser Reihe behandeln. Aber was ist ein Element?

Elemente

HTML besteht aus einer Reihe von Elementen, mit denen Sie verschiedene Teile des Inhalts umschließen oder umschließen, damit dieser auf eine bestimmte Weise angezeigt wird oder wirkt. HTML-Elemente werden durch Tags abgegrenzt, die in spitzen Klammern (< und >) stehen.

Der Seitentitel ist eine Überschrift (Ebene 1), für die wir das Tag <h1> verwenden. Der eigentliche Titel „Machine Learning Workshop“ ist der Inhalt unseres Elements. Der Inhalt wird zwischen dem öffnenden und dem schließenden Tag eingefügt. Das gesamte Element – das öffnende Tag, das schließende Tag und der Inhalt – ist das Element.

Das schließende Tag ist dasselbe Tag wie das öffnende Tag, dem ein Schrägstrich vorangestellt ist.

Elemente und Tags sind nicht genau das Gleiche, allerdings werden die Begriffe von vielen Menschen synonym verwendet. Der Tag-Name ist der Inhalt in den Klammern. Das Tag enthält Klammern. In diesem Fall ist das <h1>. Ein "Element" ist die öffnenden und schließenden Tags sowie der gesamte Inhalt zwischen diesen Tags, einschließlich verschachtelter Elemente.

<p>This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content</p>

In diesem Absatzelement sind andere Elemente verschachtelt. Wenn Sie Elemente verschachteln, ist es wichtig, dass sie ordnungsgemäß verschachtelt sind. HTML-Tags sollten in der umgekehrten Reihenfolge geschlossen werden, in der sie geöffnet wurden. Im Beispiel oben sehen Sie, dass <em> innerhalb des öffnenden und schließenden <strong>-Tags sowohl geöffnet als auch geschlossen wird und <strong> innerhalb der <p>-Tags sowohl offen als auch geschlossen ist.

Browser zeigen die Tags nicht an. Die Tags werden verwendet, um den Inhalt der Seite zu interpretieren.

HTML ist sehr, sehr nachsichtig. Wenn wir beispielsweise die schließenden </li>-Tags weglassen, werden die schließenden Tags impliziert.

<ul>
  <li>Blendan Smooth
  <li>Hoover Sukhdeep
  <li>Toasty McToastface
</ul>

Es ist zwar zulässig, ein <li> nicht zu schließen, es ist aber keine gute Praxis. Das schließende </ul> ist obligatorisch. Falls Sie das schließende Tag der ungeordneten Liste nicht angeben, versucht der Browser festzustellen, wo die Liste und die Listenelemente enden. Sie sind jedoch möglicherweise nicht mit der Entscheidung einverstanden.

Die Spezifikation für jedes Element gibt an, ob das schließende Tag obligatorisch ist oder nicht. „Keines der Tags kann verdeckt werden“ in der Spezifikation bedeutet, dass sowohl ein öffnendes als auch ein schließendes Tag erforderlich sind. Die Spezifikation liefert eine Liste aller erforderlichen schließenden Tags.

Wenn im obigen Beispiel <em> oder <strong> nicht geschlossen wurde, wird das Element möglicherweise vom Browser geschlossen. Wenn ein <em> nicht geschlossen wird, wird der Inhalt möglicherweise anders gerendert als beabsichtigt. Wenn </ul> weggelassen wird und das nächste Tag ein schließendes Tag für den übergeordneten Container der Liste ist, haben Sie Glück. Handelt es sich jedoch um ein öffnendes <h1>-Tag, geht der Browser davon aus, dass der Header Teil der Liste ist, einschließlich der Übernahme von Stilen. Einige ausgelassene schließende Tags verursachen größere Probleme: Wenn einige Tags wie <script>, <style>, <template>, <textarea> und <title> nicht geschlossen werden, werden nachfolgende Inhalte unterbrochen, wie im folgenden Beispiel gezeigt.

Auch Inhalte, die unbeabsichtigt kursiv formatiert sind oder eine eingerückte Überschrift haben, wirken sich nicht negativ auf Ihr Unternehmen aus. Wenn der Großteil Ihrer Inhalte in einem Textbereich von 200 × 300 ohne Formatierung erscheint, weil Sie vergessen haben, ein </textarea> hinzuzufügen, oder gar nicht angezeigt werden, weil Sie vergessen haben, ein </style> zu schließen, ist die Website unbrauchbar.

In einigen Fällen schließen Browser Elemente ein, auch wenn die Tags nicht im Markup vorhanden sind. Da Elemente impliziert werden können, kann ein Element auch dann vorhanden sein, wenn die Tags dies nicht tun. Der Browser fügt einen <body></body> um Ihre Inhalte und <tbody></tbody> um die Tabellenzeilen hinzu, auch wenn Sie dies nicht tun. Tags können natürlich ausgelassen werden. Stellen Sie, wie bereits erwähnt, sicher, dass sie richtig verschachtelt sind. Ihr zukünftiges Ich als Betreuer des Markups und alle anderen, die an Ihrer Codebasis arbeiten, werden es Ihnen danken.

Es gibt zwei Arten von Elementen: ersetzte und nicht ersetzte Elemente.

Nicht ersetzte Elemente

Die im vorherigen Abschnitt ausgezeichneten Absätze, Überschriften und Listen werden alle nicht ersetzt. Nicht ersetzte Elemente werden von öffnenden und (teilweise optionalen) schließenden Tags umgeben. Außerdem können Text- und andere Tags als Unterelemente enthalten sein. Diese umschließenden Tags können eine Wortgruppe oder ein Bild in einen Hyperlink umwandeln, einen Satz in eine Überschrift umwandeln, Wörter betonen usw.

Ersetzte und leere Elemente

Ersetzte Elemente werden durch Objekte ersetzt, sei es ein Widget für eine grafische Benutzeroberfläche (UI) bei den meisten Formularsteuerelementen oder eine Raster- oder skalierbare Bilddatei bei den meisten Bildern. Jedes Objekt wird durch -Objekte ersetzt und erhält eine Standarddarstellung. Je nach Objekttyp und Browser sind die anwendbaren Stile begrenzt. Beispielsweise ermöglichen die meisten Browser einen eingeschränkten Stil für UI-Widgets und zugehörige Pseudoelemente. Bei Rasterbildern lassen sich Höhe, Breite, Beschneidung und Filterung leicht mit CSS vornehmen, jedoch nicht sehr viel. Auf der anderen Seite sind skalierbare Vektorgrafiken, die eine Auszeichnungssprache verwenden, die auf XML ähnlich wie HTML basiert, vollständig skalierbar (es sei denn, sie enthalten Rasterbilder). Sie sind zudem vollständig stilierbar. Die Möglichkeit, ein eingebettetes SVG über den CSS-Code zu gestalten, der mit der HTML-Datei verknüpft ist, hängt davon ab, wie die SVG-Datei eingerichtet ist.

In diesem Beispiel werden die beiden ersetzten Elemente <img> und <input> durch Nicht-Text-Inhalte ersetzt: ein Bild bzw. ein grafisches Benutzeroberflächenobjekt.

<input type="range">
<img src="switch.svg" alt="light switch">

Ausgabe des obigen HTML-Codes:

Ersetzte Elemente und leere Elemente werden häufig verwechselt. Ungültige Elemente sind alle selbstschließende Elemente, die durch ein Tag dargestellt werden. Das bedeutet, dass es für ein void-Element kein schließendes Tag gibt. Optional können Sie am Ende des Tags einen Schrägstrich einfügen, damit das Markup für viele Nutzer leichter zu lesen ist. In unserem Beispiel schließen wir das Tag selbst mit einem Schrägstrich:

<input type="range"/>
<img src="switch.svg" alt="light switch"/>

Der Schrägstrich am Ende ist altmodisch: Er weist darauf hin, dass das Element selbstschließend ist und es kein übereinstimmendes End- oder schließendes Tag gibt.

Ungültige Elemente dürfen keine Textinhalte oder verschachtelte Elemente enthalten. Ungültige Elemente sind unter anderem <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> und <wbr>.

Die meisten ersetzten Elemente sind leere Elemente. Die Elemente video, picture, object und iframe wurden ersetzt, sind aber nicht leer. Da sie alle andere Elemente oder Text enthalten können, verfügen sie alle über ein schließendes Tag.

Die meisten void-Elemente werden ersetzt, aber auch hier nicht alle, wie wir bei base, link, param und meta gesehen haben. Warum sollte ich ein leeres Element haben, das keinen Inhalt haben kann, das nicht ersetzt wird und dadurch nichts auf dem Bildschirm rendert? Um Informationen über den Inhalt bereitzustellen! Die Informationen werden über die Attribute des Elements bereitgestellt.

Attribute

Vielleicht ist Ihnen aufgefallen, dass die Beispiele <img> und <input im öffnenden Tag mehr als nur den Elementtyp enthielten. Diese zusätzlichen Bits von durch Leerzeichen getrennten Name/Wert-Paaren (in manchen Fällen ist das Einfügen eines Werts optional) werden als Attribute bezeichnet. Attribute machen HTML so leistungsstark. In dieser Reihe behandeln wir Hunderte von Attributen und Attributwerten, aber sie werden nur kurz erläutert, worum es sich bei diesen Attributen und Attributwerten handelt.

Attribute liefern Informationen zum Element. Das Attribut wird wie der Rest des öffnenden Tags nicht im Inhalt angezeigt, hilft aber dabei, zu definieren, wie der Inhalt sowohl für sehende als auch für nicht sehende Nutzer (Unterstützungstechnologien und Suchmaschinen) angezeigt wird.

Attribute erscheinen nur im öffnenden Tag. Das öffnende Tag beginnt immer mit dem Elementtyp. Nach dem Typ können null oder mehr Attribute folgen, die durch ein oder mehrere Leerzeichen getrennt sind. Auf die meisten Attributnamen folgt ein Gleichheitszeichen, das mit dem Attributwert übereinstimmt, in öffnende und schließende Anführungszeichen.

In diesem Beispiel verwenden wir einen Ankerlink mit zwei Attributen. Durch diese beiden Attribute wurde der Inhalt „Registration“ in einen internen Ankerlink umgewandelt, der zum Attribut id="register" im aktuellen Browsertab scrollt, wenn der Link mit der Tastatur oder einem anderen Gerät angeklickt, angetippt oder aktiviert wird.

Attribute definieren das Verhalten, die Verknüpfungen und die Funktionalität von Elementen. Weitere Informationen zu Attributen finden Sie im Abschnitt Attribute dieser Reihe. Beachten Sie vorerst, dass einige Attribute global sind, d. h. im öffnenden Tag jedes Elements enthalten sein können. Einige gelten nur für mehrere, aber nicht alle Elemente, andere sind elementspezifisch und nur für ein einzelnes Element relevant.

Die meisten Attribute sind Name/Wert-Paare. Boolesche Attribute, deren Wert wahr, falsch oder identisch mit dem Namen des Attributs ist, können nur als Attribut hinzugefügt werden: Der Wert ist nicht erforderlich.

<img src="switch.svg" alt="light switch" ismap />

Dieses Bild hat drei Attribute: src, alt und ismap. Mit dem Attribut src wird der Speicherort des SVG-Bild-Assets angegeben. Das Attribut alt liefert alternativen Text, der den Inhalt des Bildes beschreibt. Das Attribut ismap ist ein boolescher Wert und erfordert keinen Wert. Dies dient lediglich dazu, zu erklären, was Attribute sind. Wir gehen auf diese Attribute im Abschnitt Bilder genauer ein.

Anführungszeichen sind zwar nicht immer erforderlich, manchmal aber auch. Wenn der Wert Leerzeichen oder Sonderzeichen enthält, sind Anführungszeichen erforderlich. Aus diesem Grund werden immer Zitationen empfohlen. Ein oder mehrere Leerzeichen zwischen Attributen, wenn der Attributwert in Anführungszeichen gesetzt wird, sind eigentlich nicht erforderlich. Aus Gründen der Lesbarkeit und aus Gründen der Lesbarkeit werden Anführungszeichen und Leerzeichen jedoch empfohlen und werden ebenfalls geschätzt.

Bei HTML wird nicht zwischen Groß- und Kleinschreibung unterschieden, aber bei einigen Attributwerten ist dies schon der Fall. Bei den in der Spezifikation definierten Werten wird die Groß-/Kleinschreibung nicht berücksichtigt. Bei Strings, die nicht als Schlüsselwörter definiert sind, wird im Allgemeinen zwischen Groß- und Kleinschreibung unterschieden. Dies gilt auch für die Werte id und class.

Wenn bei einem Attributwert in HTML zwischen Groß- und Kleinschreibung unterschieden wird, muss sie auch beachtet werden, wenn sie als Teil eines Attributselektors in CSS und JavaScript verwendet wird.

Zum leichteren Lesen des Markups wird empfohlen, ist aber nicht erforderlich, Ihren HTML-Code mit Kleinbuchstaben für alle Element- und Attributnamen in Ihren Tags zu markieren und alle Attributwerte in Anführungszeichen zu setzen. Wenn Sie jemals den Begriff "XHTML-Stil-Markup" hören, ist dies die Bedeutung von selbstschließenden leeren Elementen mit einem Schrägstrich am Ende.

Aussehen von Elementen

Die Standarddarstellung semantischer Elemente wird durch User-Agent-Stylesheets festgelegt. Die meisten Browser verwenden zu diesem Zweck echte Stylesheets, während andere sie im Code simulieren. Das Endergebnis ist das gleiche. Obwohl einige Beschränkungen für User-Agent-Stylesheets durch die HTML-Spezifikation festgelegt werden, haben Browser einen großen Breitengrad, was bedeutet, dass zwischen den Browsern einige Unterschiede bestehen.

Da Tags eine semantische Bedeutung haben, sollte das ausgewählte Element und die verwendeten Tags für den angezeigten Inhalt geeignet sein. Die Semantik oder role eines Elements ist für Hilfstechnologien und in einigen Fällen für Suchmaschinen wichtig. HTML sollte zum Strukturieren von Inhalten verwendet werden, nicht zum Definieren des Aussehens. Bei der Darstellung handelt es sich um den Bereich von CSS. Viele Elemente, die die Darstellung von Inhalten verändern, wie <h1>, <strong> und <em> haben zwar eine semantische Bedeutung, aber die Darstellung kann und wird im Allgemeinen durch den Stil des Autors geändert werden.

<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>

Element, Attribute und JavaScript

Das Document Object Model (DOM) ist die Datendarstellung der Struktur und des Inhalts des HTML-Dokuments. Beim Parsen des HTML-Codes erstellt der Browser ein JavaScript-Objekt für jedes gefundene Element und jeden Textabschnitt. Diese Objekte werden Knoten genannt – Elementknoten bzw. Textknoten.

Es gibt eine Schnittstelle, über die die Funktionalität jedes HTML-Elements definiert wird. Die HTML DOM API bietet Zugriff auf jedes HTML-Element und die Steuerung über das DOM. Sie stellt Schnittstellen für das HTML-Element und alle HTML-Klassen bereit, die von diesem Element übernehmen. Die HTMLElement-Schnittstelle repräsentiert das HTML-Element und alle Nachfolgerknoten. Jedes andere Element implementiert es über eine Schnittstelle, die von ihm übernimmt. Jede erbende Schnittstelle verfügt über einen Konstruktor, Methoden und Eigenschaften. Über die übernommenen HTMLElement-Eigenschaften können Sie auf jedes globale Attribut sowie auf input-, pointer-, transition- und animation-Ereignisse zugreifen. Sie können über den Untertyp des einzelnen Elements, z. B. HTMLAnchorElement und HTMLImageElement, auf elementspezifische Attributwerte und Methoden zugreifen.

Wissen testen

Testen Sie Ihr HTML-Wissen