3.1 Tag <main>
HTML5 hat eine Vielzahl neuer semantischer Elemente eingeführt, die Entwicklern dabei helfen, strukturiertere und verständlichere Webseiten zu erstellen. Zu diesen gehören insbesondere die Tags <main> und <aside>, die für die Erstellung von Containern für Haupt- bzw. Zusatzinhalte verwendet werden.
Das Tag <main> bezeichnet den Hauptinhalt des Dokuments. Es wird verwendet, um einzigartigen und wichtigen Inhalt für die jeweilige Seite zu platzieren. Der Inhalt innerhalb des <main>-Tags sollte auf jeder Seite einzigartig sein und keine Elemente enthalten, die sich auf allen Seiten wiederholen, wie Logos, Seitenleisten, Navigationslinks oder Fußzeilen.
Syntax:
<main>
<!-- Hauptinhalt der Seite -->
</main>
Beispiel für die Nutzung:
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Hauptmerkmale:
- Inhalt: Das
<main>-Tag sollte den Hauptinhalt der Seite enthalten, der für die jeweilige Seite einzigartig ist - Platzierung: Auf der Seite sollte nur ein
<main>-Tag existieren - Zugänglichkeit: Das
<main>-Tag verbessert die Zugänglichkeit der Seite, indem es Hilfsmitteln (wie Bildschirmleseprogrammen) hilft, den Hauptinhalt schneller zu finden
Anwendung:
- Hauptinhalt der Seite
- Einzigartiger Inhalt, der mit der aktuellen Seite zusammenhängt
Vorteile:
- Semantische Markierung: Hilft Suchmaschinen und Hilfsmitteln zu verstehen, was der Hauptinhalt der Seite ist
- Verbesserte Seitenstruktur: Trennt klar den Hauptinhalt von anderen Teilen der Seite, wie Kopfzeilen, Seitenleisten und Fußzeilen
Besonderheiten:
- Sollte einzigartigen Inhalt für die Seite enthalten
- Sollte keine Elemente enthalten, die auf anderen Seiten wiederholt werden (z.B. Navigationsleisten, Seitenleisten, Fußzeilen)
3.2 Tag <aside>
Das Tag <aside> wird verwendet, um Zusatzinhalte zu kennzeichnen, die mit dem Hauptinhalt in Verbindung stehen, aber keinen Teil des Hauptdokumentenflusses bilden. Es wird häufig für Seitenleisten verwendet, die Werbung, Links zu verwandten Artikeln, Autorenbiografien und andere unterstützende Elemente enthalten.
Syntax:
<aside>
<!-- Zusatzinhalt -->
</aside>
Beispiel für die Nutzung:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Hauptmerkmale:
- Inhalt: Das
<aside>-Tag enthält zusätzliche Informationen, die mit dem Hauptinhalt in Verbindung stehen, aber nicht Teil des Hauptdokumentenflusses sind. - Platzierung: Kann innerhalb oder außerhalb des
<main>-Tags platziert werden, abhängig vom Kontext. - Anwendung: Wird für Seitenleisten, Werbeblocks, Links zu verwandten Artikeln und andere unterstützende Informationen verwendet.
Anwendung:
- Seitenleisten mit Zusatzinformationen
- Werbeblöcke
- Links zu verwandten Ressourcen
- Zusatzmaterialien, die mit dem Hauptinhalt zusammenhängen
Vorteile:
- Semantische Markierung: Hilft Suchmaschinen und Hilfsmitteln zu verstehen, dass es sich um unterstützenden Inhalt in Bezug auf den Hauptinhalt handelt
- Verbesserte Seitenstruktur: Trennt klar den zusätzlichen Inhalt vom Hauptinhalt, was die Seite organisierter und leichter verständlich macht
Besonderheiten:
- Enthält Inhalte, die mit dem Hauptinhalt in Verbindung stehen, aber kein Teil davon sind
- Kann für Seitenleisten, Werbeblöcke, Abonnements und andere Zusatzmaterialien verwendet werden
GO TO FULL VERSION