Mit HTML 5 Elementen die Webseite strukturieren

HEADER - ARTICLE - SECTION - ASIDE Elemtente kombinieren

betrachtet man die Entwicklung responsiven Applikationen
wird umso mehr deutlich, warum HTML5 Elemente Sinn machen.
Extendet Libararies wie, bsp. Bootstrapp, jQuery Mobile, Node.js etc. nutzen CSS Libaries um responsive Development möglich zu machen.

Ohne HTML5 Elemente waren HTML Dokumente kaum strukturiert
und nicht Agile genug um mit Hilfe von CSS3
sich an die unterschiedliche Bildschirmgrößen der Endgeräte anpassen zu können

        <header> </header>

        <article> </article>

        <section> </section>

        <aside> </aside>

Einbetten der SECTION in das ARTICLE Element oder Umgekehrt

Um das Grundprinzip der neuen HTML 5 Strukturierungselemente HEADER, ARTICLE und SECTION
besser zu verstehen und umzusetzen, kann man sich einfach vorstellen,
die Webseite wäre ähnlich, wie eine Zeitungsseite.

Auf einer Zeitungsseite findet man oft einen Hauptartikel
und darin (auf dem gleichen Stück Papier) verschiedene Sektionen.
Die Werbung hingegen kann man beispielsweise in das ASIDE Element einbetten.

Man kann sowohl die Section als Kind-Element von Article definieren,
oder umgekehrt Article als Kind-Element von Section.

Hier ein einfaches Beispiel,
wo Section als Kind-Element von Article deffiniert wurde:

        <header>
                hier bringe ich die Navigation unter
        </header>

        <article>
          <h1>Die Überschrift des Hauptartikels</h1>
          <p>
                In den Artikel geht es um ...
                (Section als Kind Element von Article)
          </p>
          <section>
                <h2>Nebeinbei sei erwähnt</h2>
                <p>das man beliebig viele Section Elemente
                im ARTICLE Element unterbringen (einbetten) kann  ...</p>
          </section>
          <section>
                <h2>Aber auch </h2>
                <p>Der im ARTICLE beschriebene Content
                sollte thematisch zu dieser SECTION zusammen passen...</p>
          </section>
          <aside>
                Werbung oder so
          </aside>
        </article>

        <section>
          <article>
                <h2>Nicht direkt Themen bezogener Content </h2>
                <p>Kann man als ARTICLE in der Strukturierung
                    in SECTION Element einbetten
                   (ARTICLE als Kind Element von SECTION)
                   und so thematisch vom Hauptartikel trennen
                </p>
          </article>
        </section>