Eine Einführung in die grundlegenden Konzepte von HTML
michael.eichberg@dhbw.de, Raum 149B
2.1.4
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).
Webseiten
Progressive Web-Apps
Desktop Apps (z. B. mit Electron)
1<!DOCTYPE html>2<html lang="de">3<head><title>Eine Webseite</title></head>4<body>5<h1>Informationen</h1>6<p><!-- Ein Kommentar ... -->7Ein einfacher Link auf:8<a href="http://www.michael-eichberg.de">9Michael Eichberg's Homepage10</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.
Web Hypertext Application Technology Working Group
Spezifikationen (siehe [2]), die im Rahmen der Entwicklung von Webseiten/Webanwendungen relevant sind:
CSS: Cascading Style Sheets
JavaScript: ECMAScript (Fetch API, XMLHttpRequest, ...)
DOM: Document Object Model
Encoding: Unicode
HTTP: Hypertext Transfer Protocol
SVG: Scalable Vector Graphics
MathML: Mathematical Markup Language
WebAssembly: Low-Level Bytecode
...
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.
Hinweis
Das DOM, die HTML-Syntax und die XML-Syntax können nicht alle denselben Inhalt darstellen.
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-Dokumente bestehen aus einem Baum von Elementen und Text.
HTML-Dokument
1<!DOCTYPE html>2<html lang="de">3<head><title>Eine Webseite</title></head>4<body>5<h1>Informationen</h1>6<p><!-- Ein Kommentar ... -->7Ein einfacher Link auf8<a href="9http://www.michael-eichberg.de10">11Michael Eichberg's Homepage12</a>.13</p>14</body>15</html>
DOM
1├─DOCTYPE: html2└─html lang="de"3├─head4│ └─title5│ └─#text: Eine Webseite6├─ #text: ⏎7└─body8├─ #text: ⏎␣␣␣␣9├─ h110...
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.
Vertraut machen mit dem DOM
Öffnen Sie eine Webseite (z. B. https://delors.github.io/web-html/folien.de.rst.html)
Öffnen Sie die Entwicklerconsole Ihres Browsers
Lassen Sie sich den Sourcecode anzeigen
Vergleichen Sie den DOM mit dem Sourcecode
Die Dokumente müssen aus den folgenden Teilen in der angegebenen Reihenfolge bestehen:
Optional ein einzelnes U+FEFF Zeichen (Byte-Order-Mark(BOM)).
Eine beliebige Anzahl von Kommentaren und ASCII-Whitespace.
Eine DOCTYPE-Deklaration:
<!DOCTYPE html>.Eine beliebige Anzahl von Kommentaren und ASCII-Whitespace.
Das Dokumentenelement in Form eines html-Elements[3].
Eine beliebige Anzahl von Kommentaren und ASCII-Leerzeichen.
—HTML-Spezifikation
HTML ist nicht case-sensitive, d. h. die Tags html und HTML sind gleichwertig. Wir verwenden jedoch immer die Kleinschreibung.
Start-Tag |
Inhalt des Elements |
End-Tag |
|
||
Element |
||
Warnung
Die Spezifikation verlangt nicht in allen Fällen ein Start und Endtag. Es ist jedoch eine gute Praxis, diese immer zu verwenden, wenn ein Endtag möglich ist.
Im Fall von Elementen ohne Endtag (z. B. <wbr>) darf auch keines hinzugefügt werden!
Beispiel
1<!DOCTYPE HTML><head>2<title>Hello</title>3</head>4<body>5<p>Welcome to this example.</p>6</body>7</html>
Ist ein gültiges Dokument. Es ist jedoch keine gute Praxis (hier wurde das Start-Tag des html Elements weggelassen).
Sechs Typen von HTML-Elementen werden unterschieden:
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
script, style
textarea, title
template
Elemente aus dem MathML- und SVG-Namensraum.
Alle weiteren HTML Elemente sind normale Elemente.
Attribute liefern Informationen über das Element.
Start-Tag |
||
|
||
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. ist <input type="text"> und <input type="TEXT"> gleichwertig, aber <div id="text"> und <div id="Text"> nicht!
Sollte man innerhalb eines Attributwertes Anführungszeichen verwenden wollen, dann sind HTML Entities notwendig: " für " und ' für '
1<!DOCTYPE HTML>2<html lang="de">3<head>4... Metadaten, Skripte, Stylesheets, etc. ...5</head>67<body>8... das Dokument ...9</body>10</html>
<head> Element - „obligatorische“ ElementeIm Head sollten immer die folgenden Informationen deklariert werden:
Der Titel des Dokuments mit Hilfe des <title>...</title> elements
Der verwendete Zeichensatz mit Hilfe des passenden meta elements: <meta charset="utf-8">
Konfiguration des Viewports[5] (insbesondere für mobile Geräte relevant): <meta name="viewport" content="width=device-width, initial-scale=1.0">
Der Viewport (Ansichtsbereich) des Browsers ist der Bereich des Fensters, in dem der Webinhalt zu sehen ist.
Insbesondere Mobilgeräte haben oft entweder eine geringere Auflösung als Desktop-Computer oder verwenden HiDPI Screens. Beides 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.
Device |
Viewport Size (width x height) |
Device Resolution (width x height) |
|---|---|---|
iPhone 12 |
390 x 844 |
1170 x 2532 |
iPhone 12 Mini |
360 x 780 |
1080 x 2340 |
iPhone 12 Pro |
390 x 844 |
1170 x 2532 |
iPhone 12 Pro Max |
428 x 926 |
1248 x 2778 |
Siehe: https://experienceleague.adobe.com/en/docs/target/using/experiences/vec/mobile-viewports.html?lang=de für weitere Details.
<head> Element - weitere ElementeIm Head können weitere Informationen und Pragmas deklariert werden bzw. sollten dort deklariert werden, wenn sie benötigt werden:
<script [src="script.js" [defer|async]]></script>
Mittels <link rel="stylesheet" href="style.css"> oder <style>...</style>
<link rel="icon" type="image/png" href="/img/icon.png" />
http-equiv ≘ HTML equivalent; d. h. die Informationen könnte auch im HTTP Header stehen.
<meta charset="utf-8"> (alt)
<meta http-equiv="Content-Security-Policy" content="default-src https:">
Äquivalente HTTP Header Definition:
Content-Security-Policy: default-src https:
<meta name="author" content="Michael Eichberg">
Pragmas sind Anweisungen, die die Steuerung/Verarbeitung beeinflussen.
Semantisches HTML
Verwendung von HTML Elementen, die die Bedeutung des Inhalts klar machen.
Bessere Zugänglichkeit
Bessere Suchmaschinen-Optimierung
Beispiel Elemente
<header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, <address>, <em>, <s>, ...
Semantikfreies HTML
Verwendung von <div> und <span> Elementen, um den Inhalt zu strukturieren.
Keine klare Bedeutung des Inhalts.
1<div>2<span>Zwei Wörter</span>3<div>4<a>Ein Wort</a><a>Ein Wort</a>5</div>6</div>7<div>8<div>9<div>Viele Wörter</div>10</div>11<div>12<div>Erste Worte</div>13<div>DaDaDa</div>14<div>BlaBlaBla</div>15</div>16</div>17<div><span>Alle Worte</span></div>
1<header>2<h1>Zwei Wörter</h1>3<nav>4<a>Ein Wort</a><a>Ein Wort</a>5</nav>6</header>7<main>8<header>9<h1>Viele Wörter</h1>10</header>11<section>12<h2>Erste Worte</h2>13<p>DaDaDa</p>14<p>BlaBlaBla</p>15</section>16</main>17<footer><p>Alle Worte</p></footer>
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: <div role="navigation">...</div>
Verwenden Sie HTML zur Strukturierung von Inhalten, und nicht, um das Aussehen der Inhalte zu definieren.
Das Aussehen ist Sache von CSS.
header, footer, nav, article, section, aside, main, figure, address, ...
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.
sind wahr, wenn diese angegeben sind und falsch andernfalls.
Z. B. <input id="the-checkbox" type="checkbox" checked>.
definieren eine begrenzte Anzahl von gültigen Werten sowie einen Default, der verwendet wird, wenn kein Wert angegeben ist, aber das Attribut verwendet wird.
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.
Veraltet
Event Handler Attribute: onclick, onclose, ...
Boolsche Attribute sollten in JavaScript durch Hinzufügen bzw. Löschen gesetzt werden (und nicht durch die Manipulation des Wertes eines Attributs).
1const checkbox = document.getElementById("the-checkbox");2checkbox.removeAttribute("checked");3checkbox.setAttribute("checked");
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:
<meta name="author" content="
⇥ ⇥Michael Eichberg
⇥ ⇥Professor
">
Dies ist äquivalent zu:
<meta name="author" content="Michael Eichberg Professor">
id:verwendet, um ein Element eindeutig zu identifizieren
(Welches man in CSS oder JavaScript per Selektor referenzieren kann.)
als Ziel von Hyperlinks (<a href="#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.
<p>Inhalt</p>
<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)<q lang="de">Ein Zitat</q>
<q lang="en">A quote</q>
<em> (emphasized) und <strong>
<small> - für Randbemerkungen und Kleingedrucktes (d. h. small steht nicht für unwichtige(re)n Text oder die Schriftgröße)
<s>
<cite> - für den Titel eines Werkes oder einer Publikation
<dfn [title="der definierte Begriff"]> - für die Definition eines Begriffs
<abbr title="HyperText Markup Language">HTML</abbr> - für Abkürzungen
<time datetime="2021-10-01">1. Oktober 2021</time> - für Zeitangaben
datetime dient der Zeitangabe in einem maschinenlesbaren Format (z. B. für Suchmaschinen)
<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><code class="language-java">...</code></pre>)
<var> - für Variablen in mathematischen oder Programmierkontexten
<kbd> - für Tastatureingaben oder andere Benutzereingaben
Drücken Sie <kbd>cmd</kbd> + <kbd>c</kbd> zum Kopieren.
<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.
<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>.
<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>
<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.
<pre>...</pre> - für Text, der so angezeigt werden soll, wie er geschrieben wurde.
<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!
<wbr> (word break opportunity) - ein optionaler Zeilenumbruch
Beispiel:
<p> Er schrie:
<q lang="de">Lasst<wbr>Mich<wbr>In<wbr>Ruhe!</q>
</p>
<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.
<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.
<data value="8">Acht</data>
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<a href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>2<a href="#teachers">Unsere Lehrenden</a>3<a href="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).
1<a target="_blank" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>2<a target="_self" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>3<a target="_top" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>4<a target="_parent" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>5<a target="dhbw" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>
Öffnet den Link in einem neuen Fenster oder Tab
Öffnet den Link im gleichen Browsing-Kontext
Öffnet den Link im obersten Browsing-Kontext
Ö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.
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>
Geordnete Listen: <ol [reversed] [start=<NO>]>
<ol start="0">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li value="10">Dritter Punkt</li>
</ol>
Ungeordnete Listen: <ul>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
Das <nav> Element wird verwendet, um Navigationslinks zu gruppieren.
Insbesondere für Screenreader und die Suchmaschine relevant.
Beispiel
1<nav id="ld-menu">2<button type="button"3id="ld-slides-button"4aria-label="show slides"></button>5<button type="button"6id="ld-slides-with-nr-button"7aria-label="show slides with numbers"></button>8<button type="button"9id="ld-help-button"10aria-label="show help"></button>11</nav>
Verwendet für die Darstellung von tabellarischen Daten mit Zeilen und Spalten.
Achtung!
Die Verwendung von <table> sollte sich nach dem Inhalt richten!
Tabellen sollten nicht zum Layout von Webseiten verwendet werden.
Aufbau von Tabellen:
1<table>2<caption>Logische Operation</caption>3<thead>4<tr><th>not xor</th><th>1</th><th>0</th></tr>5</thead>6<tbody>7<tr><th>1</th><td>1</td><td>0</td></tr>8<tr><th>0</th><td>0</td><td>1</td></tr>9</tbody>10<tfoot></tfoot>11</table>
| not xor | 1 | 0 |
|---|---|---|
| 1 | 1 | 0 |
| 0 | 0 | 1 |
Zellen, die über mehrere Spalten oder Zeilen gehen können mit Hilfe von colspan und rowspan Attributen definiert werden.
Spalten und Zeilen können mit Hilfe von <col> und <colgroup> Elementen definiert werden.
Bilder werden mit dem <img> Element eingebunden.
<img src="path/filename" alt="descriptive text" />
Das src-Attribut enthält die Adresse des Bildes.
Das alt-Attribut enthält eine Beschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann.
Die width und height-Attribute können und sollten verwendet werden, um die ursprünglich reservierte Größe des Bildes festzulegen.
Lazy loading ist durch die Verwendung des loading Attributs möglich (loading="lazy").
Folgende Bildformate werden breit unterstützt: jpg, png, gif, svg und webp.
Responsive Images werden über das srcset Attribut unterstützt:
1<img src="images/dhbw.png" alt="Logo der DHBW"2srcset="images/dhbw.png 400w, images/dhbw-xl.jpg 800w"3sizes="(max-width: 800px) 400px, 800px" />
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:
img {
max-inline-size: 100%;
block-size: auto;
}
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.
Beispiel
<form method="GET"
name="Folienauswahl">
<label for="slide">Folie:</label>
<select name="ld-slide-no" id="slide">
<option value="8">Elemente</option>
<option value="10">Attribute</option>
<option value="29">Formulare</option>
</select>
<input type="submit" value="Submit">
</form>
Für weitere Informationen bzgl. Formulare siehe MDN Web Docs oder Web.dev.
Anzeigen von optionalen Details mit Hilfe des <details> Elements.
1<details [open]>2<summary>Abstract</summary>3<p>Password guessing ...</p>4</details>
Geschlossen - Details werden erst nach einem Klick angezeigt:
Password guessing ...Abstract
Offen - Details werden direkt angezeigt:
Password guessing ...Abstract
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.
Beispiel[7]:
1<dialog>2<h1>Dialog</h1>3<p>Dialog Inhalt</p>4<button formmethod="dialog">5OK6</button>7<button autofocus>Abbrechen</button>8</dialog>
JavaScript Code zum Öffnen des Dialogs wird hier nicht gezeigt.
Ausgewählte Zeichen können (in manchen Kontexten) nur durch HTML Entities dargestellt werden:
< durch < oder < (<)
> durch: > oder > (>)
& durch: & oder & (&)
" durch: " oder " (")
␣ durch: ( )
Das <iframe> Element ermöglicht das Einbetten von Webseiten in Webseiten:
1<iframe src="https://www.dhbw-mannheim.de"2width="600"3height="400">4iframes are not supported</iframe>56<iframe srcdoc="7<h1>HTML</h1>8<p>HTML is a markup language.</p>"9width="600"10height="400">11iframes are not supported12</iframe>
Hinzufügen von Metadaten (<meta name="" content="">)
class Attribute
„Custom Elements“ (z. B. <my-element>)
Autoren können APIs mit Hilfe des JavaScript-Prototyping-Mechanismus erweitern
keine border Attribute auf <img> Elementen
keine charset Attribute auf <script> Elementen (UTF-8 ist gefordert)
keine language Attribute auf <script> Elementen (JavaScript ist der Standard)
kein type Attribute auf <style> Elementen (text/css ist der Standard)
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
[...] 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. [...]
—Sept. 2024; Golem.de - Deutsche Webseiten sind versetzungsgefährdet
Einige Anforderungen[9]:
„Harte“ Kriterien
die Schrift auf einer Website wenigstens 16 Pixel groß und
Zeilen nicht mehr als 80 Zeichen lang sein sollen.
Der Abstand dazwischen soll das 1,5-Fache ihrer Höhe betragen.
Um einen ausreichenden Kontrast zu erzeugen, muss die Schrift wenigstens 4,5-mal dunkler sein als der Hintergrund.
Klickflächen schließlich müssen wenigstens 44 x 44 Pixel groß sein.
„Weiche“ Kriterien
Starke Animationen sind auf barrierefreien Seiten tabu.
das Layout der Seite soll außerdem einfach, logisch und auf jeder Unterseite einheitlich aufgebaut sein.
Sept. 2024; Golem.de - So setzen gute Webdesigner Barrierefreiheit um
Eine einfache HTML Webseite
Erzeugen Sie ein HTML-Dokument, das wie das Dokument auf der rechten Seite aussieht. Verwenden Sie kein CSS!
Nutzen Sie den HTML Validator, um zu verifizieren, dass Ihr Dokument valide ist.
Achten Sie auf eine korrekte Strukturierung des Dokuments und verwenden Sie semantische Elemente, wo immer dies sinnvoll ist. Denken Sie auch grundlegend an die Barrierefreiheit.
HTML Dialog
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. <form method="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.