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 ein 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 <ahref="
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 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.
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[6] (insbesondere für mobile Geräte relevant): <metaname="viewport"content="width=device-width, initial-scale=1.0">
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.
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
Boolsche Attribute:
sind wahr, wenn diese angegeben sind und falsch andernfalls.
Z. B. <inputid="the-checkbox"type="checkbox"checked>.
Aufgezählte Attribute (enumerated values):
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.[7]
Globale HTML Attribute sind Z. B. id, class, data-*, autofocus, role, lang, style, popover, tabindex.
Boolsche Attribute sollten in JavaScript durch hinzufügen bzw. löschen gesetzt werden (und nicht durch die Manipulation des Wertes eines Attributs).
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 typographisch 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, ...
Brot besteht aus <i>Mehl</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">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).
Ö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.
HTML - Lists
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:
img{max-inline-size:100%;block-size:auto;}
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.
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 <iframesrc="https://www.dhbw-mannheim.de" 2 width="600" 3 height="400"> 4 iframes are not supported</iframe> 5 6 <iframesrcdoc="
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 Meta-daten (<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
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)
HTML - „nicht mehr unterstützt - April Stand 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)[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. [...]
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.
<iframe
width=100%
style="border: 1px solid black; height: 15lh;"
data-title="Lebenslauf"
srcdoc='
<!DOCTYPE html>
<html lang="de">
<head>
<title>Lebenslauf von X Y</title>
<meta name="author" content="X Y zu W">
<meta charset="utf-8">
{{ld-embedded-iframe.head.frag.html}}
</head>
<body>
<header>
<nav>
<a href="#Ausbildung">Ausbildung</a> <a href="#ehrenamt">Ehrenamt</a>
</nav>
<hr>
</header>
<main>
<section>
<strong>Lebenslauf</strong>
<address>
Musterstraße 1<br>
12345 Musterstadt
</address>
<p>
<a href="mailto:x.y@nirgendwo.de">x.y@nirgendwo.de</a>
<p>
</section>
<section>
<h1 id="Ausbildung">Ausbildung</h1>
<table>
<thead>
<tr><th>Datum</th><th>Ort</th></tr>
</thead>
<tbody>
<tr>
<td>1990</td><td><details>
<summary>Theodor Gymnasium</summary>
Gegründet von Theodor von und zu Frankenburg im Jahr 1818</details>
</summary></td>
</tr>
<tr>
<td>2000</td><td><a target="_blank" href="https://www.dhbw-mannheim.de">Duale Hochschule Baden-Württemberg Mannheim (<abbr>DHBW</abbr>)</a></td>
</tr>
</tbody>
</table>
</section>
<section>
<h1 id="Ehrenamt">Ehrenamtliche Tätigkeiten</h1>
<ul>
<li>DRK</li>
<li>Messdiener</li>
</ul>
</section>
</main>
<footer>
<hr>
<span>Seite 1 von 1</span> - <span>Version: <time datetime="2024">2024</time></span>
</footer>
</body>
</html>
'>iframe is not supported</iframe>
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.
