2016年10月10日 星期一

div與nav的差異

在寫自身網頁最上方橫幅產生的疑問,div元素跟nav是否能混用?如果不行的話那差異為?
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能放的

  1. 網頁最主要的頁面連結
  2. 網頁目錄
  3. 導覽路徑標示(Breadcrumbs)

如果在html5環境編寫,則應該使用在上述場合使用nav標籤,而div本身就沒有這些特殊意義,雖然使用div一樣也可以執行類似功能。

導覽路徑標示(Breadcrumbs):

讓訪客清楚自己身在哪一個層級/頁面,以及要如何回到上層/依循原路回訪的標示。
以下是關於Breadcrumbs的訊息

  • 放在網頁頂端

網頁導覽路徑標示放在網頁的頂端齊左,就像書本頁碼,導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移,就有可能和其他的導覽要素混淆。

  • 用>區分層級
經過trial and error顯示,最佳區隔符號是大於符號(>);雖然冒號(:)和斜撇(/)也都有人用,因為>符號本身就有方向在。
Flickr用斜撇(/)來區分層級。字體則是藍字與紅色。

  • 用較小字體


字體稍小,可以明確區分主從。


  • 貼上" You are here"

大部分的使用者都知道導覽路徑標示是什麼,貼上" You are here"更直接。

  • 最後一項字體加粗或變色

最後一項應該是所在網頁的網頁名稱,用粗體字,更明顯。
About.com是用黑體子標示You ar here:,用藍字顯示各層,以紅字標示現在所在。

  • 不要用導覽路徑標示來取代網頁名稱

有些網站會把最後一項字體放大,同時充當網頁名稱。這種設計不見得好用,因為使用者通常會期待網頁名稱直接出現在網頁的中央或齊左。

沒有留言:

張貼留言