HTML (Hypertext Markup Language)

Die Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten, z. B. über die im Text verwendeten Sprachen, den Autor oder den zusammengefassten Inhalt des Textes.

HTML wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) weiterentwickelt. Die letzte vom W3C veröffentlichte Version ist seit dem 14. Dezember 2017 HTML 5.2, seit dem wird HTML in Form eines "Living Standard" von der WHATWG weiterentwickelt. Auch die Extensible Hypertext Markup Language (XHTML) wird durch HTML5 ersetzt.

HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie Cascading Style Sheets (CSS) bestimmt.

Webbrowser

Webbrowser Version Rendering-Engine
Google Chrome ≥ 119 WebKit (≤ 27), Blink
Mozilla Firefox ≥ 117 Gecko
Microsoft Edge ,
Microsoft Internet Explorer 		≥ 119 Trident (≤ 11), EdgeHTML (≤ 44), Blink
Apple Safari ≥ 17 WebKit
Webbrowser

Aufbau einer HTML-Seite

HTML-Seiten setzen sich zusammen aus dem eigentlichen Inhalt und Markup, sogenannten Tags. Ein Tag besteht aus einer Typ-Bezeichnung und aus keinem, einem oder mehreren Attributen zwischen einem <-Zeichen am Anfang und einem >-Zeichen am Ende. Es gibt einteilige und zweiteilige Tags. Zweiteilige Tags haben einen öffnen Tag der alle Attribute aufnimmt und einen schließenden Tag welcher durch ein /-Zeichen vor der Typ-Bezeichnung gekennzeichnet wird. Ein zweiteiliger Tag kann Text oder weitere Tags enthalten. Ein Dokument mit verschachtelten Tags muss wohlgeformt (well-formed) sein. Das bedeutet, dass der Tag welcher als erstes geöffnet wurde auch als letztes erst geschlossen werden darf. Sowohl innerhalb eines Tags als auch zwischen mehreren Tags dürfen beliebig viele Whitespaces sein.

Attribute gibt es in zwei Varianten. Flag-Attribute bestehen nur aus ihrer Bezeichnung und schalten ein Feature ein bzw. aus. Key-Value-Attributen wird durch das =-Zeichen ein Wert zugewiesen. Der Wert muss von einfachen oder doppleten Hochkommas (' oder ") umschlossen sein und darf keinen Zeilenumbruch enthalten.

Alles zwischen <!-- und --> wird als Kommentar behandelt und vom Webbrowser ignoriert.

HTML-Dateien haben die Endung .html oder .htm. 

<tag>

<tag>INHALT</tag>

<tag attribut="WERT">INHALT</tag>

<tag attribut1="WERT" attribut2="WERT" attribut3>
    
    <tag attribut>

</tag>

<!-- KOMMENTAR-->
HTML-Tags

Das erste Element in jedem HTML-Dokument muss <!DOCTYPE html> sein. Damit wird dem Browser mitgeteilt, dass es sich um ein HTML5-Dokument handelt.

Das Grundgerüst einer HTML-Seite sieht folgendermaßen aus. Seit HTML5 sind die Tags html, head und body optional.

<!DOCTYPE html>
<html>
    <head>
        <title>Seitentitel</title>
    </head>
    <body>
        <!-- Inhalt -->
    </body>
</html>
Grundgerüst einer HTML-Seite
Tag Beschreibung
<body></body> Enthält den sichtbaren Seiteninhalt
<head></head> Kopfteil enthält nicht sichtbare Metadaten
<html></html> Wurzel einer HTML-Seite
<title></title> Legt den Titel der Seite im Browserfenster oder für Favoriten fest
Tags für die Grundstruktur

Welche Attribute für einen Tag gültig sind ist vom jeweiligen Tag abhängig. Es gibt allerdings eine Auswahl globaler Attribute die auf jeden Tag anwendbar sind.

Attribut Beschreibung Wert
class Ein oder mehrer Klassennamen Alphanumerischer wert ohne Whitespaces oder mehrere Klassen getrennt durch Leerzeichen
hidden Element ausblenden ∅
id Eindeutiger Name Muss ein eindeutiger, alphanumerischer wert ohne Whitespaces sein
lang Sprache des elements de, en, ...
style CSS Properties CSS Properties durch Semikolon getrennt
title Erzeugt einen Tooltip Freitext
Globale Attribute

Überschriften und Absätze

Tag Beschreibung
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> Überschriften
<p></p> Legt einen Absatz fest
Tags zum Festlegen von Überschriften und Absätzen

Markierungen und Hervorhebungen

Tag Beschreibung
<b></b>, <strong></strong> Hervorgehoben (Fett)
<code></code> Programmcode
<del></del> Gelöschter Text (Durchgestrichen)
<i></i> Hervorgehoben (Kursiv)
<ins></ins> Eingefügter Text
<kbd></kbd> Tastatureingabe oder Tastenkürzel
<mark></mark> Markierung
<s></s> Hervorgehoben (Durchgestrichen)
<small></small> Kleingedrucktes
<span></span> Markierung ohne besondere Semantik
<sub></sub> Text tiefgestellt
<sup></sup> Text hochgestellt
<u></u> Hervorgehoben (Unterstrichen)
<var></var> Variable
Tags zum Markieren und Hervorheben von Text

Bereiche

semantic-layout
The Semantic Layout
Tag Beschreibung
<article></article> Artikel
<aside></aside> Seitenleiste
<div></div> Bereich ohne besondere Semantik (division)
<figcaption></figcaption> Titel für figure
<figure></figure> Abbildung mit Titel
<footer></footer> Fußelement
<header></header> Kopfelement
<main></main> Hauptbereich
<nav></nav> Navigationselement
<section></section> Teilbereich
Tags zur Aufteilung in Bereiche

Hyperlinks

Ein Hyperlink (sinngemäß elektronischer Verweis), kurz Link, ist ein Querverweis in einem Hypertext, der funktional einen Sprung zu einem anderen elektronischen Dokument oder an eine andere Stelle innerhalb eines Dokuments ermöglicht. Wenn der Hyperlink ausgeführt wird, wird automatisch das darin angegebene Ziel aufgerufen. Im Allgemeinen wird der Begriff auf das World Wide Web bezogen, in dem Hyperlinks ein Kernbestandteil sind. Inhaltlich entspricht das Konzept von Hyperlinks Querverweisen in der gedruckten Literatur, deren Ziel dort allerdings in der Regel manuell aufgesucht werden muss.

Quelle: Wikipedia

Links können auf Ziele innerhalb einer Seite gesetzt werden. Dabei wird in das href Attribut das #-Zeichen gefolgt von der Id eines Tags geschrieben. Beim Klick auf den Link sollte der Browser zu dem Element mit der entsprechenden Id springen.

Ein Uniform Resource Locator (URL) identifiziert und lokalisiert eine Ressource, wie z. B. eine Website über die zu verwendende Zugriffsmethode (z. B. das verwendete Netzwerkprotokoll wie HTTP oder FTP) und den Ort (engl. location) der Ressource in Computernetzwerken. URLs sind eine Unterart der generellen Identifikationsbezeichnung mittels Uniform Resource Identifiern (URIs). Da URLs die erste und häufigste Art von URIs darstellen, werden die Begriffe häufig synonym verwendet. Im allgemeinen Sprachgebrauch werden URLs auch als Internetadresse oder Webadresse bezeichnet.

Quelle: Wikipedia

Eine URL setzt sich zusammen aus dem verwendeten Protocol gefolgt von der optionalen Angabe eines Benutzernamens mit Passwort, dem Rechnernamen als voll qualifizierten Domain-Namen (FQDN = Fully Qualified Domain Name) mit optionaler Portnummer, ein Pfad auf dem Rechner und abschließend dem Dateinamen. 

http://usr:pwd@example.org:80/demo/example.html?param=val#id
Zusammensetzung einer URL
<a href="https://www.google.de/" target="_blank">Google</a>

<iframe name="f1" width="480" height="320" sandbox></iframe>
Anchor-Tag
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<a></a> Hyperlink zur einer anderen Seite oder Seitenteil href Dateipfad oder URL ../pfad/, http://domain.tld/, mailto:name@domain.tld, #ID
target Bereich/Fenster in dem das Ziel angezeigt werden soll NAME, _blank, _self, _parent, _top
download Ziel zum Download anbieten DATEINAME
<iframe></iframe> Eine andere Seite als Unterelement einbinden height Höhe in Pixeln Bsp: 300
name Name zur refenrenzierung durch target Attribut NAME
sandbox Schränkt Berechtigungen ein allow-forms, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation
src Dateipfad oder URL ../pfad/, http://domain.tld/
width Breite in Pixeln Bsp: 400
Links und Frames

Fotos und Grafiken

<img src="img/picture.jpg" alt="Beschreibung">

<picture>
    <source srcset="picture.webp" type="image/webp">
    <img src="picture.jpg" alt="Picture">
</picture>
Einbindung von Fotos und Grafiken
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<img> Bindet externe Grafikdatei ein alt Alternativbeschreibung des Bildes (erforderlich) Freitext
src Dateipfad oder URL URI
srcset Dateipfad oder URL URI
width, height Breite und/oder Höhe mit der die Grafik angezeigt werden soll in Pixeln Bsp.: 320
<picture> Bindet Grafik mit mehreren Quellen ein ∅
<source> Eine von mehreren Grafikdateien media Quelle auf ein bestimmtes Medium einschränken MEDIAQUERY, all, screen, ...
srcset Dateipfad oder URL URI
type Grafikformat image/jpeg, ...
width, height Breite und/oder Höhe mit der die Grafik angezeigt werden soll in Pixeln Bsp.: 320
Tags für Fotos und Grafiken

Vektorgrafiken bestehen aus mathematischen Formeln für Formen und Linien und sind dadurch beliebig skalierbar, ohne an Qualität zu verlieren. Sie eignen sich für Logos und einfache Designs. Rastergrafiken hingegen bestehen aus Pixeln, einer festen Anzahl von Bildpunkten, und eignen sich für komplexe Bilder wie Fotos, verlieren aber an Qualität, wenn sie vergrößert werden.

vektor-raster
Vektor- vs. Raster-Grafikformat

Alle untern aufgeführten Grafikformate, ausgenommen das JPEG File Interchange Format, können auch zur darstellung kurzer Animationen verwendet werden. In dem Fall sind mehrere Einzelbilder in der Grafikdatei enthalten welche nacheinander in einer Endlosschleife angezeigt werden. Scalable Vector Graphics können ebenfalls Animiert sein, enthalten dann aber keine Einzelbilder sondern Animationslogik.

Bezeichnung Dateiendung Media Type Farbtiefe Komprimierung
AV1 Image File Format (AVIF) .avif image/avif 48-Bit-RGBA Verlustfrei, Verlustbehaftet
Graphics Interchange Format (GIF) .gif image/gif 8-Bit (256 Farben) Verlustfrei
JPEG File Interchange Format (JFIF) .jpg, .jpeg, .jpe image/jpeg 24-Bit-RGB Verlustbehaftet
Portable Network Graphics (PNG) .png image/png 32-Bit-RGBA Verlustfrei
Scalable Vector Graphics (SVG) .svg image/svg+xml 32-Bit-RGBA Keine (Vektorgrafik)
WebP File Format .webp image/webp 32-Bit-RGBA Verlustfrei, Verlustbehaftet
Grafikformate

Zitate und Quellenangaben

<blockquote cite="http://developer.mozilla.org">
    Das ist ein Zitat vom Mozilla Developer Center.
</blockquote>
<cite>Mozilla Developer Center</cite>
Zitat als Block-Element mit Quellenangabe
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<blockquote></blockquote> Erweiterndes Zitat cite Quelle als URL URI
<cite></cite> Referenz zu einer kreativen Arbeit ∅
<q></q> Kurzes Zitat innerhalb eines Textes cite Quelle als URL URI
Tags für Zitate und Quellenangaben

Whitespace

Whitespace (auch Leerraum oder Zwischenraumzeichen) werden solche Zeichen genannt, welche in einem Text normalerweise nur durch Leerflächen dargestellt werden und dennoch (Speicher-)Platz in Anspruch nehmen. In HTML werde alle diese Zeichen, wie beispielsweise Zeilenumbrüche, auch mehrere aufeinanderfolgende Zeichen, immer zu einem einzelnen Leerzeichen zusammengefasst.

Tag Beschreibung
<br> Erzeugt einen Zeilenumbruch (line break)
<pre></pre> Whitespace im Quelltext bleibt erhalten (preformatted text)
<wbr> Legt einen Punkt in einem Wort fest an dem ein Zeilenumbruch eingefügt werden kann (word break opportunity)
Tags zur Beeinflussung des Whitespace-Verhaltens

Metainformationen

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Autorenname">
        <meta name="description" content="Seitenbeschreibung">
        <!-- Weiterleitung nach 3 Sec. -->
        <meta http-equiv="refresh" content="3; URL=/seite2.html">
        <title>Seitentitel</title>
    </head>
    <body>
        <h1>Überschrift<h1>
    </body>
</html>
HTML-Seite mit Metainformationen
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<meta> Metadaten zur Seite hinterlegen charset Bestimmt den Zeichensatz der Seite UTF-8, ISO-8859-1, ASCII, ...
content Wert der Metainformation WERT
http-equiv HTTP-Header refresh, content-type, cache-control, ...
name Bestimmt welche Metainformation author, description, keywords, viewport, ...
Metatags

Sonderzeichen

Zur Kodierung von Sonderzeichen gibt es sogenannte HTML-Entities. Diese bestehen aus einem &-Zeichen, einer Bezeichnung oder #-Zeichen gefolgt von einem Zeichencode und einem abschließendem ;-Zeichen. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Spa&szlig; mit Zeichens&auml;tzen</title>
    </head>
    <body>
        <h1>&Uuml;berschrift<h1>
    </body>
</html>
Seite mit Sonderzeichen als HTML-Entities
Entity Zeichen Beschreibung
&amp; & Und-Zeichen
&auml;, &Auml;, &ouml;, &Ouml;, &uuml;, &Uuml;, &szlig; ä, Ä, ö, Ö, ü, Ü, ß Umlaute
&bdquo;, &ldquo;, &sbquo;, &lsquo;, &rdquo;, &rsquo; „, “, ‚, ‘, ”, ’ Anführungszeichen
&euro;, &cent;, &pound;, &yen; €, ¢, £, ¥ Währungszeicheneichen
&copy;, &reg;, &trade; ©, ®, ™ Copyright- und Trademark-Zeichen
&lt;, &gt; <, > Größer-/Kleinerzeichen
&nbsp;   Nichtumbrechendes Leerzeichen
&shy; - (wenn ein Zeilenumbruch statt findet) Bedingter Trennstrich
HTML-Entities

Listen

<ul>
    <li>One
        <ol>
            <li>First</li>
            <li>Second</li>
        </ol>
    </li>
    <li>Two
        <ol>
            <li>First</li>
            <li>Second</li>
        </ol>
    </li>
</ul>

<dl>
    <dt>Coffee</dt>
    <dd>black hot drink</dd>
    <dt>Milk</dt>
    <dd>white cold drink</dd>
</dl>
Grundgerüst einer HTML-Seite
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<ul></ul> Ungeordnete Liste ∅
<ol></ol> Nummerierte Liste start Startwert 0, 1, 2, 3, 4, ...
type Aufzählungsart 1, A, a, I, i
<li></li> Einzelner Listeneintrag ∅
<dl></dl> Beschreibungsliste ∅
<dt></dt> Begriff Listeneintrag ∅
<dd></dd> Beschreibender Listeneintrag ∅
Aufzählungslisten

Tabellen

Tabellen werden in HTML zeilenweise erstellt. Eine Tabellenzeile (tr) enthält Tabellenzellen (td oder th). Die Zellen an derselben Position in den Zeilen bilden eine Spalte. 

<table>
    <tr>
        <th>A1</th><th>B1</th><th>C1</th>
    </tr>
    <tr>
        <td>A2</td><td>B2</td><td>C2</td>
    </tr>
</table>
Aufbau einer einfachen Tabelle

Tabellen können einen Titel (caption) haben und mit thead, tbody oder tfoot in Bereiche aufgeteilt werden. Mit rowspan und colspan können außerdem Zeilen- bzw. Spaltenübergreifende Zellen erstellt werden. 

<table>
    <caption>Eine Tabelle</caption>
    <thead>
        <tr>
            <th>A1</th><th>B1</th><th>C1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">A2</td><td>B2</td><td>C2</td>
        </tr>
        <tr>
            <td colspan="2">B3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>A4</td><td>B4</td><td>C4</td>
        </tr>
    </tfoot>
</table>
Tabelle mit Bereichen
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<table></table> Definiert eine Tabelle ∅
<tr></tr> Tabellenzeile ∅
<th></th> Tabellenkopfzelle colspan Spaltenbreite 2, 3, 4, 5, ...
rowspan Zeilenbreite 2, 3, 4, 5, ...
<td></td> Normale Tabellenzelle colspan Spaltenbreite 2, 3, 4, 5, ...
rowspan Zeilenbreite 2, 3, 4, 5, ...
<thead></thead> Definiert Kopfbereich ∅
<tbody></tbody> Definiert Hauptbereich ∅
<tfoot></tfoot> Definiert Fußbereich ∅
<caption></caption> Tabellentitel ∅
Tabellentags

Trennlinien

<hr>
Trennlinie
Tag Beschreibung
<hr> Horizontaler Trenner (horizontal rule)
Tag zum setzen einer Trennlinie

Audio und Video

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

<audio src="music.mp3" autoplay loop></audio>
Einbinden von Audio- und Video-Inhalten
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<audio></audio>, <video></video> Bindet Audio/Video-Datei ein autoplay Automatisch starten
controls Player Controls anzeigen
loop Endlosschleife
muted Ton stumm geschaltet
poster Vorschaubild für Videos URI
src Dateipfad oder URL URI
width, height Breite und/oder Höhe des Videos in Pixeln Bsp.: 320
<source> Eine von mehreren Audio-/Video-Quellen media Quelle auf ein bestimmtes Medium einschränken MEDIAQUERY, all, screen, ...
src Dateipfad oder URL URI
type Typ der Video-/Audio-Datei video/webm, audio/ogg, ...
Audio- und Video-Tag

Ein Media-Container ist ein Dateiformat, das einen oder mehrere Medienstreams (wie Audio oder Video) zusammen mit Metadaten kapselt, sodass sie gemeinsam gespeichert und wiedergegeben werden können. Es bestimmt nur, wie diese Daten organisiert und zusammengefügt werden, aber nicht, wie das Video oder der Ton komprimiert (kodiert) sind. Alle modernen Webbrowser unterstützen die Media-Container WebM und MPEG-4. Damit Video und Ton abgespielt werden, müssen aber auch die Verwendeten Codecs vom Webbrowser unterstützt werden.

Bezeichnung Dateiendung Media Type Komprimierung
MPEG-4 Advanced Audio Coding (AAC) Audio Format .m4a audio/mp4 Verlustbehaftet
Free Lossless Audio Codec (FLAC) .flac audio/flac Verlustfrei
MP3 Audio Format .mp3 audio/mpeg Verlustbehaftet
Ogg Vorbis Audio Format .ogg audio/ogg Verlustbehaftet
Ogg Opus Audio Format .opus audio/ogg Verlustbehaftet
Waveform Audio File Format (WAVE) .wav audio/wav Keine
Audioformate
Bezeichnung Dateiendung Media Type Video-Codec Audio-Codec
MPEG-4 Video Format .mp4 video/mp4 Advanced Video Coding (AVC), AOMedia Video 1 (AV1) Advanced Audio Coding (AAC)
WebM Video Format .webm video/webm VP8, VP9, AOMedia Video 1 (AV1) Vorbis, Opus
Videoformate

Untertitel für Audio und Video

<video controls src="video.webm">
    <track kind="subtitles"
           srclang="en"
           src="sub-en.vtt"
           label="eng" default>
    <track kind="subtitles"
           srclang="de"
           src="sub-de.vtt"
           label="deu">
</video>
Track-Tags
Tag Beschreibung Attribut
Bezeichnung Beschreibung Werte
<track> Fügt Text-Track zu video hinzu default Aktiviert von Anfang an
kind Art des Text-Tracks (Standard: subtitles) subtitles, captions, descriptions, chapters
label Titel des Text-Tracks Freitext
src Dateipfad oder URL URI
srclang Sprache des Text-Tracks (Erforderlich bei Untertiteln) de, en, ...
Track-Tag
Bezeichnung Dateiendung Media Type
Web Video Text Tracks Format (WebVTT) .vtt text/vtt
WebVTT-Format

Links