Mit HTML 5 Elementen die Webseite strukturieren

HTML 5 Grundaufbau und verschiedene Kombinationsmöglichkeiten

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>

Im Internet findet man noch zahlreiche weitere Kombinationsmöglichkeiten
zu den neuen HTML5 Elementen
und "wie" man den Webseiten Inhalt damit strukturieren oder kombinieren kann.


Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Bold Italic Underline Strike Superscript Subscript Code PHP Quote Line Bullet Numeric Link Email Image Video
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
What is the opposite word of small?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics