28

最新の Bootstrap 3 navbars の例では、外側の navbar マークアップが Web でさまざまな例を見つけました。

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

他の例が使用しています

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

すべての例は正常に実行され、ドキュメントでは NAV が必要です。Web 上の多くの例は、バージョン 3 用に書き直されていないバージョン 2 の残り物なのか、それとも周囲のマークアップを使用しても問題ないのか疑問に思います。

4

4 に答える 4

19

「 div」を考えると、何も含まれていないブロック要素であり、空白であり、あらゆる種類のhtml- #Xコードグッズで満たされる準備ができている空のボックスです。

Nav」要素はほぼ同じですが、特定の html5 コード セットを処理するためのブロックとして予約されています。したがって、ナビゲーション リンク用に予約されています (破られる可能性のあるルールの実践において)。それでも、いわばどちらのタグでも同じことができます。ほとんどの場合、両方のボックスを制御および操作する CSS 属性とクラスです。

(破られる可能性のあるルールの実践において) Web ページ全体ですべての div を nav に置き換えることもでき、ブラウザーが nav をサポートしている場合は同じようにレンダリングされます。しかし、それはコーダー、あなた、そして他の人々を混乱させるだけです。

nav over div を規制、制限、または抑圧する特定のディレクティブがあるかどうかはわかりませんが、それらはすべての観点でほぼ同じタグ、空のボックス コンテナーのようです。

navdivはどちらもGlobal属性とEvent 属性をサポートしているため、違いはありません。しかし!nav と div はどちらもグローバル ボックス (コンテナー) であるため、マッド サイエンティスト コーダーとして多くの可能性を秘めています。

弱い参照で申し訳ありませんが ( W3 Schools )

より素人の言葉での違いに対するかなり良い洞察を提供します.

要するに、nav(html5)は、視覚的なタグのコーディングを容易にし、開発者にとってより認識しやすく、読みやすく、理解しやすいものにするために、divを補完するツインとして誕生しました。ところで: div は html5 のタグとして減価償却されず、 IMO になることはありません。スパンは別です!

ナビゲーション コンテナ/ボックスを作成する古い方法は -

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

属性、css、およびクラスがすべての作業を行いました。

しかし、html 5 のすばらしい世界では、div タグがクローンnavタグを生み出しました。

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

navタグは、 「ナビゲーション」に使用されるものをより具体的に示す (識別) ものです。それは単に、要素が非セマンティック (div)およびセマンティック (nav)であるという問題です。そして、w3学校の説明をコピーして盗用することについて....

セマンティック要素は、ブラウザーと開発者の両方にとってその意味を明確に説明します。

navは、ul-li、a/href、ボタンのいずれかでナビゲーション リンク (コンテンツ) を保持するために使用されるブロック タグ/コンテナーであることをコードで明確に説明しています... Nav は単に空のボックスであるため、何も取得または投稿しません。コードとリンクを配置するまで、コンテナに保存します。それでも nav は何もしません。作業を行うのはリンクです。nav タグに関連付けられた属性は、その位置でタグを「非表示または表示」するなどの操作を行います。

div (divide) は、ページの本文内の領域を分割する以外に、特に目的や機能を意味的に説明していないため、「非セマンティック」です。

Nav (ナビゲーション)は、ナビゲーション専用に設定されていると説明しているため、セマンティックと見なされます。

最後に、関係の補足として、html5 は新しい標準として人気を博していますが、(元の投稿 2016-17 の時点で) すべての新しいブラウザーでサポートされていないため、公式リリースとしてまだ確定されていません。 . IE は、新しいリリース (10 だと思います) にはまだそれを含めていません。しかし、それは来ています!

しかし、nav> は新しい html 5 であるため (ある程度しかサポートされていません)、まだ div タグに依存して、

<nav>...</nav>

タグ、そしてそのやや重要です。したがって、まだ使用する必要があります

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

nav タグが認識されず、古いブラウザーでは無視されるため、古いブラウザーの将来への道です。そうしないと、コンテンツが浮いたり、マージン ボックスの外に押し出されたり、その他の悪影響が生じる可能性があります。nav をサポートする新しいブラウザでは安全です。div と nav の両方を使用しても、音に悪影響を与えたり、外観を著しく変更したりすることはありません。

要するに、明らかに、HTML5 を優先して下位バージョンの html (3.x および 4.1) をサポートする以前のバージョンのブラウザーを除外することはできません。すべてのブラウザーを考慮し、後方互換性を持たせる必要があります。

Windows XP などの古い OS のため、html5 をサポートする新しいブラウザーを使用できないユーザーが多数います。そのため、新しい html5 nav やその他のタグを認識またはレンダリングしない IE 6、7、8 のがらくたを実行することを余儀なくされているユーザーがまだたくさんいることに注意してください。それは、潜在的なすべてのオーディエンスにリーチしたい場合です。

divとnavの質問と目的を理解するにつれて、これが違いに対する洞察をさらに提供してくれることを願っています。

于 2016-10-27T07:06:59.077 に答える