Ein aside angeben im HTML5

Das Element aside mit article angeben im HTML5

Manchmal haben Sie bestimmte Inhalte, die zum Hauptinhalt Ihrer Seite eine Beziehung haben, aber auch eigenständig sind. Wie können Sie das semantisch verdeutlichen?

Dieses aside stellt Informationen über die Webseite von html-lernen-copy.html-lernen.info vor und hängt mit den Inhalten über html und html5 zusammen, die den Schwerpunkt der Seite bilden. Aber sie könnten auch für sich stehen. Ich hätte das auch im article verschachteln können, weil beides zusammenhängt, aber ich habe beschlossen, es hinter dem article aufzuführen, damit ich es später visuell als Sidebar behandeln kann. Das role="complementary" für das aside ist optional, kann aber die Zugänglichkeit verbessern. Weitere Infos im letzten Tipp.


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
	<nav role="navigation">
		<ul>
			<li><a href="#titel-html5">Der Titel im HTML5</a></li>
			<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
			<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
		</ul>
	</nav>
</header>
<article>
	<h1 id="html5-lernen">
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<p>
		Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
	</p>
	<section>
		<h2 id="elementen" lang="de">
			Elementen
		</h2>
		... [Bild und Absatz] ... 
	</section>
	<section>
		<h2 id="spezifikation">
			Spezifikation
		</h2>
		... [weiteres Bild und mehr Absätze] ... 
	</section>
</article>
<aside role="complementary">
	<h1>
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<p>
		Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
	</p>
	<ul>
		<li lang="de">Der Titel im HTML5</li>
		<li>Überschriften im <span lang="de">HTML5</span></li>
		<li lang="de">Textabsätze im HTML5</li>
	</ul>
	<p>
		Quelle: <a href="https://www.html-lernen-copy.html-lernen.info" rel="external"><cite>HTML-Lernen.info</cite></a>.
	</p>
</aside>
</body>
</html>

Das aside erscheint unterhalb des Artikels, weil es im HTML auch danach kommt. Wie Sie sehen, formatieren Browser ein aside standardmäßig nicht irgendwie speziell (außer dass es in einer eigenen Zeile beginnt). Sie können dessen Erscheinungsbild jedoch komplett mit CSS steuern.

Erst seit HTML5 kann man das explizit angeben, und zwar mit dem aside-Element.

Üblicherweise stellt man sich das aside wie eine Sidebar (Seitenleiste) vor, aber man kann je nach Kontext ein aside-Element auch an andere Orte auf der Seite stellen. Es kann sich um einen Kasten (entweder vom Konzept her oder buchstäblich) innerhalb des Hauptinhalts selbst handeln, in der gleichen Spalte, aber nicht im Hauptinhalt verschachtelt, oder in einer bzw. als eine sekundäre Spalte wie eine Sidebar. Ein aside (wörtlich: Nebenbemerkung) kann ein hervorgehobenes Zitat sein, eine Seitenleiste, ein Kasten mit zum Artikel gehörigen Links auf einer News-Site, Gruppen von nav-Elementen (z.B. eine Blogroll), ein Twitter-Feed oder eine Liste von passenden Produkten auf einer kommerziellen Site.

Ein aside erstellen

Tippen Sie <aside>.
Geben Sie die Inhalte des aside ein – eine beliebige Anzahl von Elementen wie Absätze, Listen, Audio, Video, Fotos, Abbildungen usw.
Tippen Sie </aside>.

Obwohl mit einem aside auch Inhalte in einer Sidebar ausgezeichnet werden können, wirkt sich das aside-Element nicht auf das Layout der Seite aus. Wenn Sie ein oder mehrere asides als Sidebar oder in einer Sidebar verwenden, platzieren Sie den Inhalt der Sidebar im HTML nach dem Hauptinhalt der Seite. Für SEO und Zugänglichkeit ist es besser, den wichtigsten Inhalt zuerst aufzuführen. Sie können mit CSS die Reihenfolge ändern, wie sie im Browser dargestellt werden.

Nehmen Sie das figure-Element und kein aside, um Abbildungen auszuzeichnen, die zum Inhalt gehören, z.B. ein Diagramm, ein Schaubild oder ein eingefügtes Foto mit Bildunterschrift.

HTML5 verbietet das Verschachteln eines aside innerhalb eines address-Elements.

Andere Beispiele mit aside

Wie bereits erwähnt kann aside in der gleichen Spalte wie der Hauptinhalt erscheinen oder in Hauptinhalt verschachtelt sein oder zu einer Sidebar werden.

Beispiel 1 zeigt ein aside, das mit dem dazugehörigen Inhalt verschachtelt ist. Beispiel 1 (verschachtelt im Hauptinhalt):


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
	<h1>
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<p>
		Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
	</p>
	<aside>
		<h1>
			HTML5 Lernen - Grundlagen und Tutorials
		</h1>
		<ul>
			<li><a href="#titel-html5">Der Titel im HTML5</a></li>
			<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
			<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
		</ul>
	</aside>
	<p>
		Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
	</p>
</article>
</body>
</html>

Das gleiche article kann z.B. ein Zitat aus dem Artikeltext hervorheben. Das wäre dann auch ein aside. Oder es könnte ein aside mit Verwandte Artikel geben, in dem eine Liste mit Links auf andere Artikel über das Thema enthalten ist. Alternativ könnte dieses aside auch in einer anderen Seitenspalte stehen statt verschachtelt im article.

Sie haben bereits ein Beispiel eines solchen aside in einer Sidebar gesehen. Nun wollen wir uns als Beispiel einmal ein Design-Portfolio oder eine Gruppe Fallstudien anschauen, bei dem bzw. der jede HTML-Seite sich jeweils auf ein Projekt konzentriert. Sie bieten dann Links (die in einem nav verschachtelt sind) auf andere Projektseiten in einer benachbarten Spalte an (die von CSS und nicht einfach durch die Anordnung des Codes wie in Beispiel 2 gesteuert wird).

Beispiel 2 (aside ist nicht im Hauptinhalt verschachtelt und enthält ein nav):


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<!-- Hauptinhalt der Seite -->
<article>
	<h1>
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<figure>
		... [Projektfoto] ...
	</figure>
	<p>
		Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
	</p>
</article>
<!-- Dieses aside ist nicht im article verschachtelt -->
<aside>
	<h1>
		Andere Projekte
	</h1>
	<nav>
		<ul>
			<li><a href="#titel-html5">Der Titel im HTML5</a></li>
			<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
			<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
		</ul>
	</nav>
</aside>
</body>
</html>

Hier wäre es absolut angemessen, wenn man gerade diese Nebenbemerkung auch im Projektartikel verschachtelt, weil beide sich aufeinander beziehen.

Ein aside angeben im HTML5

Das Element aside mit article angeben im HTML5

Ein aside erstellen

Andere Beispiele mit aside

Impressum

Datenschutz

Kontakt