Pinnwand-Postings als <ARTICLE> oder <SECTION> oder <UL> / <LI> (HTML5)?

Froschkoenig84 · 20. Mai 2018

Hall,

ich bin eigentlich schon eine Weile dabei, da ich aber primär Backend entwickle, fällt es mir manchmal etwas schwer, im Frontend korrekte #html5 Schematas zusammen zu stellen.

Eigentlich wollte ich einen Blog bauen, aber inzwischen fiel mir auf, dass die Community als solche immer mehr in den Vordergrund rückt. Deswegen ersetze ich "meine" längeren "Blog"-Beiträge durch kürzere nutzergenerierte Beiträge, in Form einer Pinwall. Stellt euch das ein wenig wie Facebook vor, jedoch wesentlich mehr auf eine spezielle Nische spezialisiert.

Ich plane also eine Pinnwand mit Beiträgen und Kommentaren (Posts & Comments).
Dazu kommt, dass meine Seite als SPA (single page application), also quasi mit URL-Manipulation (history.pushState()) und wechselnden Inhalten (contents) aufgebaut werden soll.

...

<main> 

<section id="pinwall"> 

<header> 

</header>

<article id="post_12345"> 

<header class="info"> 

</header>

<section class="posting"> 

</section>

<section class="media"> 

</section>

<footer> 

</footer>

</article>

<footer> 

</footer>

</section>

</main>

...

Ich bin mir bspw. nicht sicher, ob ein <article>-Element überhaupt ein <header>-Element beinhalten darf.
Außerdem ist es aufgrund viele weiterer Infos leider notwendig, den eigentlich Beitrag innerhalb des <article> noch mal in eine untergeordnete <section> zu schieben. Alternativ könnte ich den <article> auch erst hier setzen und weiter oben zwei <section> ineinander genestet. Aber letztendlich gehören Authoreninfos, Medien und die Like-/Share-Buttons nun mal auch zum Artikel, daher die obige Struktur.

Widerspricht mein Schema irgendwelchen HTML5-Rules?

Danke für eure Hilfe.

Stef · 21. Mai 2018

Hey,

Zitat

Widerspricht mein Schema irgendwelchen HTML5-Rules?

Ja, das tut es. Der Header-Tag ist für den Kopfteil der Webseite zuständig, der Main-Tag für den Hauptteil und der Footer-Tag für den Fußbereich der Webseite.

Desweiteren sollte man diese Tags nur einmal in einem HTML-Dokument benutzen.

Wenn du keine passende HTML-Tags findest dann kannst du den div-tag verwenden.

Schau auch mal hier, dies sollte dir helfen: https://developer.mozilla.org/…/HTML5/HTML5_element_list

Korrekt wäre aus meiner Sicht:

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Webseitentitel</title>
</head>
<body>
    <header>
        <h1>Deine Überschrift</h1>
    </header>
    <main>
        <section id="pinwall">
            <article id="post_12345">

            </article>
        </section>
        <section class="posting">
            
        </section>
        <section class="media">
            
        </section>
    </main>
    <footer>
        
    </footer>
</body>

Alles anzeigen

Grüße,

Stef

JR Cologne · 21. Mai 2018

Das muss ich leider korrigieren. Der main-Tag sollte nur einmal vorkommen.

Header und Footer hingegen können mehrmals verwendet werden, da diese z.B. auch innerhalb des article-Tags zur Unterteilung eines Blog-Beitrags o.ä. genutzt werden können.

Im Header würden dann z.B. das Artikelbild und der Titel untergebracht sein, während im Footer der Autor sowie das Erscheinungsdatum stehen würde.

Froschkoenig84 · 21. Mai 2018

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...

HTML

<!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.

Pinnwand-Postings als <ARTICLE> oder <SECTION> oder <UL> / <LI> (HTML5)?

Jetzt mitmachen!

Teilen

Tags