forked from WEB-IMB-WS2526/lab-development-imb
60 lines
1.3 KiB
HTML
60 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Beispielseite mit semantischem HTML5</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Meine Beispielseite</h1>
|
|
<nav>
|
|
<a href="#einleitung">Einleitung</a> |
|
|
<a href="#inhalt">Artikel</a> |
|
|
<a href="#bild">Bild</a> |
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="einleitung">
|
|
<h2>Einleitung</h2>
|
|
<p>Willkommen auf dieser Beispielseite. Hier zeigen wir, wie man HTML5-Elemente sinnvoll einsetzt.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="inhalt">Inhalt</h2>
|
|
|
|
<article>
|
|
<h3>Was ist semantisches HTML?</h3>
|
|
<p>Semantisches HTML verwendet aussagekräftige Elemente, um die Struktur und Bedeutung von Inhalten zu
|
|
verdeutlichen.</p>
|
|
</article>
|
|
|
|
<article>
|
|
<h3>Warum ist das wichtig?</h3>
|
|
<p>Suchmaschinen, Screenreader und Entwickler profitieren von klar strukturiertem, semantischem Code.
|
|
</p>
|
|
</article>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="bild">Bild</h2>
|
|
<figure>
|
|
<img src="bilder/semantic_elements.gif" alt="Die verschiedenen Bereiche einer HTML-Seite als Schema.">
|
|
<figcaption>Semantische Bereiche von HTML</figcaption>
|
|
</figure>
|
|
</section>
|
|
</main>
|
|
|
|
<footer id="kontakt">
|
|
<p>Kontakt: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
|
<p>© 2025 Beispielseite</p>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |