<button>タグは必要か？

Question

HTMLの構造でアドバイスを頂きたいです。

このようなタブメニューを考えているのですが、

<ul class="menu">
 <li data-menu="one">メニュー１</li>
 <li data-menu="two">メニュー２</li>
</ul>

メニューなら下記のように<button>はあった方がいいでしょうか？

<ul class="menu">
 <li><button type="button" data-menu="one">メニュー１</button</li>
 <li><button type="button" data-menu="two">メニュー２</button</li>
</ul>

前者のように<button>なしで普通に<li>にクリックイベントを持たせる次の書き方はやめた方がいいでしょうか？

$( document ).on( 'click' , 'ul.menu > li' , function() {
  var menu = $( this ).attr( 'data-menu' );
  $( '.contents' ).css( 'display', 'none' ); 
  $( '.contents[data-menu=" '+menu+' "]' ).css( 'display', 'block' ); 
})

Answer 1

KojiDoi と同意見です。

HTML5 的な正しさを求めて button の有無に悩んでいると思いますが、
自分が表現したい構造が正しく表現されている事が HTML 構文としては正解なので、ボタンでない認識なら button は省略して問題ないです。

そういう意味で言うと、ただのリストアイテムでもない は、リストであるもののコンテンツの表示/非表示を切り替えるナビとしての役割があるという認識だと思うので、ul を nav で括る事で button を省いた後ろめたさは消えるかもしれません。

<nav>
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
</ul>
</nav>

Comments

[theearth]

>リストであるもののコンテンツの表示/非表示を切り替えるナビとしての役割
なるほど！見事な解決策です。ありがとうございます。
teratailのプロフィールメニューもbuttonなしなので、なしでいこうと思います。

Answer 2

WAI-ARIA Authoring Practices の例にタブがあります。
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

ルールではないので必ずしもこの通りに作る必要はありませんが、指針にはなるのではないでしょうか？

Comments

[theearth]

なるほど、buttonは付けつつ、role="tab"を書くんですね。指針として大変参考になりました。ありがとうございます。

Answer 3

ボタンでもただのリストアイテムでもなく、

という認識であるならば、buttonタグを追加する理由がないと思います。

Comments

[theearth]

タブメニューはどちらでもないですよね？どう思いますか？
ボタンではないでしょうし、リストアイテムというと
・記事１
・記事２
のようなリストをイメージするので、タブメニューの
・メニュー１
・メニュー２
とは違う印象を持っています。
メニューはリストアイテムではない印象？です。
もちろん主観的な印象なので、一般論ではどうかと気になっています。
「>という認識であるならば」という素人の認識はさておき、R総合1位さんとしてはどう思いますか？

Answer 4

ちょっと質問の意図がいまいち掴み切れていないですが、それがボタンなのであれば <button> タグを付けたらいいし、ただのList Itemなのであればつけなければいいのではないでしょうか。

文書全体の中で「この箇所にはこういう意味があるよ」というマーキング (=タグ付け) をするのがHyperText Markup Languageの考え方なので、どういう意味を持たせたいかによって変わってくると思います。ご提示のコードだけではあなたがどういった意味をもたせようとしているのか類推できませんので、この回答が精一杯です。

Comments

[theearth]

ボタンでもただのリストアイテムでもなく、タブメニューなんですが、どう思いますか？
すみません、文章だけでなくコードのクラスに.tabmenuとか書いてあったほうが分かりやすかったですね。

[thyda.eiqau]

それがボタンでないのなら、 <button> タグは不適です。
https://html.spec.whatwg.org/#the-button-element

各コンテンツへの導線 (メニューリンク) であるならば、nav > ul > liとなるようにするか、ul > li > aとするか、その複合でnav > ul > li > aとするパターンが多いのではないかと思います

https://html.spec.whatwg.org/#the-button-element

[theearth]

ベストアンサーの方もnav派でした。思いつかなかったのでそうさせて頂こうかと思います。リンク先ありがとうございます。