為什么用標簽創建工具欄很常見<ul>和<li> ?</li></ul>

Question

我發現 web 頁面中的很多“工具欄”是用 HTML 標簽UL和LI實現的，樣式為“ float:left ”。

例如，在 FireBug 的幫助下，很容易在http://www.yahoo.com/中找到這種模式。

有什么理由嗎？ 我不認為 UL 和 LI 是為了創建工具欄而發明的。

Answer 1

HTML 旨在用於語義（事物的含義），而不是呈現（它們的樣子）。 由於<ul>表示無序列表，並且工具欄在概念上只是項目列表，因此這是明智的。 甚至 StackOverflow 也能做到！

<div class="nav">
  <ul>
    <li><a href="/questions">Questions</a></li>
    <li><a href="/tags">Tags</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/badges">Badges</a></li>
    <li><a href="/unanswered">Unanswered</a></li>
  </ul>
</div>  

Answer 2

UL和LI用於列表。 你列出了一堆鏈接（子導航、工具（？）等）

Answer 3

一個可能的原因 - 他們對低級客戶有合理的后備行為 - 即它變成了一棵樹。 但實際上<ul>和<li>真的只是描述嵌套列表數據； 用 css 控制布局，他們的初衷很大程度上只是為了方便。

Answer 4

可能是因為有人相信 web 標准是這樣標記它們的一種真實方式。 畢竟，工具欄是圖標列表！

但我個人的標記方法是，當您創建一個涉及一些應用程序 UI 元素（如工具欄）的 web 應用程序時，您不一定必須根據 HTML Z2567A5EC9705EB7AC2C984033E0618 標准創建所有內容，但對於文檔。 在這種情況下，只需使用最適合您的方式（例如帶有 span 列表的 div，使用類名來為您的應用程序指定上下文語義）。

注意：我的回答專門針對工具欄的使用，而不是網站中的常規導航。

Answer 5

尚未提及的一個原因是，將菜單編寫為列表有助於搜索引擎更好地解析您的網站。 頂級搜索引擎將能夠找出嵌套的 div 甚至表格（在某些情況下），但最好讓爬蟲的工作更容易避免可能的混淆。

編輯：

按要求鏈接：

http://blog.fryewiles.com/seo/03-04-2008/ul-titles-nesting-uls-for-better-seo http://importantseotips.blogspot.com/2008/09/why使用-div -is-better-than-table-seo.html http://webdev.entheosweb.com/2008/02/24/why-i-switched-to-a-tableless-design/

我實際上找不到很多專門針對 SEO 的 ul 標簽的文章，所以我必須通過聲明我的意見來限定我的答案。

我認為使用無序列表來顯示菜單將有助於爬蟲正確解析和索引您的網站。 通常，組織良好的數據（例如列表）有助於更好和更快的可抓取性。 組織好您的數據將顯着提高機器人正確找到您的關鍵字並對您的網站進行排名的可能性。

（現在，如果我對這個主題的看法和拉里佩奇的一樣有價值。;-)）

Answer 6

通過允許使用左/右邊框，它還避免了在代碼中強制使用無語義分隔符（例如豎線）以進行演示的做法，這也為屏幕閱讀器添加了不必要的內容來讀取。 例如

<div class="nav">
    <a href="/questions">Questions</a> |
    <a href="/tags">Tags</a> |
    <a href="/users">Users</a> |
    <a href="/badges">Badges</a> |
    <a href="/unanswered">Unanswered</a>
</div>