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

  • 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> <!--// Hauptbereich, ohne HeaderNav, SideNav und AsideAds //!-->

     <section id="pinwall"> <!--// Sektion die ich via JSON bei einem fingierten Seitenwechsel austausche (bspw. die Pinnwand) //!-->

      <header> <!--// Informationen zum aktuellen Inhalt (bzw. der fingierten Seite) //!-->

      </header>

      <article id="post_12345"> <!--// Box für einen Nutzerbeitrag (Posting) //!-->

       <header class="info"> <!--// Author- & Posting-Infos (Datum/Uhrzeit, Nutzer) //!-->

       </header>

       <section class="posting"> <!--// Nutzerbeitrag (Posting) inkl. [BBCode] (bspw. <p>-Absätze oder Hyperinks) //!-->

       </section>

       <section class="media"> <!--// vom Nutzer beigefügte Medien (bspw. Bilder, Videos, Link-Vorschau) //!-->

       </section>

       <footer> <!--// interaktive Buttons: Like, Share, ... //!-->

       </footer>

      </article>

      <footer> <!--// Ggf. Impressum-, AGBs-, Datenschutz-Links (falls überhaupt seitenabhängig, sonst Page-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. :)

  • 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:


    Grüße,

    Stef

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

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


    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.