JR Cologne:
Danke. So ähnlich habe ich es vor. Ich vermute Stef hat noch die HTML5-beta-Regeln im Kopf, die wurden auch damals von MozDev vorgeschlagen. Tatsächlich gültig sind aber die W3C-Normen, laut denen es eben genauso, wie du es beschrieben hast, zulässig ist.
Zugegeben, ich mische HEADER und FOOTER vom inhaltlichen Vorgehen etwas, auch weil es mir irgendwie seltsam vorkäme, den Footer überhalb des eigentlichen Contents zu legen und darunter den Header zu platzieren. Datum und Author (ggf. auch eine Überschrift, wenn auch nur zur Sprungmarkennutzung) würde ich daher in den Header legen, während mein Footer dann eben Buttons (LIKE, SHARE, EDIT, DELETE, RIGHTS, ...) beinhalten.
Stef :
Natürlich hat mein BODY-Element ebenfalls HEADER und FOOTER, aber um diese Ebene ging es mir hier gar nicht. Sondern primär um den ARTICLE. Dein Vorschlag mag zwar semantisch ebenfalls korrekt sein, verfehlt aber das Ziel leider etwas. Denn auf der Pinnwand-Seite soll es dutzende, wenn nicht gar hunderte Beiträge (ARTICLE) geben. Bis 100 lass ich die automatische Erweiterung durchs Scrollen zu (ähnlich wie bei FB). Erst dann würde ich ein Paging in 100er-Schritten zwischenschalten, um es übersichtlich zu halten und die durch JavaScript sowieso schon strapazierten Client-Ressourcen etwas zu schonen. Außerdem ist eine Detail-Seite, quasi eine Singe-Post-Page für den jeweiligen Beitrag aufrufbar. Dafür werde ich in jedem aufgelisteten Beitrag sowohl ein <h3> (das sich auch prima als Sprungmarke nutzen lässt), als auch einen JS-Link hinterlegen.
Die Idee ist...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...</title>
<meta name="description" content="...">
<meta name="author" content="...">
<meta name="keywords" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="..." type="text/css" rel="stylesheet">
<script src="..."></script>//-->
</head>
<body>
<header>
<nav id="top">
<ul>
<li class="logo"><label class="grey">...</label></li>
<li class="button"><label class="orange">...</label></li>
<li class="button"><label class="red">...</label></li>
<li class="button"><label class="purple">...</label></li>
<li class="button"><label class="blue">...</label></li>
<li class="button"><label class="green">...</label></li>
<li class="button"><label class="grey">...</label></li>
</ul>
<ul class="breadcrumb">
<li>Breadcrumbs</li>
<li>blaa</li>
<li>blaa</li>
</ul>
</nav>
</header>
<nav id="side">
<ul>
<li class="button"><label class="grey"></label></li>
<li class="button"><label class="grey"></label></li>
<li class="button"><label class="grey"></label></li>
<li class="button"><label class="grey"></label></li>
</ul>
</nav>
<main>
<section id="pinwall">
<header>...</header>
<article id="post_123456">
<header class="info">...</header>
<section class="content">...</section> <!--// USER-POST #A //!-->
<section class="media">....</section>
<footer>....</footer>
</article>
<article id="post_234567">
<header class="info">...</header>
<section class="content">...</section> <!--// USER-POST #B //!-->
<section class="media">....</section>
<footer>....</footer>
</article>
<article id="post_345678">
<header class="info">...</header>
<section class="content">...</section> <!--// USER-POST #C //!-->
<section class="media">....</section>
<footer>....</footer>
</article>
<article id="post_456789">
<header class="info">...</header>
<section class="content">...</section> <!--// USER-POST #D //!-->
<section class="media">....</section>
<footer>....</footer>
</article>
<footer></footer>
</section>
</main>
<aside id="ads">...</aside>
<footer>...</footer>
</body>
</html>
Alles anzeigen
Der Rohbau könnte sich noch ein wenig verändern, ist aber W3C-Konform. Ich war mir nicht sicher, ob ein ARTICLE als solches HEADER und FOOTER enthalten darf oder ob es valid wäre, innerhalb des ARTICLE eine SECTION "content" zu setzen, in der dann eigentlich der Inhalt des ARTICLE stehen würde, nämlich der eigentliche Nutzerbeitrag. Aber laut W3C spricht wohl nix dagegen, auch wenn es sicherlich "hübscher" und "maschinenfreundlicher" wäre, den Nutzerbeitrag direkt in ARTICLE zu legen, doch ich benötige darin sowieso DIVs um alles sauber voneinander zu trennen, besonders eben auch von den Medien.