Der Aufbau einer HTML5 Seite & Strukturelemente

03.11.2016 08:30 Uhr

Das Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel der Seite</title>
<link rel="stylesheet" href="css/name_des_stylesheets_.css" type="text/css">
</head>
<body>
...
</body>
</html>

Die Strukturelemente

<header> </header> …
… definiert den Kopfbereich eines Dokuments und kann den Titel des Dokuments, Logos, ein Suchformular und/oder ein Inhaltsverzeichnis enthalten.

<header id="header">
<h1>Titel des Dokuments</h1>
<img id="logo" width="500" height="100" src="logo.gif" alt="Alt Attribut" title="Bezeichnung">
</header>

<nav> </nav> …
… definiert die Hauptnavigation eines Dokuments.

<nav>
<ul>
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>

<article> </article> …

… definiert die zusammengehörenden Sections innerhalb eines Dokuments.

<article id="content">
<section>
<h2>Überschrift des Artikels</h2>
<p>Text des Artikels</p>
</section>
<section>
<h2>Überschrift des Artikels</h2>
<p>Text des Artikels</p>
</section>
</article>

<section> </section> …

… definiert die Section innerhalb eines Dokuments. Das section Element sollte so verwendet werden, dass der Inhalt für sich alleinstehend ist. section-Blöcke sind schachtelbar und können mit dem article Element in mehrere Abschnitte unterteilt werden.

<section>
<h2>Überschrift des Artikels</h2>
<p>Text des Artikels</p>
<section>
<h2>Überschrift des Artikel-Abschnitts</h2>
<p>Text des Artikels</p>
</section>
<section>
<h2>Überschrift des Artikel-Abschnitts</h2>
<p>Text des Artikels</p>
</section>
</section>

<aside> </aside> …

… definiert Abschnitte, die nicht direkt mit dem eigentlichen Inhalt zusammenhängen jedoch einen Bezug zu diesem haben. Beispielsweise für die sidebar oder aber inhaltliche Ergänzungen oder Verweise innerhalb eines article.

<aside>
<h2>Verweise</h2>
<ul>
<li class="active"><a href="#">Verweis1</a></li>
<li><a href="#">Verweis2</a></li>
<li><a href="#">Verweis3</a></li>
</ul>
</aside>

<footer> </footer> …

… definiert den Fußbereich eines Dokuments, in dem die Autoren- und Copyright-Informationen oder Querverweise eingefügt werden. footer muss nicht zwingend am Ende eines Dokuments positioniert werden.

<footer>
<p>© Hinweis - <a href="#">Impressum</a></p>
</footer>

HTML-Tags: Webseiten strukturieren – Übersicht

html5_tags

 

Schlagwörter: