Position header / footer im HTML5-Dokument

[WiMu]

Hallo liebes Forum,

nur 'ne ganz kurze Frage: früher war es mal üblich (ob sinnvoll sei mal dahingestellt), im Dokument den eigentlichen Inhalt möglichst weit oben zu plazieren (angeblich besser für Suchmaschinen, Screenreader, etc.), also beispielsweise das Navigationsmenue im Quelltext hinter dem Inhalt zu plazieren, auch wenn die Navi über dem Text angezeigt werden soll; z.B.:

  
<div id="content">  
<p>Lorem Ipsum</p>  
</div>  
<div id="topmenu">  
<ul>  
<li><a href="home.html"></li>  
<li><a href="irgendwas_anderes.html"></li>  
<!-- usw. -->  
</ul>  
</div>  

und per css dann das "topmenu" über dem "content" anzeigen lassen.

Wie sieht es denn mit HTML5 aus? Dort hat man ja explizit die Möglichkeit, etwas als "header", "nav", "footer", "article", usw. auszuzeichnen. Ist es dann noch sinnvoll, beispielsweise mit <article> zu beginnen und erst danach den <header> unterzubringen - so wie oben, oder sollte man sich an die semantisch sinnvolle Struktur halten (<header> ... <article> ... <footer>)? Ich hätte schon gern, dass z.B. facebook oder Google sinnvolle Snippets meiner Seite anzeigt oder sich screenreader nicht erst durch das ganze Menue quälen müssen bis das eigentlich wichtige kommt ...

Liebe Grüße,
WiMu

[MrMurphy]

Hallo liebes Forum,

nur 'ne ganz kurze Frage: früher war es mal üblich (ob sinnvoll sei mal dahingestellt), im Dokument den eigentlichen Inhalt möglichst weit oben zu plazieren (angeblich besser für Suchmaschinen, Screenreader, etc.), also beispielsweise das Navigationsmenue im Quelltext hinter dem Inhalt zu plazieren, auch wenn die Navi über dem Text angezeigt werden soll; z.B.:

<div id="content">
<p>Lorem Ipsum</p>
</div>
<div id="topmenu">
<ul>
<li><a href="home.html"></li>
<li><a href="irgendwas_anderes.html"></li>
<!-- usw. -->
</ul>
</div>

>   
> und per css dann das "topmenu" über dem "content" anzeigen lassen.  
>   
> Wie sieht es denn mit HTML5 aus? Dort hat man ja explizit die Möglichkeit, etwas als "header", "nav", "footer", "article", usw. auszuzeichnen. Ist es dann noch sinnvoll, beispielsweise mit <article> zu beginnen und erst danach den <header> unterzubringen - so wie oben, oder sollte man sich an die semantisch sinnvolle Struktur halten (<header> ... <article> ... <footer>)? Ich hätte schon gern, dass z.B. facebook oder Google sinnvolle Snippets meiner Seite anzeigt oder sich screenreader nicht erst durch das ganze Menue quälen müssen bis das eigentlich wichtige kommt ...  
>   
> Liebe Grüße,  
> WiMu  
  
Hallo,  
  
"Ist es dann noch sinnvoll, beispielsweise mit <article> zu beginnen und erst danach den <header> unterzubringen - so wie oben, oder sollte man sich an die semantisch sinnvolle Struktur halten (<header> ... <article> ... <footer>)?"  
  
Man sollte sich an die semantische Struktur halten. Das eine andere Reihenfolge sinnvoll war ist schlichtweg eine Legende. Das Problem ist, das viele daran glauben und sie weitertragen. Elvis lebt ja auch noch. Und in der Area 5.... Aber an den Weihnachtsmann glaube ich natürlich nicht. Ich bin ja Realist.  
  
Gruss  
  
MrMurphy

[WiMu]

Man sollte sich an die semantische Struktur halten. Das eine andere Reihenfolge sinnvoll war ist schlichtweg eine Legende. Das Problem ist, das viele daran glauben und sie weitertragen. Elvis lebt ja auch noch. Und in der Area 5.... Aber an den Weihnachtsmann glaube ich natürlich nicht. Ich bin ja Realist.

Gruss

MrMurphy

Moin,

vielen Dank für die Info ... ich würde es auch für reine Legende halten, wenn nicht sogar "große" Projekte wie z.B. die Wikipedia ihre Dokumentenstruktur völlig durcheinanderwürfelten, um das "wichtigste" möglichst weit nach oben zu kriegen. So bin ich nicht so sicher (das, was die MediaWiki-Leute so verzapfen hat eigentlich meist Hand & Fuß) ...

Grüße,
WiMu

[MrMurphy]

Hallo

"Wikipedia ihre Dokumentenstruktur völlig durcheinanderwürfelten"

Das wäre mir neu. Beleg?

Große Anbieter wie Google, Ebay und ähnliche Kaliber braten zwar manchmal ihre Eigenwürste, aber das hat nichts mit SEO zu tun, sondern hat andere Gründe.

Gruss

MrMurphy

[WiMu]

Das wäre mir neu. Beleg?

Also rein optisch - von links nach rechts & von oben nach unten - müsste zuallererst das Logo, danach die sidebar (Mitmachen, Drucken, Werkzeuge, andere Sprachen und so) kommen; danach auf der rechten Seite zuerst die Links zur eigenen Benutzerseite (oder seine IP, wenn man nicht eingeloggt ist), dann die Leiste mit dem Link zur jeweiligen Diskussionsseite, zum Bearbeiten und das Suchfeld; dann der eigentliche Inhalt (Artikel) und zum Schluss der Footer mit Seitenstatistik, Lizenz, usw.
Im Quelltext sieht's so aus:

  
<body class="mediawiki ltr sitedir-ltr capitalize-all-nouns ns-4 ns-subject page-Wikipedia_Hauptseite skin-vector action-view vector-animateLayout">  
		<div id="mw-page-base" class="noprint"></div>  
		<div id="mw-head-base" class="noprint"></div>  
		<div id="content" class="mw-body" role="main">  
			<a id="top"></a>  
			<div id="mw-js-message" style="display:none;"></div>  
						<div id="siteNotice"><!-- CentralNotice --></div>  
						<h1 id="firstHeading" class="firstHeading" lang="de"><span dir="auto">Wikipedia:Hauptseite</span></h1>  
			<div id="bodyContent">  
								<div id="siteSub">aus Wikipedia, der freien Enzyklopädie</div>  
								<div id="contentSub"></div>  
												<div id="jump-to-nav" class="mw-jump">  
					Wechseln zu:					<a href="#mw-navigation">Navigation</a>, 					<a href="#p-search">Suche</a>  
				</div>  
				<div id="mw-content-text" lang="de" dir="ltr" class="mw-content-ltr"><div id="hauptseite">  

Dann kommt der Seiteninhalt (also praktisch vor allem anderen), direkt danach:

  
<div class="printfooter">  
				Von „<a href="http://de.wikipedia.org/w/index.php?title=Wikipedia:Hauptseite&amp;oldid=122168171">http://de.wikipedia.org/w/index.php?title=Wikipedia:Hauptseite&amp;oldid=122168171</a>“				</div>  
												<div id='catlinks' class='catlinks'><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Wikipedia:Kategorien" title="Wikipedia:Kategorien">Kategorie</a>: <ul><li><a href="/wiki/Kategorie:Wikipedia:Hauptseite" title="Kategorie:Wikipedia:Hauptseite">Wikipedia:Hauptseite</a></li></ul></div></div>												<div class="visualClear"></div>  
							</div>  
		</div>  
		<div id="mw-navigation">  
			<h2>Navigationsmenü</h2>  
			<div id="mw-head">  
				<div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label">  
	<h3 id="p-personal-label">Meine Werkzeuge</h3>  

Es folgen der link zur eigenen Benutzerseite u.ä., danach die Knöppe zum Bearbeiten der Seite, anschließend die sidebar und zum Schluss der Footer. Das Logo (id="p-logo") ist bei mir beispielsweise erst in Zeile 220 von 370 zu finden ... alles in allem bis auf den "footer", der wirlich erst ganz zum Schluss auftaucht, fast genau falschrum :-)

Sorry für die lange Antwort, Grüße,
WiMu

[WiMu]

... oder viel einfacher: die Seite mal ohne Stylesheets ansehen ...

Grüße,
WiMu

[molily]

Hallo,

Das eine andere Reihenfolge sinnvoll war ist schlichtweg eine Legende.

Was genau daran war eine Legende?

Mathias

[molily]

Hallo!

früher war es mal üblich (ob sinnvoll sei mal dahingestellt), im Dokument den eigentlichen Inhalt möglichst weit oben zu plazieren (angeblich besser für Suchmaschinen, Screenreader, etc.)

Das ist auch heute noch sinnvoll, aus eben diesen Gründen.

Ein anderes Mittel, um Zugänglichkeit zu verbessern, ist das Setzen von Skip-Links zum Überspringen von unwichtigen Inhalten. Man könnte auch darauf vertrauen, dass Screenreader-Benutzer das Überspringen von logischen Dokumentabschnitten beherrschen, dann sollte zumindest jeder Abschnitt eine verständliche Überschrift haben.

Ist es dann noch sinnvoll, beispielsweise mit <article> zu beginnen und erst danach den <header> unterzubringen

Mit article zu beginnen ist unpassend. Für den Hauptinhalt gibt es das main-Element. article würde ich verwenden, wenn ein Dokument mehrere davon enthält, denn dessen Inhalt ist eine abgeschlossene Einheit, die zumindest prinzipiell für sich alleine stehen kann (siehe Spezifikation).

Zu deiner Frage: Ich wüsste nicht, dass die Reihenfolge header - nav - main - footer zwingend ist. ABER: Im obersten header-Element sollte der individuelle Seitentitel stehen (h1-Element). Da der sinnvollerweise über dem Hauptinhalt gelesen wird, erscheint mir die Reihenfolge header > main > Sonstiges natürlich.

Ein sich auf jeder Seite wiederholendes Site-Logo, ein Site-Schriftzug und ein paar zentrale Links kannst du natürlich dem main-Element nachordnen. Das würde ich aber nicht mit header auszeichnen. Gegebenenfalls sind nav und aside passend.

Beispielsweise würde ich den Kladderadatsch, der bei der Wikipedia über dem Artikel liegt, nicht als Header auszeichnen. Das ist eher eine eigene Section, die Links rund ums Editieren bietet (Login, Diskussion, Bearbeiten, Versionsgeschichte…). Vielleicht könnte man die Links auch gemeinsam mit der h1 in den obersten header stecken, aber dafür wären mir die Links zu nebensächlich.

Wenn du im main-Element z.B. article-Elemente hast, so bilden diese gesonderte Abschnitte und haben üblicherweise eigene header-Elemente mit Überschriften. In solchen Sections würde ich die Reihenfolge header > Inhalt > footer auch beibehalten. Der Titel, eine Zusammenfassung usw. sollen i.d.R. vor dem Hauptinhalt stehen und der Footer enthält i.d.R. weniger wichtige Inhalte, die nach dem Hauptinhalt gelesen werden sollten.

Grüße,
Mathias