logo

Bootstrap 4 alpha

Mega Menue Sidebar

html5area


HTML5 Aufbau

Im folgenden möchte ich den Grundaufbau einer html5 Seite darstellen, neue Elemente einbringen und diese erklären. Der Grundaufbau ähnelt einer XHTML Seite wobei die frühere globale "div" - Deklaration für Seitenaufbauelemente unterstrukturiert wird durch neue HTML5 tags, die das Verständnis und somit auch die Logik eindeutig verbessern.

<!DOCTYPE html>


Der Doctype -tag wurde vereinfacht und läßt sich somit auch leicht merken. Das gute ist obendrein, dass es abwärtskompatibel ist und von modernen Browsern auch verstanden wird.
<html lang=de>


Am html -tag hat sich wenig verändert nur dass hier die Länderkennung angefügt werden kann.
<head>
<meta charset=UTF-8>
</head>


Der meta - tag charset ist im Headbereich, der sich nicht geändert hat und ausser den Metas Platz für Scripte und Links zu Stylesheets wichtig vorallem für z.B. deutsche Seiten mit "Umlauten" um diese richtig darzustellen

<body>
...
</body>


Am body -tag hat sich nichts geändert und dieser dient zur Anzeige der eigentlichen Seite, des sichtbaren Bereichs

<header>
...
</header>


Der Header -tag ist ein neues Element und kann nicht nur als genereller Seitenheader Verwendung finden sondern z.B. auch in einem Artikel als Header eingesetzt werden.

<hgroup>
<h1><Seitentitel</h1>
<h2><Untertitel</h2>
</hgroup>


Die hgroup -tag ist ein neues Element, welches den bekannten "h" tag (Überschriften) gruppieren läßt. Sinnvoll wäre z.B. Seitentitel und Untertitel wie im folgenden Code angedeutet zu gruppieren.

<nav>
...
</nav>


Der nav -tag ist ein neues Element für Navigationen, die nicht nur im Header - Bereich eingesetzt werden können. Es empfiehlt sich die bewerte ul, li Strukturierung zu übernehmen und diese dann via CSS zu formatieren und/oder per Javascript dynamisch zu gestalten.

<article>
...
</article>


Der article -tag ist neu und findet Verwendung um z.B. im Mainbereich der Seite einzelne Artikel anzuzeigen, oder sie auch via Formatierung zu gruppieren.

<section>
...
</section>


Der section -tag kann Verwendung finden um einzelne Artikel unterzugruppieren/aufzuteilen.

<aside>
...
</aside>


Der aside -tag, wie der Name schon ausdrückt sollte Verwendung finden um unabhängig zum Content seitlich Inhalt anzeigen zu lassen, z.B. Navigationen, Links usw.

<footer>
...
</footer>


Der footer -tag ist neu und bildet den eigentlichen Footer im Seitenaufbau. Er kann aber auch z.B. inerhalb von Artikeln als Footer Verwendung finden, z.B. Anzeige des Datums des jeweiligen Artikels.

<figure>
...
</figure>


Der figure -tag ist Elternelement für eine zum Seiteninhalt gehörende Abbildung, als Textunterschrift (caption) kann eine mögliche figcaption dienen.

<address>
...
</address>


Der address -tag definiert einen Abschnitt mit Kontaktinformationen.

<main>
...
</main>


Der main -tag definiert den Hauptinhalt der Seite
Es darf nur einen Hauptinhalt der Seite definiert werden.

Der Aufbau einer HTML5 Seite ist im Vergleich zu seinen Vorgängersprachen logischer, durch seitenspezifischen Elemente wie , Header, Footer, Section, Article und somit auch einfacher zu handeln.

Tags

HTML5 META Artikel Doctype Header Footer