Was ist HTML? Struktur und Grundlagen
Autor: Redaktion Domeny.ForSale Veröffentlicht
Kurz erklärt: HTML ist eine Auszeichnungssprache, die die Struktur und Bedeutung der Inhalte einer Webseite beschreibt. Sie teilt dem Browser mit, welche Teile Überschriften, Absätze, Links, Bilder oder Formulare sind. Sie ist keine Programmiersprache: Für die Gestaltung einer Seite dient vor allem CSS, während für das Verhalten und die Interaktion häufig JavaScriptu verwendet wird.
Wozu dient HTML auf einer Webseite?
Die Abkürzung HTML steht für das englische HyperText Markup Language, also Hypertext-Auszeichnungssprache. „Hypertext“ bezeichnet Text, der über Links mit anderen Dokumenten oder Inhaltsabschnitten verbunden ist. „Tags“ sind Kennzeichnungen im Code, die den einzelnen Teilen eines Dokuments eine bestimmte Rolle zuweisen.
Wenn du eine Seite öffnest, liest der Browser HTML und baut daraus die Dokumentstruktur auf. Anschließend stellt er die Inhalte auf dem Bildschirm dar und berücksichtigt dabei auch eingebundene Stile und Skripte. Normalerweise sieht der Nutzer das Ergebnis dieses Vorgangs, nicht den Code selbst.
Eine Café-Webseite kann beispielsweise den Namen des Lokals als Hauptüberschrift, eine Beschreibung als Absatz, die Speisekarte als Liste und einen Link zur Reservierung enthalten. HTML legt fest, was diese Elemente sind, muss aber nicht bestimmen, welche Farbe sie haben oder wie viel Platz sie auf dem Bildschirm einnehmen.
Tags, Elemente und Attribute – wie liest man HTML?
Ein Tag ist eine Kennzeichnung in spitzen Klammern, zum Beispiel <p>. Viele Elemente haben ein öffnendes und ein schließendes Tag: In <p>Öffnungszeiten</p> umschließen die Tags den Inhalt des Absatzes. Die Tags und ihr Inhalt bilden zusammen ein Element in HTML.
Nicht jedes Element umschließt Text. Das Element img, mit dem Bilder eingebunden werden, hat kein schließendes Tag. Die erforderlichen Informationen, etwa die Adresse der Datei, werden über seine Attribute angegeben.
Ein Attribut ist eine zusätzliche Angabe im öffnenden Tag. Das Attribut href legt das Ziel eines Links fest, src gibt die Bildquelle an, und mit lang lässt sich die Sprache des Dokuments oder eines Abschnitts angeben. Das Attribut alt liefert bei einem Bild den Alternativtext. Sein Inhalt hängt von der Funktion der Grafik ab; bei rein dekorativen Bildern bleibt es üblicherweise leer.
Für den Einstieg ist es hilfreich, einige Elemente zu kennen:
h1–h6— Überschriften verschiedener Ebenen;p— ein Textabsatz;a— ein Link, wenn das Attributhrefvorhanden ist;ulundli— eine ungeordnete Liste und ihre Einträge;img— ein Bild;button— eine Schaltfläche.
Elemente können innerhalb anderer Elemente stehen, allerdings gelten dafür Regeln. Eine Liste enthält Listeneinträge, und ein Link kann Teil eines Absatzes sein. Browser versuchen, fehlerhaften Code zu korrigieren. Dass eine Seite richtig angezeigt wird, beweist daher noch nicht, dass ihr HTML korrekt ist.
Wie unterscheidet sich HTML von CSS und JavaScriptu?
Diese drei Technologien arbeiten häufig zusammen, übernehmen aber unterschiedliche Aufgaben. CSS, also kaskadierende Stylesheets, beschreibt die Darstellung des Dokuments. JavaScript ist eine Programmiersprache, mit der sich unter anderem auf Nutzeraktionen reagieren und der Seiteninhalt verändern lässt.
| Technologie | Hauptaufgabe | Beispiel in einem Formular |
|---|---|---|
| HTML | Struktur und Bedeutung | Feld für die E-Mail-Adresse, Beschriftung und Schaltfläche |
| CSS | Gestaltung und Layout | Farben, Abstände und Breite der Felder |
| JavaScript | Logik und Verhalten | Eine Meldung aktualisieren, ohne die Seite neu zu laden |
HTML dient nicht dazu, Algorithmen, Schleifen oder eigene Berechnungen zu formulieren, und zählt deshalb nicht zu den Programmiersprachen. Das bedeutet jedoch nicht, dass eine Seite ohne JavaScriptu keine Interaktion ermöglichen kann. Links funktionieren auch ohne Skripte, und dank der Funktionen von HTML kann der Browser Formulare absenden oder einfache Prüfungen von Pflichtfeldern vornehmen.
Eine einfache Web-Visitenkarte lässt sich ausschließlich mit HTML erstellen. Mit CSS kannst du ihre Gestaltung verfeinern. JavaScript wird erst dann benötigt, wenn das geplante Verhalten über die Möglichkeiten des Dokuments und des Browsers hinausgeht.
Warum ist die Bedeutung der Elemente wichtiger als ihr Aussehen?
Semantisches HTML bedeutet, Elemente entsprechend ihrer Bedeutung auszuwählen. Eine Überschrift sollte auch im Code eine Überschrift sein und nicht bloß ein durch Stile vergrößerter Text. Ebenso dient ein Link dazu, zu einer anderen Seite zu wechseln, während zum Ausführen einer Aktion üblicherweise eine Schaltfläche verwendet wird.
Diese Unterscheidung hilft assistiven Technologien wie Screenreadern, Inhalte korrekt wiederzugeben. Wer ein solches Werkzeug verwendet, kann beispielsweise zwischen Überschriften navigieren. Wenn der Autor lediglich gewöhnliche Absätze vergrößert, entspricht diese Navigation nicht dem sichtbaren Aufbau der Seite.
Eine Schaltfläche, die mit dem passenden Element erstellt wurde, unterstützt außerdem bereits die Bedienung per Tastatur. Dieselbe Funktion für einen beliebigen Textabschnitt nachzubauen, erfordert zusätzliche Arbeit. Korrektes HTML ist eine Grundlage für Barrierefreiheit, garantiert aber allein noch nicht, dass die gesamte Website barrierefrei ist.
Wie kannst du HTML praktisch kennenlernen?
Für die ersten Versuche reichen ein Texteditor und ein Browser. Ein Dokument in HTML enthält üblicherweise eine Dokumenttypdeklaration, das Wurzelelement html, einen Bereich head mit Metadaten und body mit dem Seiteninhalt. Metadaten beschreiben das Dokument. Dazu gehören unter anderem die Zeichenkodierung und der Titel, der im Browser-Tab erscheint.
Die einfachste Übung ist eine lokale Seite mit einer kurzen Web-Visitenkarte:
- Erstelle im Editor eine Textdatei und speichere sie als
index.html. Achte darauf, dass sie nicht zusätzlich die Dateiendung.txterhält. - Erstelle die Grundstruktur des Dokuments und füge im Bereich
bodyeine Überschrift, einen Absatz und eine Liste von Dienstleistungen hinzu. - Öffne die Datei im Browser. Speichere sie nach jeder Änderung und lade die Ansicht neu.
- Verwende die Option „Untersuchen“ oder „Element untersuchen“, um zu sehen, wie der Browser die Struktur interpretiert.
Eine lokale Datei musst du weder veröffentlichen noch eine Domain dafür kaufen. Beginne damit, die Inhalte ohne Farben und Verzierungen zu strukturieren. So kannst du leichter prüfen, ob du die Rollen der Elemente verstanden hast, bevor du dich mit der Gestaltung beschäftigst.
Siehe auch: Was ist 2FA?
Lesen Sie auch
