Bei der Erstellung der Unterlagen wurden KI Assistenten (insbesondere Claude
aber ggf. auch ChatGPT, Ollama mit Gemma/LLama/Qwen oder OpenCode mit
Kimi/Qwen/Deepseek...) unterstützend eingesetzt.
Dies erfolgte insbesondere zur Unterstützung bei der Generierung von Grafiken
(d. h. SVG Dateien), oder um sich Übersichtstabellen generieren zu lassen.
Weiterhin wurde KI zur allgemeinen Qualitätssicherung eingesetzt.
Inhalte, die ggf. von der KI vorgeschlagen wurden, wurden im Falle der
Übernahme explizit validiert und angepasst.
Einführung
HTML(5)
Gegenstand:
Sprache zur Beschreibung der Darstellung von Inhalten (Markup Language), zwischen denen „navigiert“ werden kann (Hypertext).
Ursprünglich war HTML ein Akronym für HyperText Markup Language; heutzutage wird HTML als Eigenname verwendet.
Auszeichnungssprache abgeleitet aus SGML (Standard Generalized Markup Language).
Verwendung:
Webseiten
Progressive Web-Apps
Desktop Apps (z. B. mit Electron)
Ein einfaches HTML(5) Dokument
1<!DOCTYPE html> 2<htmllang="de"> 3<head><title>Eine Webseite</title></head> 4<body> 5<h1>Informationen</h1> 6<p><!-- Ein Kommentar ... --> 7 Ein einfacher Link auf:
8<ahref="http://www.michael-eichberg.de"> 9 Michael Eichberg's Homepage
10</a>.
11</p>12</body>13</html>
Im Folgenden werden wir uns mit den grundlegenden Konzepten von HTML beschäftigen und die wichtigsten Bestandteile von HTML-Dokumenten kennenlernen. Das Ziel ist es, ein Verständnis für HTML zu entwickeln, dass für die fundierte Entwicklung von Webseiten erforderlich sind.
Die HTML-Spezifikation definiert eine abstrakte Sprache zur Beschreibung von Dokumenten. XML und HTML sind konkrete Syntaxbeschreibungen dieser abstrakten Sprache.
HTML ist eine Beschreibungssprache für entsprechende Dokumente.
XML ist eine allg. Beschreibungssprache, die auch für HTML verwendet wurde. (MIME Type: application/xhtml+xml)
(Heutzutage wird XML zur Beschreibung von HTML-Dokumenten nicht mehr verwendet.)
Das DOM (Document Object Model) ist die In-Memory Darstellung eines Dokuments.
Das DOM ist (auch) eine API, um HTML-Dokumente zu manipulieren.
Beispiele für Unterschiede
Namespaces werden nicht von der HTML-Syntax unterstützt, aber sowohl vom DOM als auch der XML-Syntax unterstützt.
noscript wird nur in HTML-Dokumenten unterstützt.
Kommentare, die --> enthalten, werden nur vom DOM unterstützt; in einem HTML-Dokument beendet dies den Kommentar.
HTML in a Nutshell
HTML-Dokumente bestehen aus einem Baum von Elementen und Text.
HTML-Dokument
1<!DOCTYPE html> 2<htmllang="de"> 3<head><title>Eine Webseite</title></head> 4<body> 5<h1>Informationen</h1> 6<p><!-- Ein Kommentar ... --> 7 Ein einfacher Link auf
8 <a href="
9 http://www.michael-eichberg.de
10 ">
11 Michael Eichberg's Homepage
12</a>.
13</p>14</body>15</html>
Mehrere HTML-Dokumente bilden ggf. auf denselben DOM ab. Zum Beispiel werden die Tags als solches gar nicht abgebildet und wenn im HTML Code ein optionales (schließendes) Tag fehlt, dann ist dies im DOM nicht mehr ersichtlich.
Alle weiteren HTML Elemente sind normale Elemente.
Attribute in HTML
Attribute liefern Informationen über das Element.
Start-Tag
<a class="obsolete" href="#top" >...
Attribute
Attribute kommen nur beim Start-Tag vor.
Attribute (in HTML) können, müssen aber kein Wert haben (Boolsche Attribute).
Attributwerte sollten in Anführungszeichen (quoted) (entweder: " oder ') stehen, müssen aber nicht.
Werte ohne Anführungszeichen dürfen keine Leerzeichen oder Anführungszeichen enthalten.
Welche Anführungszeichen verwendet werden, ist egal. Es ist jedoch eine gute Praxis, immer die gleichen Anführungszeichen zu verwenden.[4]
Konkrete Attributwerte aus der HTML-Spezifikation sind case-insensitive; andere Werte sind es nicht.
Im Allgemeinen sollten Attributwerte klein geschrieben werden. Selektoren in CSS und JavaScript sind case-sensitive.
Z. B. sind <inputtype="text"> und <inputtype="TEXT"> gleichwertig, aber <divid="text"> und <divid="Text"> nicht!
HTML-Grundgerüst
1<!DOCTYPE HTML> 2<htmllang="de"> 3<head> 4 ... Metadaten, Skripte, Stylesheets, etc. ...
5</head> 6 7<body> 8 ... das Dokument ...
9</body>10</html>
HTML <head> Element - „obligatorische“ Elemente
Im Head sollten immer die folgenden Informationen deklariert werden:
Titel:
Der Titel des Dokuments mit Hilfe des <title>...</title> elements
Zeichensatz:
Der verwendete Zeichensatz mit Hilfe des passenden meta elements: <metacharset="utf-8">
Viewport:
Konfiguration des Viewports[5] (insbesondere für mobile Geräte relevant): <metaname="viewport"content="width=device-width, initial-scale=1.0">
Insbesondere Mobilgeräte verwenden HiDPI Screens. Dies führt dazu, dass die Webseiten nicht wie gewünscht aussehen. In diesem Fall verwenden die Browser für die Webseiten einen virtuellen Viewport mit (z. B.) 960px und skalieren dann die Seite (z. B.) auf 390px herunter. Wenn dieses Verhalten nicht gewünscht ist — z. B. weil die Seite responsive ist oder von vorneherein auf mobile Endgeräte ausgerichtet ist — dann ist auf jeden Fall eine Viewport Konfiguration notwendig.
Semantische Informationen im DOM zu haben, ist insbesondere für die Barrierefreiheit notwendig.
Alternativ zur Verwendung von semantischen Elementen können auch generische Attribute mit dem role Attribute versehen werden, um die Bedeutung des Elements zu spezifizieren: <divrole="navigation">...</div>
HTML dient der Strukturierung von Inhalten
Verwenden Sie HTML zur Strukturierung von Inhalten, und nicht, um das Aussehen der Inhalte zu definieren.
In Hinblick auf die konkrete Semantik eines Elements gibt es Unterschiede wo und wie oft diese verwendet werden.
Ein footer Element innerhalb eines article Elements hat eine andere Bedeutung als ein footer Element auf oberster Ebene.
Ein main Element sollte nur einmal pro Dokument verwendet werden.
Überschriften: h1, h2, h3, h4, h5, h6
Überschriften sollten in der richtigen Reihenfolge verwendet werden.
Überschriften gruppiert mit zugehörigem Inhalt: hgroup.
Das hgroup-Element stellt eine Überschrift und den zugehörigen Inhalt dar. Dient dazu eine Überschrift mit einem oder mehreren p-Elementen zu gruppieren. Zum Beispiel für eine Unterüberschrift oder einen alternativen Titel.
Attribute - Typen
Boolsche Attribute:
sind wahr, wenn diese angegeben sind und falsch andernfalls.
Z. B. <inputid="the-checkbox"type="checkbox"checked>.
Boolsche Attribute sollten in JavaScript durch Hinzufügen bzw. Löschen gesetzt werden (und nicht durch die Manipulation des Wertes eines Attributs).
definieren eine begrenzte Anzahl von gültigen Werten sowie einen Default, der verwendet wird, wenn kein Wert angegeben ist, aber das Attribut verwendet wird.
Globale Attribute:
können für jedes Element verwendet werden; sind aber nicht immer sinnvoll.[6]
Globale HTML-Attribute sind Z. B. id, class, data-*, autofocus, role, lang, style, popover, tabindex.
Attribute - Werte
Der Wert eines Attributs kann über mehrere Zeilen gehen solange diese keine Anführungszeichen enthalten. Zeilenumbrüche und Einrückungen (mit Tabulatoren (⇥)) werden dabei automatisch gefiltert.
Zum Beispiel kann der content-Wert des meta-Elements wie folgt geschrieben werden:
verwendet, um ein Element eindeutig zu identifizieren
(Welches man in CSS oder JavaScript per Selektor referenzieren kann.)
als Ziel von Hyperlinks (<ahref="#id">)
im Rahmen der Unterstützung von Barrierefreiheit
der Wert ist case-sensitive
Best Practice: Kleinbuchstaben und Bindestriche verwenden (Unterstriche sind erlaubt aber im Zusammenhang mit CSS nicht optimal).
class:
das class-Attribut ermöglicht es Elemente mit CSS und JavaScript anzusprechen
dient keinem anderen Zweck in HTML
wird sehr häufig von Frameworks und Bibliotheken verwendet
style:
Das style-Attribut ermöglicht die (ad-hoc) Anwendung von Inline-Styles auf das entsprechende Element (nicht empfohlen).
data-*:
Das data-*-Attribut ermöglicht es, benutzerdefinierte Daten an das Element zu binden, die von JavaScript verwendet werden können. * kann ein beliebiger Name sein, aber nicht xml oder : enthalten.
HTML - logische Gruppierung von Text
Paragraphen:
<p>Inhalt</p>
Zitate:
<blockquote> und <q> (für kurze Zitate innerhalb eines Absatzes)
Das Inline-Zitat-Element <q> fügt der Sprache entsprechende Anführungszeichen hinzu.
Beispiel
Ein Zitat (deutsch)
A quote (englisch)
<qlang="de">Ein Zitat</q><qlang="en">A quote</q>
Betonung:
<em> (emphasized) und <strong>
Randbemerkungen:
<small> - für Randbemerkungen und Kleingedrucktes (d. h. small steht nicht für unwichtige(re)n Text oder die Schriftgröße)
Veraltet bzw. nicht mehr korrekt:
<s>
Zitierung:
<cite> - für den Titel eines Werkes oder einer Publikation
Definitionen:
<dfn[title="der definierte Begriff"]> - für die Definition eines Begriffs
Abkürzungen:
<abbrtitle="HyperText Markup Language">HTML</abbr> - für Abkürzungen
Zeitangaben:
<timedatetime="2021-10-01">1. Oktober 2021</time> - für Zeitangaben
datetime dient der Zeitangabe in einem maschinenlesbaren Format (z. B. für Suchmaschinen)
Code:
<code> - für Code; für das Darstellen von Code-Beispielen wird code häufig mit <pre> kombiniert; die Sprache des Codes wird dann über ein class Attribute spezifiziert (z. B. <pre><codeclass="language-java">...</code></pre>)
Variablen:
<var> - für Variablen in mathematischen oder Programmierkontexten
(Tastatur-)Eingaben:
<kbd> - für Tastatureingaben oder andere Benutzereingaben
Drücken Sie <kbd>cmd</kbd> + <kbd>c</kbd> zum Kopieren.
Hoch-/Tiefstellung:
<sup> und <sub> - für Hoch- und Tiefstellung, die nicht typographischen Zwecken dient, sondern inhaltlichen Zwecken.
H<sub>2</sub>O steht für Wasser.
Text mit abweichender Bedeutung:
<i> - Text, der von normaler Prosa abweicht wie z. B. eine taxonomische Bezeichnung, ein technischer Begriff, ...
In der Biologie gehört der Mensch zur Gattung <i>Homo</i>.
Text mit erhöhter Aufmerksamkeit:
<b> - Text, der erhöhte Aufmerksamkeit erfordert, aber nicht unbedingt betont werden muss; z. B. Schlüsselwörter in einem Artikel.
<p>Das <b>Wetter</b> ist heute schön.</p>
Text mit erhöhter Bedeutung:
<mark> - Text, der hervorgehoben werden soll, z. B. Suchergebnisse.
Es gibt weitere Elemente, die für spezielle Anwendungsfälle verwendet werden können. Siehe WHATWG.
HTML - physische Auszeichnung von Text
Vorformatierter Text:
<pre>...</pre> - für Text, der so angezeigt werden soll, wie er geschrieben wurde.
Zeilenumbrüche:
<br> - für Zeilenumbrüche, die inhärenter Teil der Daten sind wie zum Beispiel bei Adressen. D. h. sollte nicht innerhalb von Text verwendet werden!
Optionale Zeilenumbrüche:
<wbr> (word break opportunity) - ein optionaler Zeilenumbruch
Beispiel:
<p> Er schrie:
<qlang="de">Lasst<wbr>Mich<wbr>In<wbr>Ruhe!</q></p>
HTML - <span> und <div>
<span> und <div> sind generische Container-Elemente, die verwendet werden, um Text oder andere Elemente zu gruppieren.
<span> ist ein Inline-Element
<div> ist ein Block-Element
beide werden häufig verwendet, um CSS-Klassen zuzuweisen, um den Inhalt zu gruppieren oder um den Inhalt zu manipulieren.
HTML - <data>
Das <data>-Element ermöglicht es, maschinenlesbare Daten an ein Element zu binden, die dann von JavaScript verwendet werden können.
Die maschinenlesbaren Daten werden im value Attribut gespeichert.
<datavalue="8">Acht</data>
HTML - Links
Hyperlinks werden mit dem <a> Element erstellt.
Der href-Attribut enthält die Adresse des Ziels (innerhalb des gleichen Dokuments, auf einer anderen Webseite, per E-Mail, ...)
1<ahref="https://www.dhbw-mannheim.de">DHBW Mannheim</a>2<ahref="#teachers">Unsere Lehrenden</a>3<ahref="mailto:michael.eichberg@dhbw.de">E-Mail: Michael Eichberg</a>
Externer Link
Interner Link (link fragment identifier) auf ein Element mit der ID teachers
E-Mail Link - kann ergänzt werden durch subject und body Parameter innerhalb des href Attributs.
Das target-Attribut ermöglicht die Definition des Browsing-Kontextes für die Link-Navigation (und die Formularübermittlung).
Öffnet den Link im übergeordneten Browsing-Kontext
Öffnet den Link im Browsing-Kontext mit dem Namen dhbw (Beispiel: DHBW Mannheim)
_self, _top und _parent sind relativ zum aktuellen Browsing-Kontext und unterscheiden sich nur, wenn die Seite in einem Frame oder einem <iframe> angezeigt wird.
Das rel-Attribut legt die Art des Links fest und definiert die Beziehung zwischen dem aktuellen Dokument und der Ressource, auf die der Hyperlink verweist. (Z. B. rel="license", rel="author" oder rel="noopener"; siehe MDN rel attribute)
Durch die Zuweisung zu einem Browsing-Kontext kann verhindert werden, dass dieselbe Seite X-mal geöffnet wird, wenn ein Nutzer auf den Link klickt.
HTML - Listen
Drei Arten von Listen werden unterstützt, die beliebig verschachtelt werden können:
Definitionslisten: <dl>
<dl><dt>Erster Begriff</dt><dd>Erklärung des 1. Begriffs</dd><dt>Zweiter Begriff</dt><dd>Erklärung des 2. Begriffs</dd></dl>
Weitere Responsive Features) werden mittels CSS ermöglicht. Um zum Beispiel zu verhindern, dass ein Bild größer als eine Textzeile wird, kann folgendes CSS definiert werden:
1img{2max-inline-size: 100%;3block-size: auto;4}
HTML - Formulare
Formulare werden mit dem <form> Element erstellt.
action enthält die Adresse, an die die Formulardaten gesendet werden.
method definiert die Methode, die zum Senden der Daten verwendet wird (GET oder POST).
name setzt den Namen des Formulars.
target enthält den Namen des Browsing-Kontexts, in dem die Antwort angezeigt wird.
autocomplete ermöglicht das automatische Ausfüllen von Formularen.
novalidate verhindert die Validierung der Formulardaten durch den Browser.
accept-charset definiert die Zeichencodierung, die zum Senden der Formulardaten verwendet wird.
Formularelemente werden mit dem <input> Element erstellt.
type definiert den Typ des Formularelements.
name definiert den Namen des Formularelements.
value definiert den Wert des Formularelements.
placeholder definiert den Platzhaltertext des Formularelements.
required definiert, ob das Formularelement erforderlich ist.
disabled definiert, ob das Formularelement deaktiviert ist.
autofocus definiert, ob das Formularelement den Fokus erhält.
Geschlossen - Details werden erst nach einem Klick angezeigt:
Abstract
Password guessing ...
Offen - Details werden direkt angezeigt:
Abstract
Password guessing ...
HTML - Dialoge
Dialoge werden mit Hilfe des <dialog> Elements erstellt. Dialoge sind spezielle Fenster, die den Fokus auf sich ziehen und die Interaktion mit dem Rest der Seite unterbrechen - falls diese modal sind.
1<dialog>2<h1>Dialog</h1>3<p>Dialog Inhalt</p>4<buttonformmethod="dialog">5 OK
6</button>7<buttonautofocus>Abbrechen</button>8</dialog>
HTML Entities
Ausgewählte Zeichen können (in manchen Kontexten) nur durch HTML Entities dargestellt werden:
< durch < oder < (<)
> durch: > oder > (>)
& durch: & oder & (&)
" durch: " oder " (")
␣ durch: ( )
Eingebettet Webseiten
Das <iframe> Element ermöglicht das Einbetten von Webseiten in Webseiten:
1<iframe src="https://www.dhbw-mannheim.de"
2 width="600"
3 height="400">
4 iframes are not supported</iframe> 5 6<iframe srcdoc="
7<h1>HTML</h1> 8<p>HTML is a markup language.</p>"
9 width="600"
10 height="400">
11 iframes are not supported
12</iframe>
<iframe width="100%"
style="
border:1px solid black;
box-shadow: 2px 2px gray"
srcdoc='
<head>{{ld-embedded-iframe.head.frag.html}}</head>
<body>
<h1>HTML</h1>
<p>HTML is a markup language.</p>
</body>
'>
iframes are not supported
</iframe>
HTML Erweiterbarkeit
Hinzufügen von Metadaten (<metaname=""content="">)
class Attribute
„Custom Elements“ (z. B. <my-element>)
Autoren können APIs mit Hilfe des JavaScript-Prototyping-Mechanismus erweitern
Veraltetes - aber noch unterstütztes - HTML
charset Attribute auf <script> Elementen (UTF-8 ist gefordert)
language Attribute auf <script> Elementen (JavaScript ist der Standard)
type Attribute auf <style> Elementen (text/css ist der Standard)
HTML - „nicht mehr unterstützt (Stand April 2024)“
Nicht mehr unterstützte Elemente (Auswahl):
<big>
<blink>
<center>
<font>
<marquee>
<nobr>
<tt>
<menuitem>
...
Nicht mehr unterstützte Attribute (Auswahl):
align bei <h1> bis <h6> Elementen
bgcolor bei <body> Elementen
charset bei <a> und <link> Elementen
name bei <img>, <option>, ... Elementen
Barrierefreiheit ist verpflichtend
[...] Webseiten, Onlineshops, Apps, Onlinebuchungs- und Ticketdienste, Fahrkartenautomaten, Selbstbedienungs- und Zahlungsterminals, Telefon- und Messenger-Dienstleistungen sowie E-Book-Reader ab Juni 2025 barrierefrei sein müssen. Denn am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG)[8] in Kraft. [...]
[...] Diese [die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)] regelt, wie Behörden und Ministerien Webseiten gestalten müssen. In Paragraf 3 Absatz 2 ist festgelegt, dass diese dann als barrierefrei anzusehen sind, wenn sie Normen erfüllen, die im Amtsblatt der EU genannt werden – beispielsweise die EN 301 549 oder die Web Content Accessibility Guidelines 2.1 (WCAG) des World Wide Web Consortiums.
[...] Verstöße gegen das Barrierefreiheitsstärkungsgesetz [...] muss mit einem Bußgeld bis zu 100.000 Euro rechnen. [...]
Erstellen Sie folgende Webseite (ohne Verwendung von CSS und/oder JavaScript):
Nach dem Laden der Seite
Nach dem Schließen des Dialogs
Verwenden Sie das <dialog> Element, um den Dialog zu erstellen. Damit der Dialog direkt beim Laden geöffnet ist, verwenden Sie das boolsche Attribut open. Für den Schließen-Button verwenden Sie ein <form> Element mit dem Attribut method="dialog" und ein Button-Element (z. B. <formmethod="dialog"><button>X</button></form>).
Sie können das closedby-Attribut verwenden (see WhatWg closedby-attribute), um den Dialog zu schließen, wenn der Benutzer außerhalb des Dialogs klickt.
Die Definition von Trumpismus finden Sie hier: Wikipedia - Trumpismus; Sie können auch jegliche andere Definition verwenden.
