Semantische Tags
Teil des Abschnitts Fundamentals 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 übersichtlicher wird. Im Gegensatz zu <div> und <span> geben sie dem eingeschlossenen Inhalt Kontext.
Häufige semantische Tags:
<header>– Einleitende Inhalte, normalerweise ganz oben.<nav>– Enthält Navigationslinks.
<main>– Hauptinhalt der Seite.<article>– Ein eigenständiger Teil, wie ein Blog-Post.
<section>– Gruppiert zusammengehörige Inhalte, oft mit einer Überschrift.<footer>– Abschnitt am Ende mit Informationen wie Urheberrecht 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
EinfachErstellen Sie eine Film-Review-Seite mit semantischem HTML. Sie sollte Folgendes enthalten:
1. <header> mit:
<h1>"Movie Reviews"<nav>mit Links: "Home", "Reviews", “Top Picks”
2. <main> mit:
<article>für eine Review, die Folgendes enthält:<h2>mit dem Filmnamen<p>mit einer kurzen Review
3. <footer> mit:
<p>"Copyright 2023 Movie Reviews"
Spickzettel
Semantische Tags in HTML helfen dabei, die Bedeutung von Inhalten zu definieren, wodurch der Code sowohl für Entwickler als auch für Browser klarer wird. Im Gegensatz zu <div> und <span> geben sie dem eingeschlossenen Inhalt einen Kontext.
Häufige semantische Tags:
<header>– Einleitende Inhalte, normalerweise ganz oben.<nav>– Enthält Navigationslinks.<main>– Hauptinhalt der Seite.<article>– Ein eigenständiger Teil, wie ein Blogbeitrag.<section>– Gruppiert verwandte Inhalte, oft mit einer Überschrift.<footer>– Unterer Abschnitt mit Informationen wie Urheberrecht 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>Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</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 Fundamentals
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