Strukturierung

Um Informationen wie Bilder und Texte zu strukturieren und zu gruppieren, gibt es in HTML einige Elemente, welche wir Ihnen hier vorstellen wollen. Dabei können wir grundsätzlich zwischen Gruppierung und Strukturierung unterscheiden.

Gruppierung

Um Inhalte zu gruppieren, gibt es das fieldset-Element (fieldset = Feldgruppe). Diesem sollte zum einen das legend-Element (Überschrift des fieldset-Elements) untergeordnet werden (welches zumeist am Anfang notiert wird) und weitere Elemente wie z. B. p, table oder auch Text enthalten. Der durch das fieldset-Element entstandene Block enthält standardmäßig automatisch einen Rahmen. Der Inhalt des legend-Elements wird dabei im Rahmen oben links angezeigt, wobei der Rahmen für die Breite des Inhalts unterbrochen wird. Das fieldset-Element ist eigentlich dazu gedacht, ein Formular visuell abzusetzen und dessen Bestandteile zu gruppieren. Die Benutzung von anderen Inhalten in fieldset-Elementen ist jedoch ebenfalls möglich.

<fieldset>
	<legend>Titel</legend>
	<p>Text ...</p>
</fieldset>

Seitenstrukturierung

Mit der Einführung von HTML5 wurden auch einige neue Elemente zur Strukturierung einer Seite in den Element-Vorrat von HTML hinzugefügt. Der Grund für die Einführung war einfach: Bisher mussten Bestandteile einer Website immer mittels den div-Elementen erstellt werden. Um diese später mittels CSS zu erkennen, wurde den Elementen das Attribut id mit einem passenden frei definierbaren Namen vergeben (darauf gehen wir im Thema CSS genauer ein). Ein kurzes Beispiel hierzu:

<div id="kopfzeile">
    
</div>

div-Elemente benötigen immer den kompletten Platz, da es Block-Elemente sind. span-Elemente sind hingegen Inline-Elemente und werden für Formatierungen verwendet. Beide Elemente gelten in ihrem jeweiligen Anzeige-Charakteristikum als Universal-Elemente. Mit den neuen Strukturierungs-Elementen von HTML soll die Anzahl der benötigten div-Elemente sinken. Dadurch ist auch der HTML-Code leichter zu lesen und die einzelnen Bestandteile sind leichter zu finden (z. B. wenn man mit fremdem HTML-Code arbeiten muss).

Das Hauptproblem der neuen Elemente ist jedoch, dass es keine klare Vorgabe gibt, wie die Elemente zu verwenden sind, weshalb alle Beispiel-Codes in Bezug auf die Strukturierungs-Elemente etwas anders sind. Wir haben Ihnen folgende Tabelle aufgestellt, welche die HTML-Strukturierungs-Elemente und Ihre Bedeutung enthält:

article	Bereich für einen Artikel eines Dokuments (ideal für Beiträge bei einem Blog)
aside	Bereich für einen nebenstehenden Abschnitt
footer	Fußbereich (z. B. für die Fußzeile)
header	Kopfbereich (z. B. für die Kopfzeile)
main	Bereich für den Hauptbestandteil der Website (zumeist Inhaltsbereich)
nav	Bereich für eine Navigation
section	Bereich für einen Abschnitt eines Dokuments

Der folgende Code zeigt nun eine von vielen Möglichkeiten, wie die Elemente header, nav, main, aside, article, section und footer benutzt werden können. Der Aufbau des Dokuments ist dabei in der Grafik links zu sehen. Ein mögliches resultierendes Ergebnis durch eine Formatierung mit CSS ist auf der rechten Seite zu sehen.

<header>
	<img src="/Bilder/Logo/Logo.jpg" alt="Logo" title="Homepage-Webhilfe" width="100" />
	<h1>Homepage-Webhilfe</h1>
</header>

<nav>
	<ul>
		<li><a href="https://www.homepage-webhilfe.de/">Startseite</a></li>
		<li><a href="https://www.homepage-webhilfe.de/HTML/">HTML</a></li>
		<li><a href="https://www.homepage-webhilfe.de/CSS/">CSS</a></li>
		<li><a href="https://www.homepage-webhilfe.de/PHP/">PHP</a></li>
	</ul>
</nav>

<main>
	<p>...</p>
	
	<aside>
		<h3>Wussten Sie schon?</h3>
		<p>...</p>
	</aside>
	
	<article>
		<h2>Beitrag 1</h2>
		<p>...</p>
	</article>

	<article>
		<h2>Beitrag 2</h2>
		<p>...</p>
	</article>
	
	<article>
		<h2>Beitrag 3</h2>
		<p>...</p>
	</article>
	
	<section>
		<h2>Kommentare</h2>                
		<p>...</p>
		<p>...</p>
		<p>...</p>
	</section>
</main>

<footer>
	<i>Copyright 2016 by Homepage-Webhilfe</i>
</footer>