Was ist der Unterschied zwischen der Verwendung von NAV und DIV um Bootstrap 3-Navigationsleisten herum?

Lesezeit: 9 Minuten

Benutzer-Avatar
Doug Hockinson

In Beispielen für die neuesten Bootstrap 3-Navigationsleisten habe ich verschiedene Beispiele im Internet gefunden, wo sich das äußere Navbar-Markup befindet

<div class="navbar navbar-default navbar-static-top">...</div>

und andere Beispiele verwenden

<nav class="navbar navbar-default" role="navigation">...</nav>

Alle Beispiele funktionieren OK, und die Dokumentation fordert NAV. Daher frage ich mich, ob viele Beispiele im Web Reste der Version 2 sind, die nicht für Version 3 umgeschrieben wurden, oder ob es in Ordnung ist, eines der umgebenden Markups zu verwenden.

Beispiel

  • Ich denke, NAV ist besser, weil es ein HTML5-Element ist, das Ihrem Browser anzeigt, dass es sich um einen Navigationsabschnitt handelt. Wenn Sie also alles mit DIV und NAV zum Laufen bringen können, würde ich mich für das NAV-Markup entscheiden.

    – gab

    5. September 2013 um 15:29 Uhr

  • NAV ist eine HTML5-Standardisierung eines DIV-Elements, das speziell zum Einschließen von Navigationsleisten oder -elementen verwendet wird.

    – HM1

    5. September 2013 um 15:32 Uhr

  • Ich weiss Navi ist ein neues Element in HTML5. Aber ich habe immer noch die gleichen Fragen wie der Autor: Ist es in Ordnung, beide Markups in Bootstrap 3 zu verwenden? oder aus Kompatibilitätsgründen sollten wir bei a bleiben div ? Behandelt (rendert) Bootstrap 3 diese beiden auf die gleiche Weise?

    – Johannes Wang

    5. Oktober 2013 um 7:00 Uhr


<nav> ist das semantische HTML5-Containerelement für Ihre Hauptnavigationselemente.

Das nav ist ein Element auf Blockebene, das verwendet wird, um einen Abschnitt mit wichtigen Navigationslinks auf einer Seite zu kennzeichnen. Nicht alle Links sollten in ein Navigationselement eingeschlossen werden. Die Navigation sollte für primäre Navigationsabschnitte reserviert sein, einschließlich der universellen Navigation, eines Inhaltsverzeichnisses, Breadcrumbs, vorheriger/nächster Links oder anderer bemerkenswerter Gruppen von Links.

aus http://learn.shayhowe.com/html-css/elements-semantics

Wenn Sie HTML5 verwenden, sollten Sie nav verwenden.

  • Abgesehen davon, dass es dem Browser sagt, dass es ein primäres Navigationselement für Links und anderes ist, verhält es sich anders oder ist es mit DIV zu vergleichen? Ich denke, beim OP geht es mehr darum, den Unterschied zu kennen. Natürlich weisen Sie auf einen Unterschied hin, aber nicht auf einen Verhaltensunterschied, da der Endbenutzer keinen Unterschied in seiner Verwendung des in DIV oder NAV enthaltenen Elements bemerken wird, sofern nicht anders …

    – cram2208

    2. September 2015 um 3:49 Uhr


  • Ich muss den Punkt Ihres Kommentars übersehen. Wollen Sie damit sagen, dass mein Rat, das Navi zu verwenden, falsch ist? Der Endbenutzer kann den Unterschied in den Zugänglichkeitsbedingungen bemerken, je nachdem, wie er auf die Inhalte zugreift. Sie bemerken es möglicherweise nicht sichtbar. Ich kann nicht ganz erkennen, was Sie vorschlagen.

    – Banford

    8. September 2015 um 10:12 Uhr

  • Deine Beschreibung trifft es auf den Punkt. Ich glaube, ich habe die Antwort auf meine Frage in @HM1 zu Fragekommentaren erhalten: “NAV ist eine HTML5-Standardisierung eines DIV-Elements, das speziell zum Einschließen von Navigationsleisten oder -elementen verwendet wird.” NAV und DIV sind also insofern identisch, als sie ein Blockelement darstellen, aber NAV ist speziell als DIV gedacht, das dem Browser mitteilt, dass es für Navigationszwecke dient.

    – cram2208

    8. September 2015 um 17:35 Uhr

  • @cram2208 Screenreader erhalten mehr Informationen von einer Navigationsleiste als von einem anderen div

    – Alexander Derk

    14. September 2016 um 7:33 Uhr

  • Es gibt also keinen Unterschied

    – JuJoDi

    16. September 2020 um 14:49 Uhr

Benutzer-Avatar
BobDCoder

Wenn Sie bedenken “div“, es ist ein Blockelement das nichts enthält, es ist leer, ein leeres Kästchen, das bereit ist, mit allen möglichen HTML-Dateien gefüllt zu werden.#X Code-Goodies.

Das “Nav“-Element ist ziemlich gleich, es ist jedoch als Block für die Handhabung eines bestimmten Satzes von HTML5-Code reserviert! Daher ist es für Navigationslinks reserviert (in der Praxis einer Regel, die gebrochen werden kann). Dennoch können Sie dasselbe in beiden tun Tag sozusagen, es sind die CSS-Attribute und -Klassen, die in den meisten Fällen beide Boxen steuern und manipulieren.

(in der Praxis einer Regel, die gebrochen werden kann)
Sie könnten sogar alle divs auf einer Webseite durch navs ersetzen, und es würde dasselbe darstellen, wenn der Browser nav unterstützt. Aber es würde nur dazu dienen, den Programmierer, Sie und andere zu verwirren.

Ich bin mir zwar nicht sicher, ob es bestimmte Anweisungen gibt, die die Navigation über div regulieren, einschränken oder unterdrücken, aber sie scheinen in allen Perspektiven das gleiche Tag zu sein, ein leerer Box-Container.

Beide Navi und div Unterstützung Global und Ereignisattribute also da gibt es keine unterschiede. ABER! Da sowohl nav als auch div eine globale Box (ein Container) sind, haben Sie als Programmierer für verrückte Wissenschaftler viele potenzielle Möglichkeiten.

Entschuldigung für die schwachen Referenzen, aber (W3-Schulen)

Bietet einen ziemlich guten Einblick in den Unterschied in Laienbegriffen.

Zusamenfassend: Navi(html5) wurde als Ergänzung geboren Zwilling zu div um die visuelle Tag-Codierung zu erleichtern und sie für Entwickler erkennbarer, lesbarer und verständlicher zu machen. Übrigens: div wird in html5 nicht als Tag abgewertet/und wird es IMO nie sein. Spanne ist ein anderer!

Die alte Methode zum Erstellen eines Navigationscontainers/-kastens war –

<div id="navigate"><a href="https://stackoverflow.com/questions/18628097/whatever">link</a></div>
or
<div id="navigate" class="nav"><a href="https://stackoverflow.com/questions/18628097/whatever">link</a></div>

und die Attribute, CSS und Klassen haben die ganze Arbeit gemacht.

Aber in der wunderbaren Welt von HTML 5 brachte das div-Tag den Klon hervor Navi Schild.

<nav> <a href="https://stackoverflow.com/questions/18628097/Home" class="xxx">my anchor/button/list of links with sprinkles</a></nav>

Das Navi -Tag bietet einen spezifischeren Hinweis (Identifikation) dessen, wofür es verwendet wird “Navigation“. Es handelt sich einfach um das Wesen der Elemente Nicht semantisch (div) und Semantik (Navigation); und wie man die Erklärung der w3-Schulen kopiert und plagiiert ….

Ein semantisches Element beschreibt seine Bedeutung sowohl für den Browser als auch für den Entwickler eindeutig.

Navi beschreibt im Code eindeutig, dass es sich um ein Block-Tag/Container handelt, der verwendet wird, um Navigationslinks (Inhalte) mit ul-li’s, a/href’s, Schaltflächen zu enthalten … Nav bekommt oder postet nichts, da es einfach ein ist leerer Kastenbehälter bis Sie Ihren Code und Links darin einfügen. Selbst dann macht das Navi nichts, es sind die Links, die die Arbeit erledigen. Die Attribute, die dem Navigations-Tag zugeordnet sind, führen die Manipulationen an dem Tag durch, z. B. “verbergen oder zeigen” es an seinen Positionen.

Div (Teilen) ist “nicht semantisch” da es nicht (so sehr) semantisch beschreibt, wofür es speziell ist oder was es tut, außer dass es Bereiche innerhalb des Seitenkörpers unterteilt.

Navi (Navigation) beschreibt sich selbst als nur für die Navigation reserviert, damit es berücksichtigt wird semantisch.

Schließlich und nebenbei bemerkt setzt sich html5 als neuer Standard durch, wird aber (zum Zeitpunkt des ursprünglichen Beitrags 2016-17?) nicht von allen neueren Browsern unterstützt, da es noch als offizielle Version fertiggestellt werden muss . IE muss es noch in ihre neuere Version aufnehmen (10, glaube ich). Aber es kommt!

Aber da nav> neueres HTML 5 ist (nur etwas unterstützt), müssen wir uns immer noch auf das div-Tag verlassen, um das zu umgeben/einzuschließen

<nav>...</nav>

Tag, und es ist etwas lebenswichtig. Also müssen wir noch verwenden

<div> <nav> links 1</nav> </div>

weit in die Zukunft für ältere Browser, da das nav-Tag nicht erkannt und von älteren Browsern ignoriert wird, sonst könnte der Inhalt einfach schweben oder aus dem Randfeld herausgeschoben werden oder andere negative Nebenwirkungen haben. In neueren Browsern, die die Navigation unterstützen, ist dies jedoch sicher. Sowohl div als auch nav zu haben, schadet einem Ting nicht oder verändert das Aussehen in merklichem Maße.

Kurz gesagt und offensichtlich können wir frühere Versionen von Browsern, die niedrigere Versionen von HTML (3.x und 4.1) unterstützen, zugunsten von HTML5 nicht ausschließen, wir müssen alle Browser berücksichtigen und abwärtskompatibel sein.

Es gibt viele Benutzer, die die neuen Browser, die HTML5 unterstützen, aufgrund älterer Betriebssysteme wie Windows XP nicht verwenden können. Denken Sie also daran, dass es immer noch viele Benutzer gibt, die gezwungen sind, IE 6,7,8-Mist auszuführen, der das neue HTML5-Navigationssystem und andere Tags nicht erkennt oder darstellt. Das heißt, wenn Sie alle potenziellen Zielgruppen erreichen möchten.

Ich hoffe, dies bietet einen besseren Einblick in den Unterschied, da ich die Frage und den Zweck von div und nav verstehe.

  • Übrigens, ja, Screenreader und dergleichen nehmen Navs auf, aber das ist nur eine Frage der Pflicht des Lesers, ein Tag zu erkennen und wofür es normalerweise verwendet wird.

    – BobDCoder

    27. Oktober 2016 um 7:09 Uhr

  • Korrektur zu meinem Code

  • Gehen Sie einfach hinein und bearbeiten Sie Ihren Eintrag – bei Stack Overflow verbessern und aktualisieren Sie einfach Ihre Antwort, bis sie genau richtig ist! Keine Notwendigkeit für diese “Ups, ich meinte ‘glorp’ lol”. Dies sind lebende Dokumente, reparieren Sie es einfach! Es gibt einige Dinge, die Sie reparieren können, Ihre Antwort ist anständig, es ist nur eine Bearbeitung.

    – erich

    16. September 2017 um 20:05 Uhr


Für den Browser gibt es absolut keinen Unterschied zwischen einem div- und einem nav-Tag. Der einzige Unterschied besteht für den menschlichen Leser des HTML. Die Verwendung eines nav-Tags, das Navigationselemente einschließt, ist dasselbe wie die Verwendung eines div-Tags zum Einschließen von Navigationselementen und das Hinzufügen eines HTML-Kommentars, der den menschlichen Leser des HTML-Codes darüber informiert, dass das div-Tag nur Navigationselemente enthält.

  • Können wir also sagen, dass es nur ein Hinweis darauf ist, dass Sie Navigationselemente darin einfügen müssen?

    – Große Augen

    20. März 2021 um 13:23 Uhr

Es gibt keinen Unterschied zwischen und . DIV ist das ursprüngliche HTML-Tag, während NAV als Teil von eingeführt wurde neue semantische HTML5-Tags. Sie verhalten sich genau gleich. Unterstützt alle globalen Attribute und Ereignisse [w3 link]. Der einzige Hauptzweck ist, dass es Semantik in HTML einführt, dh das Tag selbst sagt, was es enthalten soll, und nicht DIV, das keine Bedeutung hat.

Ein anderer Zweck ist die Idee der Erschwinglichkeit, das heißt, ein Objekt sagt Ihnen nur durch seine Eigenschaft, wofür es verwendet wird oder wie es verwendet werden sollte. Zum Beispiel weißt du automatisch, wie man eine Teekanne benutzt (sie hat einen Griff und eine Tülle), niemand muss es dir beibringen. Semantik bietet Erschwinglichkeit. Sie können sich Semantik genauso wie Angebote vorstellen (Angebote sind, sagen wir, visuell, Semantik ist, sagen wir, in der Codierung). Mehr auf diesem ausgezeichneten YouTube-Link

Der dritte Grund für dieses Tag ist die Bereitstellung von Barrierefreiheitsfunktionen für sehbehinderte Menschen. Es ist Teil von WAI-ARIA eine Reihe von Funktionen, die darauf ausgelegt sind, die Navigation zu verbessern, auch für sehbehinderte oder anderweitig eingeschränkte Personen. Angenommen, ein Benutzer interagiert mit der Anwendung über einen Bildschirmleser oder auf andere Weise, diese Anwendung verwendet diese semantischen HTML5-Tags (, , usw.) und kann diese aussprechen. Andere Möglichkeiten, wie HTML5 Semantik ermöglicht, sind die Zuweisung der role=””-Eigenschaft, die beispielsweise einem div oder einem HTML-Element Semantik bereitstellt.

1051160cookie-checkWas ist der Unterschied zwischen der Verwendung von NAV und DIV um Bootstrap 3-Navigationsleisten herum?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy