Semantische Elemente wie <header>, <nav>, <main>, <section>, <article>, <footer> machen Seiten verständlich für Menschen, Suchmaschinen und Hilfstechnik. Formulare nutzen <form>, <input>, <label>, <select>, <textarea>, <button>. Jedes Eingabefeld braucht ein <label>, verknüpft über for und id.
Eingabetypen (email, number, date) liefern auf Mobilgeräten passende Tastaturen und Prüfungen.
<header><nav><a href="/">Start</a></nav></header>
<main>
<article>
<h2>Kontakt</h2>
<form action="/senden" method="post">
<label for="mail">E-Mail</label>
<input id="mail" name="mail" type="email" required>
<label for="text">Nachricht</label>
<textarea id="text" name="text"></textarea>
<button type="submit">Senden</button>
</form>
</article>
</main>
<footer>© 2026</footer>Merke
Semantische Elemente statt nur
<div>Jedes Feld braucht ein
<label>Eingabetypen wie
emailprüfen automatisch
Aufgabe
Baue ein Kontaktformular mit Name, E-Mail und Nachricht.