Wie gestalte ich eine Webseite mit HTML 5 – Teil 1

Im vorangegangen Tutorial habe ich schon ein paar Grundlagen in HTML5 vermittelt. Ich möchte in diesem Tutorial erst einmal nur auf die Semantik eingehen. Ziel ist es, einen Blog zu designen, der in etwa so aussehen wird:

In diesem Tutorial kümmern wir uns erstmal die Seitenstruktur. Das nächste Tutorial wird sich mit dem Gestalten der Seite mit Hilfe von CSS3 kümmern. In einem dritten Tutorial werden wir versuchen den Blog so anzupassen, dass er möglichst auch abwärtskompatibel ist.

Fangen wir also an. Die Seite ist untergliedert in einen Header, der auch die Seitennavigation beinhaltet, einem Inhaltsbereich, der in zwei Spalten geteilt ist und dem Footer, wo Copyright oder ähnliches später drinstehen soll.

Wie schon im vorangegangen Post erwähnt ist unser HTML head durch HTML5 sehr aufgeräumt. Das Attribute lang im html Tag weißt auf die verwendete Sprache im Dokument hin, das Attribut charset im meta Tag gibt das Encoding der Seite an.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

Es folgt der HTML Body, den wir mit einem „Container“-DIV beginnen wollen. Dieser umschließt alle Elemente und ermöglicht es uns die Seite später zu zentrieren. Das erste Element in diesem Container ist unser Header. Hier möchten wir unser Logo platzieren und die Seitennavigation einfügen. Für den Header verwenden wir den neuen <header> Tag.

The header element represents the header of a section.

Quelle: W3C HTML5:header

Die Navigation schließen wir mit dem neuen <nav> Tag ein. Da die Listenelemente der Navigation floaten, fügen wir eine DIV-Box unter das Element. Dazu mehr im 2. Teil.

The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.

Quelle: W3C HTML5:nav

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />

Es folgt unser content Bereich, dieser wird geteilt in <section> und <aside>. In dem section Bereich kommen nachher unsere Artikel rein.

The section element represents a section of a document, typically with a title or heading.

Quelle: W3C HTML5:section

Wir fügen in die Section einzelne <article> Elemente, unsere Blogartikel.

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.

Quelle: W3C HTML5:article

In jeden <article> können wir jetzt Überschriften mit dem <header> Tag gruppieren. Außerdem möchte ich im Header noch das Datum der Veröffentlichung mit unterbringen. Für ein Datum bietet HTML5 das <time> Element. Dort kann in dem Attribut pubdate die Zeit stehen, wann der Artikel veröffentlich wurde.

The time element represents a date and/or time.

Quelle: W3C HTML5:time

Danach schreiben wir unseren eigentlichen Inhalt.

<div id="content"><!--content start-->
<section><!--feed start-->
<article>
<header>
<h2><a href="#">Artikelüberschrift</a></h2>
<p>Veröffentlicht am <time datetime="2011-02-15">15. Januar</time> von <b>Arne</b></p>
</header>
<p>...</p>
</article>
</section><!--feed end-->

Das aside Element benutzten wir für unsere Sidebar.

The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.

Der dortige Inhalt sollte eigentlich Bezug zu dem Hauptinhalt auf der angezeigten Seite haben. Er sollte wie in einem Buch als Anmerkung benutzt werden. Daher eignet er sich eigentlich nicht als typische Blog Sidebar für Widgets. Das ignoriere ich hier allerdings.

<aside><!--sidebar start-->
<h2>Kategorien</h2>
<p>
<ul>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
</ul>
</p>
</aside><!--sidebar end-->
<div class="clear" />
</div><!--content end-->

Abgeschlossen wird unsere Seite mit einem <footer>.

The footer element represents the footer for the section it applies to.

Quelle: W3C HTML5:footer

Footer können wir auch einsetzten um z.B. bei einem Blog-Artikel auf Kommentare hinzuweisen.

Damit sieht der gesamte Seitenquelltext wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />
<div id="content"><!--content start-->
<!--feed start-->
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<!--feed end-->
<!--sidebar start-->
<h2>Kategorien</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Seiten</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Links</h2>
<a href="http://www.w3.org/html/logo/">
<img title="HTML5 Powered with CSS3 / Styling, and Semantics" src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" alt="HTML5 Powered with CSS3 / Styling, and Semantics" width="165" height="64" />
</a>

<!--sidebar end-->
<div class="clear"></div>
<!--content end-->

<!--footer start-->

Copyright © 2011 DeineSeite.de - Design von www.webventil.de

</div>
<!--container end-->

Im nächsten Tutorial stylen wir den Blog mit Hilfe von CSS3.

Be Sociable, Share!

One thought on “Wie gestalte ich eine Webseite mit HTML 5 – Teil 1

  1. Pingback: webventil » Wie gestalte ich eine Webseite mit HTML 5 – Teil 2