Ein grundsätzliche Frage der html5-Erstellung - Eine Frage des Stils

einsiedler · 7. November 2018

Hallo liebe Forumer,

ich habe mal eine Frage des (ich sag mal) "Guten Stils"

Und zwar darf ( im html5) eine <nav></nav> innerhalb vom <header> gepackt werden?

oder ist eine andere Lösung erstrebenswerter:

A)

Code

<header>
    <h1>Testing</h1>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</header>

B)

Code

<div class="aside">
    <header>
        <h1>Testing</h1>
    </header>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</div>

Alles anzeigen

Achso: Die header-Überschrift als auch die Navigation (zusammen) möchte ich als "quasi aside" am linken Rand anordnen.

Ein <aside> ist ja hier nicht angebracht weil dort keine direkte Navigation integriert werden darf, höchstens (weiterleitende Infos & Links),

nicht aber die Hauptnavi.

Ist dies so richtig?

Gruß der einsiedelnde

Sempervivum · 7. November 2018

Interessante Frage. Erst hatte ich geschrieben, dass ich da keine Bedenken hätte, aber Recherche bei Selfhtml hat mich belehrt, dass der Begriff "aside" sich auf den Inhalt bezieht und nicht auf die Anordnung im Layout.

Edit: Warum muss immer ein Wrapper drum herum? Die Nav kann man als solche links anordnen und sie kann laut Selfhtml auch eine Überschrift enthalten.

einsiedler · 7. November 2018

Zu A) <aside>

Also der Inhalt vom <aside> soll sich "inderekt" auf dem inhalt vom <main> beziehen.... als Anmerkungen / weiterführende links... Das meinst Du...

zu B) Hauptnavigation <nav> </nav>

Ich dachte jetzt an die Hauptnavigation "home arbeiten cv impressum kontakt rechtliches" und im <header> den Seiten-Titel (als <h1> // villeicht auch noch eine <h2> und zusätzlich ein img.

Das man das halt getrennt hält.

Ich wollte es so machen:

Code

**************************** ********************************
*++++++++++++++++++++++++++* *  <main>                      *
*+ <h1>derEinsiedler</h1> +* *                              *
*+                        +* *                              *
*++++++++++++++++++++++++++* *                              *
*                          * *                              *
*++++++++++++++++++++++++++* *                              *
*+ <nav>                  +* *                              *
*+ Home                   +* *                              *
*+ Impressum              +* *                              *
*+ Arbeiten               +* *                      </main> *
*+ Kontakt                +* ********************************
*+ rechtliches     </nav> +*
*++++++++++++++++++++++++++*
****************************

Alles anzeigen

Deshalb das markup B) ...

Gruß der einsiedelnde

Sempervivum · 7. November 2018

Zitat

und im <header> den Seiten-Titel (als <h1>

Ach so, da hatte ich dich falsch verstanden, ich dachte, die Überschrift sollte zur Navigation gehören. Dann ist sie natürlich im nav-Tag nicht so gut aufgehoben und ein header-Tag ist eher angebracht. Unter diesen Bedingungen finde ich deine Lösung B) gut.

Sempervivum · 7. November 2018

PS: Die Listenstruktur ist jedoch nicht valide:

Zitat

Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

From line 8, column 17; to line 8, column 27

<a href=""><li>Ho

Ein grundsätzliche Frage der html5-Erstellung - Eine Frage des Stils

Jetzt mitmachen!

Teilen

Tags