In HTML5 weiß ich, dass <nav>dies entweder innerhalb oder außerhalb des Masthead- <header>Elements der Seite verwendet werden kann. Bei Websites mit sowohl sekundärer als auch Hauptnavigation scheint es üblich zu sein, die sekundäre Navigation als <nav>Element innerhalb des Masthead- <header>Elements und die Hauptnavigation als <nav>Element außerhalb des Masthead- <header>Elements einzuschließen . Wenn der Website jedoch die sekundäre Navigation fehlt, scheint es üblich zu sein, die Hauptnavigation in ein <nav>Element innerhalb des Masthead- <header>Elements aufzunehmen.

Wenn ich diesen Beispielen folge, basiert meine Inhaltsstruktur auf dem Einschluss oder Ausschluss der sekundären Navigation. Dies führt eine Kopplung zwischen dem Inhalt und dem Stil ein, die sich unnötig und unnatürlich anfühlt.

Gibt es einen besseren Weg, um die Hauptnavigation nicht von innen nach außen zu verschieben <header>, basierend auf dem Einschluss oder Ausschluss der sekundären Navigation?

Beispiel für Haupt- und Sekundärnavigation

<header>
    <nav>
        <!-- Secondary Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Main Navigation outside <header> -->
    <ul>
        <li></li>
    </ul>
</nav>

OnlineDegrees.org ist eine Beispielseite, die dem obigen Muster folgt.

Hauptnavigationsbeispiel

<header>
    <h1>Website Title</h1>
    <nav>
        <!-- Main Navigation inside <header> -->
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

Keyzo.co.uk ist eine Beispielseite, die dem obigen Muster folgt.

Auszüge aus der Einführung von HTML5 - Hinzugefügt am 02.02.11, 07:38 Uhr

Die Einführung von HTML5 von Bruce Lawson und Remy Sharp hat Folgendes zu diesem Thema zu sagen:

Der Header kann auch eine Navigation enthalten. Dies kann für die Site-weite Navigation sehr nützlich sein, insbesondere bei vorlagengesteuerten Sites, bei denen das gesamte <header>Element aus einer Vorlagendatei stammen könnte.

Natürlich ist es nicht erforderlich, dass die <nav>in der <header>.

Dies hängt weitgehend davon ab, ob Sie der Meinung sind, dass die Site-weite Navigation in den Site-weiten Header gehört, und auch von pragmatischen Überlegungen zur einfachen Gestaltung.

Basierend auf diesem letzten Satz scheint Bruce Lawson - Autor des Kapitels, aus dem diese Auszüge stammen - zuzugeben, dass "pragmatische Überlegungen zur einfachen Gestaltung" eine Kopplung zwischen Inhalt und Stil ergeben.

Es liegt ganz bei Ihnen. Sie können sie entweder in die Kopfzeile einfügen oder nicht, solange die darin enthaltenen Elemente nur interne Navigationselemente sind (dh keine Links zu externen Websites wie einem Twitter- oder Facebook-Konto), ist dies in Ordnung.

Sie werden in der Regel in einen Header eingefügt, nur weil dort häufig navigiert wird, aber nicht in Stein gemeißelt.

Weitere Informationen finden Sie unter HTML5 Doctor .

Es ist ein wenig unklar, ob Sie nach Meinungen fragen, z. "Es ist üblich, xxx zu machen" oder eine tatsächliche Regel, also werde ich mich in Richtung der Regeln lehnen.

Die Beispiele, die Sie zitieren, scheinen auf den Beispielen in der Spezifikation für das nav-Element zu basieren . Denken Sie daran, dass die Spezifikation immer weiter optimiert wird und die Regeln manchmal verworren sind. Daher würde ich wagen, dass viele Leute dazu neigen, nur das zu tun, was gegeben ist, anstatt zu interpretieren. Sie zeigen zwei separate Beispiele mit unterschiedlichem Verhalten, sodass Sie nur so viel hineinlesen können. Haben beide Standorte auch die gegnerische Sub- / Navi-Situation und wenn ja, wie gehen sie damit um?

Vor allem aber gibt es nichts in der Spezifikation entweder sagt , ist die Art und Weise , es zu tun. Eines der Ziele bei HTML5 war es , [dies zum Vergleich] über Semantik, Anforderungen usw. klar zu machen , daher ist die Auslassung erwähnenswert. Soweit ich sehen kann, sind die Beispiele unabhängig voneinander und gleichermaßen gültig in ihrem eigenen Kontext von Layoutanforderungen usw.

Die Quellposition des Navis bedingt zu haben, ist irgendwie albern (eine weitere rote Fahne). Wählen Sie einfach eine Methode und machen Sie mit.

Ich mag es nicht, das Navi in den Header zu setzen . Meine Argumentation ist:

Logik

Die Kopfzeile enthält einführende Informationen zum Dokument. Das Navi ist ein Menü, das auf andere Dokumente verweist . Für mich bedeutet dies, dass der Inhalt des Navigationsgeräts eher zur Site als zum Dokument gehört. Eine Ausnahme wäre, wenn der Nettoinventarwert Forward-Links enthält.

Barrierefreiheit

Ich setze Menüs lieber am Ende des Quellcodes als am Anfang. Ich verwende CSS, um es an den oberen Rand eines Computerbildschirms zu senden, oder lasse es am Ende für Text-Sprach-Browser und kleine Bildschirme. Dies vermeidet die Notwendigkeit von Sprunglinks.

@ IanDevlin ist korrekt. Die MDN-Regeln lauten wie folgt :

"Das HTML-Kopfzeilenelement" "definiert einen Seitenkopf - enthält normalerweise das Logo und den Namen der Site und möglicherweise ein horizontales Menü ..."

Das Wort "möglicherweise" gibt es Schlüssel. Der Header muss nicht unbedingt ein Site-Header sein. Beispielsweise könnten Sie einen "Header" in ein Popup-Modal oder in andere modulare Teile des Dokuments einfügen, in denen sich ein Header befindet, und es wäre hilfreich, wenn ein Benutzer auf einem Bildschirmleser darüber informiert wäre.

In Bezug auf die implizite Verwendung von NAV können Sie es überall dort verwenden, wo es eine gruppierte Site-Navigation gibt, obwohl es normalerweise im Abschnitt "Fußzeile" für Mini-Navis / wichtige Site-Links weggelassen wird.

Es kommt wirklich auf die persönliche / Teamwahl an. Entscheiden Sie, was Sie und Ihr Team für semantischer und wichtiger halten, und versuchen Sie, konsistent zu sein. Wenn das Navi mit dem Logo und dem "h1" der Hauptwebsite übereinstimmt, ist es für mich sinnvoll, es in den "Header" einzufügen. Wenn Sie jedoch eine andere Designauswahl haben, entscheiden Sie von Fall zu Fall.

Schauen Sie sich vor allem die Dokumente an und stellen Sie sicher, dass Sie verstehen, warum Sie diese bestimmte Entscheidung treffen, wenn Sie sie weglassen oder einschließen.

Um zu erweitern, was @JoshuaMaddox im MDN-Lernbereich im Abschnitt "Einführung in HTML" gesagt hat, heißt es im Unterabschnitt " Dokument- und Website-Struktur" (fett / hervorgehoben von mir):

Header

Normalerweise ein großer Streifen über der Oberseite mit einer großen Überschrift und / oder einem Logo. Hier bleiben die wichtigsten allgemeinen Informationen zu einer Website normalerweise von einer Webseite zur anderen.

Navigationsleiste

Links zu den Hauptabschnitten der Website; normalerweise dargestellt durch Menüschaltflächen, Links oder Registerkarten. Wie der Header bleibt dieser Inhalt normalerweise von einer Webseite zur anderen konsistent. Eine inkonsistente Navigation auf Ihrer Website führt nur zu verwirrten, frustrierten Benutzern. Viele Webdesigner betrachten die Navigationsleiste eher als Teil der Kopfzeile als als einzelne Komponente. Dies ist jedoch keine Voraussetzung. Einige argumentieren sogar, dass es für die Zugänglichkeit besser ist, die beiden Funktionen getrennt zu haben, da Bildschirmleser die beiden Funktionen besser lesen können, wenn sie getrennt sind .