google後得到答案如下。
解答來源:
http://stackoverflow.com/questions/18628097/whats-the-difference-between-using-nav-and-div-around-bootstrap-3-navbars
Q:In examples for the latest Bootstrap 3 navbars, I found various examples on the web where the outer navbar markup is
<div class="navbar navbar-default navbar-static-top">...</div>
and other examples are using
<nav class="navbar navbar-default" role="navigation">...</nav>
All the examples perform OK, and the documentation calls for NAV. Which leaves me wondering if a lot of examples on the web are version 2 leftovers that were not rewritten for version 3, or it is OK to use either surrounding markup.
A:
<nav> is the semantic HTML5 container element for you main navigation elements.
The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links.
from http://learn.shayhowe.com/html-css/elements-semantics
If you are using HTML5 then you should use nav.
-----------------------------------------------------------------------------------------------
nav是用來描述主要頁面導覽的html5區塊元素,並非所有連結都能放在nav中。
nav能放的:
如果在html5環境編寫,則應該使用在上述場合使用nav標籤,而div本身就沒有這些特殊意義,雖然使用div一樣也可以執行類似功能。
導覽路徑標示(Breadcrumbs):
讓訪客清楚自己身在哪一個層級/頁面,以及要如何回到上層/依循原路回訪的標示。
以下是關於Breadcrumbs的訊息
網頁導覽路徑標示放在網頁的頂端齊左,就像書本頁碼,導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移,就有可能和其他的導覽要素混淆。
Flickr用斜撇(/)來區分層級。字體則是藍字與紅色。
字體稍小,可以明確區分主從。
大部分的使用者都知道導覽路徑標示是什麼,貼上" You are here"更直接。
最後一項應該是所在網頁的網頁名稱,用粗體字,更明顯。
About.com是用黑體子標示You ar here:,用藍字顯示各層,以紅字標示現在所在。
有些網站會把最後一項字體放大,同時充當網頁名稱。這種設計不見得好用,因為使用者通常會期待網頁名稱直接出現在網頁的中央或齊左。
- 網頁最主要的頁面連結
- 網頁目錄
- 導覽路徑標示(Breadcrumbs)
如果在html5環境編寫,則應該使用在上述場合使用nav標籤,而div本身就沒有這些特殊意義,雖然使用div一樣也可以執行類似功能。
導覽路徑標示(Breadcrumbs):
讓訪客清楚自己身在哪一個層級/頁面,以及要如何回到上層/依循原路回訪的標示。
以下是關於Breadcrumbs的訊息
- 放在網頁頂端
網頁導覽路徑標示放在網頁的頂端齊左,就像書本頁碼,導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移,就有可能和其他的導覽要素混淆。
- 用>區分層級
Flickr用斜撇(/)來區分層級。字體則是藍字與紅色。
- 用較小字體
字體稍小,可以明確區分主從。
- 貼上" You are here"
大部分的使用者都知道導覽路徑標示是什麼,貼上" You are here"更直接。
- 最後一項字體加粗或變色
最後一項應該是所在網頁的網頁名稱,用粗體字,更明顯。
About.com是用黑體子標示You ar here:,用藍字顯示各層,以紅字標示現在所在。
- 不要用導覽路徑標示來取代網頁名稱
有些網站會把最後一項字體放大,同時充當網頁名稱。這種設計不見得好用,因為使用者通常會期待網頁名稱直接出現在網頁的中央或齊左。
沒有留言:
張貼留言