Die Semantik-Elemente definiert einen Bereich in einem Dokument.

Was sind Semantik-Elemente?

Ein Semantik-Element beschreibt im Browser und für den Entwickler seine Bedeutung(Bereich). Semantik heisst, das jedes Element eine Bedeutung hat, eine Bedeutung die die Art des Inhaltes beschreibt.

Beispiele von non-semantik Elementen: <div> und <span>.

non-semantik Elementen beschreiben nicht das Elemente und dessen Inhalt.

Beispiele von Semantik-Elementen: <form>, <table>, und <article>.

semantik-Elementen beschreiben das Elemente und dessen Inhalt.

In HTML verwendnet man Semantik-Elemente zum definieren unterschiedlicher Bereich der Webseite:

<article>	Forenbeiträge, Blogeinträge, Benutzerkommentare, Zeitungsartikel
<aside>	Der Inhalt sollte einen indirekten Bezug zum umgebenden Inhalt haben
<footer>	Informationen zur Urheberschaft, Urheberrechtsinformation, Kontaktinformationen
<header>	Hauptmenü, Logo, Überschriften
<main>	Der Hauptinhalt des Dokumentes
<nav>	Definiert eine Reihe von Navigationslinks.
<section>	Mit diesem Element können Inhalte thematisch in Gruppen zusammengefasst werden

Semantik-Elemente:

<!DOCTYPE html>

<html>

<head>

<style>

header {

background-color: dodgerblue;

color: black;

padding: 1rem;

}

nav {

background-color: black;

color: white;

padding: 5%;

float: left;

width: 20%;

height: 200px;

}

main {

background-color: grey;

color: black;

padding: 5%;

float: left;

width: 60%;

height: 200px;

}

footer {

background-color: dodgerblue;

color: black;

padding: 1rem;

clear: both;

}

</style>

</head>

<body>

headerContainer

</header>

<nav>

navContainer

</nav>

<main>

mainContainer

</main>

footerContainer

</footer>

</body>

</html>

<header>headerContainer</header>

<main>mainContainer</main>