Quelle est la différence entre utiliser NAV et DIV autour de Bootstrap 3 navbars?

dans exemples pour le dernier Bootstrap 3 navbars, j'ai trouvé divers exemples sur le web où le marqueur navbar externe est

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

et d'autres exemples utilisent

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

tous les exemples fonctionnent bien, et la documentation appelle la navigation. Ce qui me laisse me demander si beaucoup d'exemples sur le web sont des restes de la version 2 qui n'ont pas été réécrits pour la version 3, ou s'il est correct d'utiliser l'un ou l'autre markup environnant.

Exemple

23
demandé sur Poteito 2013-09-05 09:01:57

2 réponses

<nav> est l'élément conteneur sémantique HTML5 pour vous Principaux éléments de navigation.

La nav est un élément de niveau bloc utilisé pour désigner une section de liens de navigation importants sur une page. Tous les liens ne devraient pas être inclus dans un élément nav. Le nav doit être réservé pour les sections de navigation primaires, y compris la navigation universelle, une table des matières, des miettes, des liens précédents/suivants, ou d'autres groupes de liens dignes de mention.

à partir de http://learn.shayhowe.com/html-css/elements-semantics

si vous utilisez HTML5, vous devez utiliser nav.

15
répondu Banford 2013-09-05 15:32:30

Si vous considérez " div", c'est un élément de bloc qui contient rien, c'est vide, une boîte en carton vide, prêt à être rempli avec toutes sortes de html #X code goodies.

Le "Vl" élément est un peu la même, mais il est réservé à un bloc pour le traitement d'un ensemble spécifique de code html5! D'où son réservé pour les liens de navigation (dans la pratique d'une règle qui peut être brisée). Encore, vous pouvez faire la même chose dans les deux balise pour ainsi dire, son les attributs et les classes CSS qui contrôlent et manipulent les deux boîtes dans la plupart des cas.

(dans la pratique d'une règle qui peut être cassé) Vous pouvez même remplacer toutes les div par des nav dans une page Web et le rendu sera le même si le navigateur prend en charge nav. Mais cela ne servirait qu'à confondre le codeur, vous et les autres.

bien que je ne sois pas certain s'il y a des directives spécifiques qui régulent, restreignent ou répriment la navigation sur div, elles semblent être à peu près la même étiquette dans toutes les perspectives, un conteneur Boîte vide.

vl et div soutien Global et attributs de L'événement il n'y a donc pas de différences. Mais! Puisque nav et div sont une boîte globale (un conteneur), vous avez beaucoup de possibilités potentielles en tant que codeur scientifique fou.

Désolé pour les références faibles mais ( W3 Schools)

Offre un assez bon aperçu de la différence en plus de termes simples.

En bref: nav (HTML5) est né comme complément double div afin de faciliter le codage visuel des balises et de le rendre plus reconnaissable, lisible et compréhensible pour les développeurs. BTW: div n'est pas déprécié en tant qu'étiquette dans html5 / et ne sera jamais IMO. span est un autre!

l'ancienne façon de créer un conteneur/boîte de navigation était -

<div id="navigate"><a href="whatever">link</a></div>
or
<div id="navigate" class="nav"><a href="whatever">link</a></div>

et les attributs, css et classes ont fait tout le travail.

mais dans le monde merveilleux de html 5 La Balise div a donné naissance au clone vl balise.

<nav> <a href="Home" class="xxx">my anchor/button/list of links with sprinkles</a></nav>

vl tag offre une indication plus spécifique (identification) de ce qu'il est utilisé pour " Navigation". Il s'agit simplement des éléments étant Non-sémantique (div) et sémantique (nav); et quant à copier et plagier les écoles w3 explication. ...

un élément sémantique décrit clairement son sens à la fois pour le navigateur et le développeur.

vl décrit clairement en code qu'il s'agit d'un bloc-étiquette/conteneur utilisé pour contenir les liens de navigation (contenu) avec les boutons ul-li, a/href... Nav ne reçoit ni ne poste rien car il s'agit simplement d'un vider la boîte de conteneur jusqu'à ce que vous mettiez votre code et des liens dedans. Même alors, nav ne fait rien, ses liens que faire le travail. Les attributs associés à la balise nav font les manipulations à la balise eg.."masquer ou afficher" il, dans ses positions.

Div (fracture) est "non sémantique" comme il ne décrit pas (tellement) sémantiquement ce qu'il est spécifiquement pour ou fait, autre que divise des zones dans le corps de la page.

Nav (navigation) se décrit comme étant réservé pour la navigation seulement de sorte qu'il est considéré sémantique.

enfin et sur le plan des relations, le html5 est en train de devenir la nouvelle norme, mais ce n'est pas le cas (à l'époque de l'après 2016-2017?) pris en charge par tous les nouveaux navigateurs car il doit encore être finalisé comme une version officielle. IE doit encore l'inclure dans leur nouvelle version (10 je crois). Mais son entrée!

mais parce que nav> est plus récent html 5 (seulement un peu supporté), nous devons toujours compter sur la balise div pour surround / encase

<nav>...</nav>

balise, et ses quelque peu vital. Nous devons donc toujours utiliser

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

future pour les navigateurs plus anciens parce que la balise nav n'est pas reconnue et sera ignorée par les navigateurs plus anciens, sinon le contenu pourrait simplement flotter ou pousser à l'extérieur de la zone de marge ou avoir d'autres effets secondaires néfastes. Alors que dans les navigateurs plus récents qui ne prennent en charge nav sera en sécurité. Avoir à la fois div et nav ne nuira pas à un ting ou changer l'apparence à un degré notable.

Dans bref et évidemment, nous ne pouvons pas exclure les versions antérieures des navigateurs qui prennent en charge les versions inférieures de html(3.x et 4.1) en faveur de HTML5, nous devons considérer tous les navigateurs et être rétro-compatibles.

il y a de nombreux utilisateurs qui ne peuvent pas utiliser les nouveaux navigateurs qui prennent en charge html5 en raison de systèmes D'exploitation plus anciens tels que windows xp. Alors gardez à l'esprit qu'il y a encore de nombreux utilisateurs qui sont forcés D'exécuter IE 6,7,8 crap qui ne reconnaîtra pas ou ne rendra pas le nouveau HTML5 nav et d'autres étiquettes. C'est si vous voulez atteindre tous les publics potentiels.

j'espère que cela offre un aperçu plus à la différence que je comprends la question et le but de div et nav.

4
répondu BobDCoder 2018-09-17 07:13:40