ボタンにinputを使う場合と使わない場合がある？

質問

ボタンにinputを使う場合と使わない場合がありますが、見た目がボタンでも
下記に該当しないものはaを使えばいいでしょうか。

inputタグ（input要素）は送信ボタンやリセットボタン、テキストの入力欄、チェックボックスなどを表します。

下記サイトはpの中にaタグを使って表現していますが、セマンティックだと思いますか？
http://jfarm-tomato.com/

pはコンテンツの一部を示すタグですよね。
このサイトの詳細はこちらボタンなどもコンテンツの一部と考えらるのでしょうか？

回答No.2

tracer

セマンティックかどうかという観点で考えるならば、まったくセマンティックではないですね。

ご存知のように、webページは主に、html / css / javascript　で構成されます。
非セマンティックだった昔は、これらが複雑に絡み合い、いわゆるhtmlにcssもjavascriptも依存していたわけですが、現在は、それぞれがそれぞれを独立して書くことができます。つまり、それぞれの都合に振り回されずに書けるわけです。

たとえば、装飾のためだけに空divなどを置くケースがありますが、あれはまったくセマンティックじゃないですよね。つまり、cssの都合でhtmlが書かれているわけです。同様に、jsやサーバーの都合でhtml要素の種類が決まる、あるいは、本来必要のない要素が増えることがあるとするならば、それはセマンティックではありません。なぜなら、コンテンツの内容(文書構造)によってhtmlが決定されることをセマンティックと呼ぶからです。逆から言うならば、jsやcssあるいはサーバーは、文書構造とは一切関係がないのです。

ただ、セマンティックでないことがイコール悪ではないので、そのあたりは解釈が難しいところではあります。しかしながら、セマンティックを目指すならば、決して褒められる文法ではないですね。

回答No.1

kreikg

なぜ同じようなボタンなのに２種類の書き分けをしてるのかわからないということでいいんでしょうか？

例に出しておられるサイトでは「詳細はこちら」はaタグ、「カートに入れる」はinputタグを使っていますね。
「詳細はこちら」は別のページへのリンクなのでHTMLでリンクのために提供されているaタグを使っています。ボタンに見えますがCSSでボタン風にデザインされているだけでただのリンクです。
「カートに入れる」はこれをクリックするとサーバー側にあるPHPへデータを送信して処理するのでしょう。
これもHTMLでそのために提供されているformの機能を適切に使うためにinputタグを利用しているんだと思います。

わたしは基本的に次のようにしていますが、絶対そうでなければならないわけではありませんし例外も頻繁に発生します。
・ボタンの見た目だろうが別ページへのリンクはaタグ
・サーバーとやり取りが必要なフォーム関連はformとinputタグ
・その他(任意のJavaScript実行など)はbuttonタグ

ちなみにコンテンツの一部とかんがえられるのか？という質問は検索エンジンを意識しているのだと思いますがpタグの中ならコンテンツとして処理されるでしょう。どのタグがどういった重要度でとらえられるのか等の検索を有利に導く情報は検索エンジン側から公開されることはないはずです。（検索エンジンにヒットさせるために意図しないHTML記述をする人がいるのでそれを避けるため）

ご存知とは思いますがHTMLは文章の構造を定義するための言語です。
h1やp、articleなどのタグの役割どおりに文書の体裁が整っていれば検索エンジンに変な捉えられ方をすることはないでしょう。

お礼

ありがとうございました。

ただのリンクならa、JS、CSSアニメーション（サーバとやり取りしないもの）のフックならbuttonタグということですかね？