inputタグ、buttonタグでの画面遷移の記述について

aタグ以外での画面遷移について

HTMLでの任意のページに画面遷移する際に一番最初に思いつくのはaタグですが、aタグでは表示がボタンではないため、見た目的にすこしアレな気がします。
そこで、aタグ以外のものをつかって任意のページに画面遷移できる方法がないか調べたところ、いくつかあったので記載していきます。

  <!-- index.htmlへ遷移 -->
  <!-- 任意のページに画面遷移するやり方で一番オーソドックスな方法 -->
  <a href="./index.html">遷移</a>

inputタグでの画面遷移について

最初にinputタグについてです。
inputタグでは、要素に次のものを追加することで、任意のページへ画面遷移できます。

  <!-- 下記要素をinputタグの中に追記 ※○○○○○は任意のページ名 -->
  onclick="location:href='○○○○○.html'"

  <!-- index.htmlへ遷移 -->
  <!-- inputタグ全体としては下記のような感じ -->
  <input type="button" onclick="location.href='./index.html'" value="遷移">

直前のページに戻る場合はonclickの要素を下記のようにすればいいです。

  <!-- 直前のページに戻る -->
  <input type="button" onclick="history.back()" value="戻る">

buttonタグでの画面遷移について

次にbuttonタグについてです。
とはいっても、やり方はinputの時と同じでbuttonタグの要素にonclickを追加します。
onclick要素の中身も同じです。

  <!-- index.htmlへ遷移 -->
  <button onclick="location.href='./index.html'">遷移</button>

直前のページに戻る場合もinputと同様です。

  <!-- 直前のページに戻る -->
  <button onclick="history.back()">戻る</button>

この記事は、次のサイトを参考にさせていただきました。
ここに書いた記事以外にもいろいろとおもしろいことが書かれているので、見てみてください。
参考サイト様