Semantische Tags
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 27 von 60.
Semantische Tags in HTML helfen dabei, die Bedeutung von Inhalten zu definieren, wodurch der Code sowohl für Entwickler als auch für Browser verständlicher wird. Anders als <div> und <span> geben sie den eingeschlossenen Inhalten Kontext.
Häufige semantische Tags:
<header>: Einleitender Inhalt, normalerweise am Anfang.<nav>: Enthält Navigationslinks.
<main>: Hauptinhalt der Seite.<article>: Ein eigenständiger Inhalt wie ein Blogbeitrag.
<section>: Gruppiert zusammengehörige Inhalte, oft mit einer Überschrift.<footer>: Unterer Abschnitt mit Informationen wie Urheberrechtshinweisen oder Kontaktdaten.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Diese Struktur bietet ein klares und aussagekräftiges Layout für den Inhalt.
Aufgabe
EinfachErstelle eine Filmkritikseite mit semantischem HTML. Sie sollte Folgendes enthalten:
1. <header> mit:
<h1>„Filmkritiken“<nav>mit Links: „Startseite“, „Kritiken“, „Top-Empfehlungen“
2. <main> mit:
<article>für eine Kritik, die Folgendes enthält:<h2>mit dem Filmtitel<p>mit einer kurzen Kritik
3. <footer> mit:
<p>„Copyright 2023 Filmkritiken“
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Schreibe Code hier -->
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Grundlagen
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-ListeÜbe selbstständig: Web-Playground