Inhalte
Artikel, Produktseiten und Navigation semantisch gliedern.
HTML
verständlich erklärt.
HTML gibt einer Webseite ihre Struktur und Bedeutung: Eine Überschrift ist eine Überschrift, ein Link führt zu einem Ziel und ein Formular erfasst Eingaben.
Wofür wird
HTML genutzt?
Die wichtigsten Einsatzgebiete auf einen Blick – und eine Grenze, die du kennen solltest.
Formulare
Eingabefelder mit verständlichen Beschriftungen verbinden.
Zugänglichkeit
Browsern und Hilfsmitteln die Bedeutung von Inhalten vermitteln.
Vom Beispiel
zum Verständnis.
Erst die Aufgabe lesen, dann den Code verfolgen und schließlich eine kleine Änderung ausprobieren.
BEISPIEL 01
Ein Angebot verständlich strukturieren
Eine Werkstatt möchte ihr Angebot mit einem Kontaktlink zeigen.
<article>
<h1>Fahrrad-Check</h1>
<p>Wir prüfen Bremsen und Beleuchtung.</p>
<a href="mailto:werkstatt@example.com">Termin anfragen</a>
</article>Das passiert im Code
- article fasst einen eigenständigen Inhalt zusammen.
- h1 benennt das Hauptthema; p enthält den Beschreibungstext.
- href bestimmt das Ziel. mailto öffnet ein eingerichtetes E-Mail-Programm.
Erwartetes Ergebnis
Der Browser zeigt eine Überschrift, einen Absatz und den Link „Termin anfragen“.
Probiere es selbst
Ergänze eine Liste mit den zwei Prüfungen.
Lösung ansehen
Unter dem Absatz: <ul><li>Bremsen</li><li>Beleuchtung</li></ul>.
BEISPIEL 02
Ein beschriftetes Eingabefeld
Ein Kontaktformular benötigt eine E-Mail-Adresse.
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email" required>Das passiert im Code
- for und id verknüpfen die Beschriftung mit dem Feld.
- type="email" beschreibt die erwartete Eingabe.
- required macht das Feld zum Pflichtfeld. Das allein versendet oder speichert noch nichts.
Erwartetes Ergebnis
Ein beschriftetes E-Mail-Feld erscheint. Bei einer echten Formularübermittlung kann der Browser ein leeres oder offensichtlich ungültiges Feld beanstanden.
Probiere es selbst
Wie wird die Eingabe freiwillig?
Lösung ansehen
Entferne required. Eine Prüfung auf dem Server bleibt bei einer echten Anwendung erforderlich.
Wie geht es
weiter?
Vertiefe das Thema in der Dokumentation oder vergleiche es mit einem verwandten Werkzeug.
Dokumentation zu HTML öffnen ↗
CSS
CSS gestaltet HTML: Farben, Schrift, Abstände und Layout. Dieselben Inhalte können damit auf einem Handy anders angeordnet sein als auf einem großen Bildschirm.
CSS mit BeispielenJavaScript
JavaScript reagiert auf Eingaben und verarbeitet Daten. Im Browser macht es Oberflächen interaktiv; mit Laufzeitumgebungen wie Node.js kann es auch außerhalb des Browsers arbeiten.
JavaScript mit Beispielen