Почему обычно создавать панели инструментов с тегами <UL>и <LI>?

Question

Я обнаружил, что довольно много «панелей инструментов» на веб-странице реализовано с тегами 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

Позволяя использовать рамку влево / вправо, это также позволяет избежать практики навязывания несемантических разделителей (например, вертикальных полос) в ваш код для целей презентации, что также добавляет ненужный контент для чтения с экрана. например,

<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>

Answer 4

Одна из причин, еще не упомянутых, заключается в том, что написание меню в виде списков помогает поисковым системам лучше анализировать ваш сайт. Поисковые системы верхнего уровня смогут вычислять вложенные элементы div и даже таблицы (в некоторых случаях), но всегда лучше упростить работу сканера, чтобы избежать возможной путаницы.

EDIT:

Ссылки по запросу:

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

На самом деле я не смог найти много статей, специально посвященных тегам ul для SEO, поэтому мне придется уточнять свой ответ, высказывая свое мнение.

Я считаю, что использование неупорядоченного списка для представления меню поможет сканерам правильно проанализировать и проиндексировать ваш сайт. Как правило, хорошо организованные данные (такие как список) позволяют лучше и быстрее сканировать. Правильная организация ваших данных значительно повысит вероятность того, что бот правильно найдет ваши ключевые слова и повысит рейтинг вашего сайта.

(Теперь, если бы только мое мнение на эту тему было таким же ценным, как мнение Ларри Пейджа. ;-))

Answer 5

Вероятно потому, что тот, кто верит в веб-стандарты, является единственным верным способом обозначить их как таковые. Ведь на панели инструментов есть список значков!

Но мой личный подход к разметке заключается в том, что когда вы создаете веб-приложение, которое включает в себя некоторый элемент пользовательского интерфейса приложения, например панель инструментов, вам не обязательно создавать все в соответствии с веб-стандартами HTML, поскольку они не были созданы разметка приложений, но для документов. В этом случае просто используйте то, что вам больше подходит (например, div со списком диапазонов, используя имена классов для определения контекстной семантики для вашего приложения).

Примечание. Мой ответ относится именно к использованию панелей инструментов, а не к обычной навигации по веб-сайтам.

Answer 6

Одна из возможных причин - у них разумное резервное поведение одного низкосортного клиента - то есть оно становится деревом. Но в действительности <ul> и <li> действительно просто описывают данные вложенного списка; с помощью CSS, управляющего макетом, их первоначальное намерение, в основном, просто удобство.