Eine Einführung in die grundlegenden Konzepte von HTML
michael.eichberg@dhbw.de, Raum 149B
2.0.0
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 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.
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 ein 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 auf
8<a href="
9http://www.michael-eichberg.de
10">
11Michael Eichberg's Homepage
12</a>.
13</p>
14</body>
15</html>
DOM
1├─DOCTYPE: html
2└─html lang="de"
3├─head
4│ └─title
5│ └─#text: Eine Webseite
6├─ #text: ⏎
7└─body
8├─ #text: ⏎␣␣␣␣
9├─ h1
10...
Mehrere HTML Dokumente bilden ggf. auf den selben 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 BYTE ORDER MARK (BOM) Zeichen.
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>
[4]) darf auch keines hinzugefügt werden!
<wbr>
steht für Line Break Opportunity.
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.[5]
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... Meta-Daten, Scripte, 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[6] (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>
, ...
Semantik freies 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.[7]
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 typographisch 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, ...
Brot besteht aus <i>Mehl</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">Email: 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 die selbe 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.
Das width
und height
-Attribut können und sollten verwendet werden, um die 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[8]:
1<dialog>
2<h1>Dialog</h1>
3<p>Dialog Inhalt</p>
4<button formmethod="dialog">
5OK
6</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 supported
12</iframe>
Hinzufügen von Meta-daten (<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)[9] 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[10]:
„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.