Das HTML5-Grundgerüst für ein Blog

2

Im Rah­men der Neu­aus­rich­tung mei­ner Seite beschäf­tigte ich mich auch ein­ge­hend mit HTML5 und den damit neu gege­be­nen Mög­lich­kei­ten. Vor­weg: HTML5 ist nach wie vor kein fest­ge­leg­ter Stan­dard, son­dern wei­ter­hin in Ent­wick­lung. Den­noch unter­stüt­zen moderne Brow­ser auch heute schon viele Mög­lich­kei­ten, die HTML5 bie­tet. Einen inter­es­san­ten Arti­kel über die Inhalte von HTML5 mit einer durch­dach­ten Gra­fik hat Peter Krö­ner mit Was ist HTML5 und was nicht? Und was hätte der Kai­ser dazu gesagt? ver­öf­fent­licht. Die­ser bie­tet eine erste Über­sicht mit der man sich dann leicht in die ein­zel­nen The­men abtau­chen kann.

Ich will mich nun erst ein­mal mit den neuen seman­ti­schen Mög­lich­kei­ten von HTML5 aus­ein­an­der­set­zen. „Seman­tisch“ will hei­ßen, dass man ver­sucht durch den Ein­satz diver­ser HTML-Elemente den Inhalt einer Web­seite zu struk­tu­rie­ren. Natür­lich könnte man auch alle Inhalte rigo­ros div–Ele­mente packen. Das Ergeb­nis würde im Brow­ser ver­mut­lich gleich aus­se­hen. Durch die Ver­wen­dung von seman­tisch kor­rek­ten Ele­men­ten, die für den jewei­li­gen Inhalt-Typ vor­ge­se­hen sind, macht man den Code aber auch les­bar. Und zwar nicht nur für einen selbst oder andere Men­schen, son­dern auch für Screen­re­a­der und Such­ma­schi­nen. Ins­ge­samt also eine gute Sache.

Bis­her bot (X)HTML hier nur eine beschränkte Anzahl von Ele­men­ten an. Über­schrif­ten, Lis­ten und Text­ab­sätze wur­den im wesent­li­chen abge­deckt. HTML5 geht nun einen Schritt wei­ter und bie­tet die Mög­lich­keit eine Seite kom­plett seman­tisch zu struk­tu­rie­ren. Es gibt nun Ele­mente für den Kopf einer Seite (header), die Navi­ga­tion (nav), den Inhalt (section, article) und sei­nen logi­schen Auf­bau und den Fuss (footer) einer Seite. Ohne diese nun all zu lange ein­ge­hen zu wol­len, ver­weise ich auf den Arti­kel Struc­tu­ral Tags in HTML5 bei Orde­red List. Der Arti­kel dort beschreibt jedes Ele­ment kurz und zeigt auch einen bei­spiel­haf­ten Quellcode.

Im neu zu bau­en­den Lay­out mei­ner Seite möchte ich am obe­ren Ende der Seite eine Navi­ga­ti­ons­leiste mit den neuen Kate­go­rien haben. Danach der eigent­li­che Inhalt und dann schließ­lich eine Side­bar, die eigent­lich mehr eine „Bot­tom­bar“ ist. Dem­ent­spre­chend ergibt sich fol­gende Struk­tur im Code:

<!-- der tag und ich = header.php -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>der tag und ich</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<header id="header">
			<h1><a href="#">der tag und ich</a></h1>
		</header>
		<nav id="nav">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			</ul>
		</nav>
<!-- der tag und ich = index.php -->
		<section>
			<article>
				<header>
					<h2><a href="#">Die Überschrift eines Artikels</a></h2>
				</header>
				<section>
					<p>Der Inhalt eines Artikels</p>
				</section>
			</article>
		</section>
<!-- der tag und ich = sidebar.php -->
		<aside>
			<p>Hier kommt die Sidebar hin</p>
		</aside>
<!-- der tag und ich = footer.php -->
		<footer>
			<p>Der Footer der Seite mit einigen wichtigen Links.</p>
		</footer>
	</body>
</html>

In diese Grund­struk­tur kommt nun der erste WordPress-Code, damit die Inhalte aus­ge­ge­ben wer­den kön­nen. Anschlie­ßend wer­den die gewünsch­ten zusätz­li­chen Infor­ma­tio­nen ein­ge­baut, wie etwa die Kom­men­ta­r­an­zahl pro Bei­trag oder das Ver­öf­fent­li­chungs­da­tum. Und natür­lich das ganze drum­herum, wie etwa Meta-Tags und externe Dateien die ein­ge­bun­den wer­den wollen.

Ein klei­ner Tipp am Rande: Nicht alle Brow­ser unter­stüt­zen die neuen HTML-Elemente bereits, geren­dert wer­den sie aber schon irgend­wie. Damit das alles aber auch so tut wie es soll, setzt der kluge Webent­wick­ler in einem Rund­um­schlag alle neuen Ele­mente im CSS der Seite manu­ell auf display: block;.

/* Nun bringen wir den HTML5-Tags erst mal ordentliches Benehmen bei */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

So sind die Ele­mente näm­lich spe­zi­fi­ziert, wer­den aber unter ande­rem im Inter­net Explo­rer man­gels Kennt­nis als inline gerendert.

2 Kommentare bisher

Schreibe einen Kommentar oder kontaktiere mich bei Twitter unter @schneyra.

  1. Macht es nicht Sinn, ein­fach als ers­ten CSS-Eintrag das hier ein­zu­tra­gen?
    – schnipp –
    * {
    dis­play: block;
    mar­gin: 0;
    pad­ding: 0;
    }
    – schnapp –
    Mache ich zumin­dest immer so. Man kann ja dann im wei­te­ren Ver­lauf abwei­chende Dinge für ein­zelne Klas­sen oder IDs spezifizieren.

    Finde ich war­tungs­freund­li­cher – falls man mal eine Klasse oder ID im HTML umnennt und im CSS vergisst. :-)

  2. NewsShit!-Mensch: Was du machst ist ja ein kom­plet­ter Reset des User­style­s­heets. Und da würde ich bes­ser nicht display: block; rein­schrei­ben. ;-) Zum Reset der Brow­ser­vor­ga­ben nutze ich die CSS-Reset-Definitionen von Eric Meyer.

    Hier geht es ja darum, dass bestimmte Brow­ser Ele­mente nicht so inter­pre­tie­ren wie sie sol­len – und wie es andere machen. Ich stelle damit nur sicher, dass bei IE, Fire­fox, Safari und wem auch sonst noch das gleich ankommt.

Schreibe einen Kommentar