nav 要包在 header 裡?

  • UI 設計
  • 更新:2025-01-26
  • 初版:2015-01-07

Html5 有很多新元素,最常用到的就是 nav、header、footer 這三個。不過對於 nav 該放在 header 裡、還是在 header 外,就我學習到、和老公教的是「看情況」。

以下內容折錄 HTML5+CSS3 网页设计入门必读 ,就是之前寫過 讀後感:HTML5+CSS3 網頁設計入門必讀 中,講 HTML5 的那本。作者是 JEREMY KEITH,國際知名的Web設計師,Web標準項目組成員,看來書籍內容不會有誤。

header 元素

html5 將 header 描述為「一組介紹性或導航性輔助工具」的容器。通常位於文件或章節的頂部,但這非必須。header 由內容定義,而非由位置定義。

如果被當成標題或報頭,則一個文檔可以有很多個 header,比如在 section 元素內使用 header。section 元素被定義為「一組專題內容,這些內容通常帶有一個標題」。

nav 元素

該元素包含導航信息,通常是一系列連結,用於最主要的導航信息。如果只是一組被集中在同個列表裡的連結並不足以使用 nav 。幾乎可以肯定的說:全網站導航應使用 nav 元素。

考慮到 header 元素包含「導覽輔助」,nav 出現在 header 內在此情形下是合理的。

結論

既然 JEREMY KEITH 都說 nav 出現在 header 內是合理的,當然可以放在 header 內,前提是「導覽輔助」,簡稱視情況而定,且 nav 放在 header 外是預設用法。(不然他哪需要特別補這一句說明放在 header 內的情況。)

我個人覺得 nav 還是放在 header 外吧,nav 是「全站型導覽」,header 是「導航性輔助工具」。要把主要的區塊塞進輔助區裡是件很奇怪的事。而且將 header 當成內容標題在使用時,nav 還放在 header 裡更詭異。

支持 nav 放在 header 外。(  ̄ 3 ̄)y▂ξ

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
讀後感:HTML5+CSS3 網頁設計入門必讀

A Book Apart, Brief books for people who make websites. 這個網站專出一些很薄、放包包通勤閱讀很方便的技術書籍,這次要介紹的是 HTML5 FOR WEB DESIGNERSCSS3 FOR WEB DESIGNERS 的簡中版本,人民郵電出版社出版。

這種網頁設計越來越受歡營!Bento Design 有什麼魔力?
這種網頁設計越來越受歡營!Bento Design 有什麼魔力?

「Bento」怎麼唸?扁東?對,就是日語「便當」。
但這跟網頁設計有什麼關係?
其實,Bento Design 就像便當一樣,把資訊分格擺放,整齊又有條理!

設計和 F2E 的切圖與切版

收到讀者來信,這位讀者是 F2E,發現設計師的切圖和 F2E 的切版似乎不太一樣,所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明,其實還滿想回他一句「多被RD罵幾次就會了啊」…orz

Fixed Grid System 詳解


我踩到一個沒把 Fixed Grid 學好的雷orz 特此拿出來筆記下。之前在 [Grid 的運用:PS外掛] (/posts/194263-application-of-grid/) 一文中有簡單提到 Grid 的運用,但講得不夠清楚,後來活用時遇到個問題:如果你的網頁有側邊欄的時候,要怎麼設計才符合 Grid?

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close