Разрешает ли HTML размещение кнопок внутри раздела навигации?

Question

Спецификация говорит следующее об элементе <nav> (выделено мной):

Элемент nav представляет раздел страницы, который ссылается на другие страницы или на части внутри страницы: раздел с навигацией links .

Никогда конкретно не говорится, что <button> не разрешено, и нигде не говорится, что для навигации должны использоваться только элементы <a> (однако в нем упоминаются "ссылки"), но все примеры кажутся связанными списки. один пример (11) , который не является списком, по-прежнему содержит только элементы привязки для навигации внутри.

Следующий пример (12) показывает пример навигации по приложению, но снова использует привязки.

Итак, разрешены ли внутри кнопки элементы <nav>?

Answer 1

В HTML 5.2, раздел 4.8. - это примерно ссылки :

Ссылки - это концептуальная конструкция, созданная элементами a, area и link, которые представляют связь между двумя ресурсами […]

Как и следовало ожидать, определения a («гиперссылка»), area («гиперссылка») и link ("ссылка (и)" и т. Д.), Все ссылаются на ссылки, а определения button и input не.

Итак:

• A nav должен содержать элементы с атрибутом href (a / area / link). В противном случае было бы неоправданно использовать nav во-первых (за исключением исключений).

• Элемент nav также может содержать кнопки. Например, кнопка, которая используется для переключения между отображением всех уровней навигации и отображением только верхнего уровня. (Однако, если кнопки используются для навигации, они все равно должны быть ссылками, а не кнопками.)

Answer 2

Стандарты HTML5 разрешают любой вид содержимого потока внутри тегов <nav> и <button> считаются содержимым потока, но вам следует избегать их по семантическим причинам. Кнопки, основанные на <button>, являются элементами пользовательского интерфейса, которые управляются исключительно javascript (или в некоторых хитрых сценариях из-за поведения браузера по умолчанию при использовании форм) без какой-либо функциональности или семантической ссылки на стороннюю ссылку. Поэтому использование тегов <button> внутри тегов <nav> не имеет смысла для клиентов / роботов, которые работают без учета JavaScript.

Современные UI-фреймворки, такие как Bootstrap, Semantic-UI или другие, предоставляют возможность реализовывать кнопки несколькими способами (как теги <button>, так и теги <a>). Принимая во внимание такие способности, вы должны предпочесть использовать кнопки на основе <a> -tag по причинам семантики.

Answer 3

Зависит от того, как вы определяете «разрешено».

Это действительный HTML, но вы можете узнать о доступности и разнице между кнопкой (которая должна сигнализировать о кликабельных действиях) и ссылкой (которая должна где-то перемещаться).

http://web -accessibility.carnegiemuseums.org / содержание / кнопки /