Das HTML 5 Markup

Dies wird eine Artikelserie rund um HTML5 bis hin zu einem WordPress-Theme. Der erste Teil handelt dabei von der Erstellung des HTML5 Markups. Dazu werden die neuen Elemente kurz vorgestellt und natürlich angewendet. In weiteren Folgen geht es dann um die Umsetzung mit CSS, die IE-Optimierung und die Gestaltung als WP-Theme.

  1. Teil: Das HTML 5 Markup
  2. Teil: Erstellung des Stylesheets
  3. Teil: HTML 5 Darstellung im IE

Vorschau: Das Typography Alpha Theme

Template: Typography Alpha

Einführung HTML5

Mit HTML5 sind einige Elemente hinzugekommen, die mehr Semantik in das Webcoding bringen sollen. Daher hier ein kurzer Ausschnitt aus dem “Working Draft” von W3C:

  • section represents a generic document or application
    section. It can be used together with the h1,
    h2, h3, h4, h5, and
    h6 elements to indicate the document structure.

  • article represents an independent piece of content of a
    document, such as a blog entry or newspaper article.

  • aside represents a piece of content that is only slightly
    related to the rest of the page.

  • header represents the header of a section.

  • footer represents a footer for a section and can contain
    information about the author, copyright information, et cetera.

  • nav represents a section of the document intended for
    navigation.

  • dialog can be used to mark up a conversation.

  • figure can be used to associate a caption together with
    some embedded content, such as a graphic or video.

Quelle: W3C

Der Aufbau des Templates

An dieser Stelle möchte ich, bevor mit den neuen Elementen gearbeitet wird, den generellen Aufbau der Seite anhand der neuen Tags zeigen. Dies soll helfen die verschiedenen Schritte besser zu gliedern:
Aufbau des Templates
Hier fällt deutlich auf, dass es sich mit HTML5 um eine Erweiterung handelt, welche stark auf semantischer Ebene abläuft. Vorbei die Zeit der aussagelosen div-Elemente.

Das Markup des Templates

Vorschau: Markup des Templates

Zunächst einmal der Dokumentkopf -kurz Doctype. In HTML5 wurde dieser stark reduziert und ist somit merkbar geworden:

<code><!doctype html></code>

Der nächste Schritt ist, wie man am Aufbau erkennen kann, das section-Tag. Dieses gibt eine Gruppierung an des kompletten Seiteninhalts und dient später der Formatierung mittels CSS. Es ersetzt das div-Tag, welches oft die ID “wrap” bekommen hat, um anzuzeigen, dass sich hier drin der Inhalt befindet.

<code><section id="wrap">
...
</section></code>

Die meisten section-Elemente haben zwei zugehörige Kind-Elemente: header und footer. Diese beiden semantischen Tags dienen dazu Überschriften und Meta-Informationen anzusammeln. In meinem Beispiel hat der section Bereich allerdings nur einen header:

<code><header>
	<a href="/" title="Home"><h1>Typography alpha</h1></a>
	<nav>
	<h3>Pages</h3>
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Contact</a></li>
                  ....
	</ul>
	</nav>
</header>
</code>

Hier fällt schon eine weitere HTML5-Neuerung auf: Das Hyperlink-Element a darf nun auch um Block-Elemente wie h1 gesetzt werden.
Weiter geht es mit nav für die Navigationsbereiche einer Webseite. Weiterhin bleibt bestehen, dass Listen sich am besten eignen für die Auflistung der verschiedenen Navigationslinks.

<code><aside>
	<header>
	<h2>Sidebar</h2>
	</header>
	<form method="get" id="searchform" action="/">

	<h3>Search</h3>
		<fieldset>
                   ...
		</fieldset>

	</form>

	<nav>
	<h3>Categories</h3>
	<ul>
		<li><a href="#">Web <span>(9)</span></a></li>
		<li><a href="#">Economy <span>(9)</span></a></li>
		...
	</ul>
	</nav>
	...
	<hr class="invisible" />
</aside></code>

Eine Sidebar lässt sich nun wunderbar mit aside auszeichnen. Diese bekommt ebenfalls ein header-Element, in welchen die Funktion mittels einer Überschrift h2 dargestellt wird. Die Sidebar kann nun weitere Elemente enthalten, wie ein Suchfeld, eine zweite Navigation und natürlich noch einiges mehr.

<code><section id="content">
	<header>
		<h2>Blog</h2>
	</header>
...
	<footer>
	<hr />
	<p>Hier können weitere Meta-Informationen stehen</p>
	</footer>
</section>
</code>

Nun beginnt ein weiterer gruppierter Bereich, der für den Inhalt des Blogs steht. Dieser section-Tag wird später die einzelnen Blogbeiträge enthalten. Ausgezeichnet wurde dieser Bereich wieder mit einem header und einem footer.

Nun folgen die einzelnen Beiträge, die mit dem article-Element ausgezeichnet werden:

<code><article>
	<header>
		<h3><a href="#" title="The first entry">The first entry</a></h3>
			<a class="speak" title="Speak?" href="#">2</a>
	</header>
			<p>Hier würde der Blogbeitrag stehen</p>
	<footer>
			<small class="meta">→ Category: <a href="#" title="Kategorie">Music</a></small>
			<hr class="invisible" />
	</footer>
</article></code>

Das article-Element repräsentiert einen logischen zusammenhängenden Beitrag, welcher genauso mit header und footer ausgezeichnet werden kann. Wie man sieht benutze ich im footer auch ein hr, was in HTML5 der Bedeutung eine thematischen Abschlusses entspricht.

Das Markup ist somit fertig und valide. Allerdings habe ich die neuen Elemente nach meinem eigenen Ermessen verwendet und entsprechen somit dessen was ich als logisch empfinde. Der Validator überprüft letztlich die Syntax und keine Logik!

Kommentieren