Webdesign Grundlagen
HTML: Semantik-Elemente
Semantik ist die Lehre, die die Bedeutung von Inhalten erfasst. Damit Suchmaschinen Deine Inhalte besser erfassen und »verstehen« können, helfen die folgenden HTML-Befehle Deine Webseiten zu strukturieren.
So kennzeichnest Du z.B. mit <nav>
einen Bereich für Navigationselemente. Mit <article>
umklammerst Du den Bereich der Webseite, der Deinen eigentlichen Inhalt beinhaltet, z.B. ein Blog-Beitrag. Im Folgenden lernst Du die wichtigsten semantischen HTML-Befehle kennen.
Im Folgenden erkläre ich Dir schrittweise, wie Du die HTML-Befehle richtig für die Semantik einer Webseite einsetzt.
<header> und <footer>
In der Regel beinhaltet jede Webseite eine Kopfzeile und eine Fußzeile und dazwischen einen Hauptinhalt. In die Kopfzeile <header>
kommt z.B. die Navigation und in die Fußzeile <footer>
z.B. Links, wie z.B. zum
Impressum und zur Datenschutzerklärung. Das sieht dann so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Semantik</title>
</head>
<body>
<header>
</header>
<footer>
</footer>
</body>
</html>
<main> – Hauptinhalt einer Webseite
Mit <main>
kennzeichnest Du einen Bereich der Webseite, der einzigartig ist. Meistens beinhaltet <main>
den individuellen Inhalt einer Webseite und z.B. nicht die immer wiederkehrende Navigation. <main>
darf kein Nachfolger eines <article>
-, <aside>
-, <footer>
-, <header>
- oder <nav>
-Elements sein.
Auch wenn das <main>
Element flächendeckend unterstützt wird – nur beim Internet Explorer nicht – solltest Du dem
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Semantik</title>
</head>
<body>
<header>
</header>
<main role="main">
</main>
<footer>
</footer>
</body>
</html>
<nav> – Navigation markieren
Mit <nav>
kennzeichnest Du den Bereich einer Navigation. Wenn Du z.B. in der Kopfzeile und im Fußbereich einer Seite Links für eine Navigation unterbringst, dann umklammerst Du den Bereich mit <nav>
.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Semantik</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main role="main">
</main>
<footer>
</footer>
</body>
</html>
<article>
<article>
<header>
<h1>Semantik</h1>
</header>
<section class="beitrag">
</section>
<section class="kommentare">
<article class="kommentar">
<p>Viel zu beängstigend für mich.</p>
<footer>
</footer>
</article>
</section>
<footer>
</footer>
</article>
<section>
<aside>
Mit dem <aside>
-Element kennzeichnest Du eine Sektion einer Seite, die aus Inhalt besteht der nur indirekt zum restlichen Inhalt gehört. Das wäre z.B. bei einem Rezept-Artikel eine Infobox mit den Zutaten in Form einer Liste.
https://developer.mozilla.org/de/docs/Web/HTML/Element/article