こんにちは！岡崎です！
今回は実務などで使用するwebアプリ開発者が知るべき最低限のHTMLタグを紹介していきたいと思います！

注意書き

• 記事の内容は記載当時であることに注意してください．
• フロントエンドエンジニアである場合はdetailsタグやdialogタグ, articleタグなどのタグを理解し，セマンティックWEBを心掛けるべきですので，記事で触れるタグはもちろんですがそれ以外のタグについて知っておく必要があると筆者は考えています．
• 本記事では，WAI-AREAなどについては触れないものとする

重要度（★★★）

h1 ~ h6タグ

見出しに使用します．
原則コンテンツ構造的に不自然にならないように使用しましょう．

h1
├ h2
└ h2
  ├ h3
  ├ h3
  └ h3

h1

ロゴやサービス名などに使われることとが多い．
ページのタイトルということでブログなどの大見出しにも使用されることがある．
※正解はないのでコーディングする人のこだわりや思想によって使用場所が異なります．

自分の思想

h1は原則ヘッダーなどに存在するロゴに使用しています．
ブログの記事ページなど，内容がタイトルとして表すことができる場合はブログのタイトルにも使用していたりします．
HTMLの使用では複数配置することは可能ですが，原則1ページに1つがベストプラクティスとされています．
スクリーンリーダーを使用するユーザーにとって大見出しが複数ある場合混乱を招いてしまう場合があるので事情がない場合は1つにしたほうが良いでしょう．

pタグ

文字を挿入する際に使用します．
段落を意味することが多いです．

aタグ

押下するとページ遷移するリンクを生成することができます．
href属性にURL，target属性を指定することによってタブに暗黙的な名称を付けたり新規タブで開くことができる．

<a href="https://" target="_blank">リンク</a>

aタグを使用するメリット

aタグを使用することでスクリーンリーダーを使用しているユーザーに遷移するリンクというのが伝えることができる．
Tabキーでフォーカスができ，Enterキーで遷移することができるためアクセシビリティを考慮した実装を自前でする必要がなくなる．

buttonタグ

押下すると動作するボタンを生成することができます．
ユーザーが押せるボタンは原則buttonタグで作成してください．（単純にアクセシビリティやユーザービリティが良くなり，ユーザー体験が向上します．）
※押せないボタンを実装する場合はdisable属性を付与するだけで実装するべきものが減る
特定の条件下でtypeを指定しなかった場合はsubmitが付与されたりするのでそれを避けるためにtype属性をつけるのを癖づけましょう．
reactのルールではtype属性を指定しないとエラーが出たりします．

<button type="button">ボタン</button>

aタグを使用せずに全てbuttonタグで実装しても良いのでは？

画面遷移をbuttonタグでしてしまうとスクリーンリーダーを使用しているユーザーは想像しづらくなってしまうため使用方法によってタグを考える必要があります．

imgタグ

画像を埋め込むことができるタグです．
src属性に画像のパス，alt属性には画像が見えない人でもわかる文字を挿入してください．
また，ただのアイコンの場合でもalt属性は空文字だけでも指定するようにしてください．

<img src="画像のパス" alt="画像を説明する文章" />

alt属性の使用上の注意

alt属性に文字を指定することで，画像が表示できなかった場合やスクリーンリーダーを使用した場合に画像の代わりに表示することができます．
空文字を指定することで画像に意味がないことを明示的に示すことができる．
また，スクリーンリーダーを使用した場合に読み上げを飛ばすことができる．

divタグ

レイアウトを取るために使用します．

spanタグ

文字列の中で特定の位置にスタイルを当てたい場合に使用します．

<p>〇〇を導入後、CVRが<span>30%向上</span>しました！</p>

重要度（★★）

formタグ

小要素にinputやtextareaなどの要素がある場合，submitすることでURL先に情報を送信する．
Enterキーで送信されたり，button[type=submit]を使用することでaction先にページリクエスト（リダイレクト）が行われる．
近年のwebアプリではrestful apiを用意しjsonを取得，フロントエンドに反映するパターンが多いため，その場合はeventを取得しpreventDefault()でデフォルトの挙動を無効化することが多いです．
※phpやrailsなどのviewファイルをHTML直書きしている場合を除きます

document.querySelector('form').addEventListener('submit', (event) => {
	event.preventDefault();
})

inputタグ

ユーザーが入力できる要素を生成します．
type属性をにinputの種類を指定することで数字だけのキーボードが出るようにしたりできます．
required属性を付与することで，入力がされていない場合のバリデーションをブラウザ単位でサポートすることができます．
placeholder属性に文字を入れることで入力前に薄く表示される文字を設定することができます．積極的に使用しましょう．

<input type="range" id="volume" name="volume" min="0" max="11" required />

textareaタグ

ユーザーが複数入力できる要素を生成します．
基本的にはinputタグと変わりありません．

重要度（★）

labelタグ

inputタグやtextareaタグ，selectタグなどの操作対象のタイトル?ラベル?に使用します．
pタグではなくlabelタグを使用することで文字をタップした場合のfocusの挙動が操作対象の要素に移るため，単純に使いやすくなり使用を推奨しています．

<label htmlfor="inputName">名前：</label>
<input id="inputName" />

brタグ

改行することができます．

初めまして，<br />〇〇です．

セマンティックwebを意識する場合に知っておいたほうが良いタグ

セマンティックwebとは

Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」（メタデータ）を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。
セマンティックWebとは - 意味をわかりやすく - IT用語辞典 e-Words ( https://e-words.jp/w/セマンティックWeb.html )

e-Wordsさんから引用しました．
要は単にHTMLを書くだけではなく，意味付けを意識したコーディングを意識することでクローラーにも認識されやすいことからSEO的にも良く，スクリーンリーダーの読み上げが変わる場合があるのでアクセシビリティ的にもより良い実装をすることができます．

headerタグ, mainタグ, footerタグ

navタグ

ナビゲーションに使います．
例：ヘッダーのナビゲーションリンクやパンクズリストに使用します．

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

sectionタグ

文章の見出しと本文を囲うタグとして使用します．

detailsタグ

detailsタグはsummaryタグと合わせて使用します．
アコーディオンメニューを作成する際にjavascriptを使用し作成することが多いですが，javascriptで作成してしまうとスクリーンリーダーの挙動が実装頼りになってしまいますがdetailsタグを使用することで正しく読み上げが行われます．

まとめ

以上よく使う / 知っておいたほうが良いタグを紹介しました！
他にもarticleタグやfigureタグ，tableタグなどさまざまなタグがありますが必要に応じて調べて使用するくらいの認識で大丈夫だと思います！
また，フロントエンドエンジニアとして仕事をしていく場合は一度HTMLのタグ一覧を確認してみてもいいかもしれません！
読んでいただきありがとうございました！