Semantische Tags

Semantische Tags in HTML helfen dabei, die Bedeutung von Inhalten festzulegen, sodass der Code sowohl für Entwickler als auch für Browser verständlicher wird. Anders als <div> und <span> geben sie den eingeschlossenen Inhalten einen Kontext.

Häufig verwendete semantische Tags:

• <header>: Einleitender Inhalt, meist 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 Bereich mit Informationen wie Copyright- 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 übersichtliches und aussagekräftiges Layout für den Inhalt.