【HTML】aタグの位置を考える。「h1>a」と「a>h1」の違いとベストプラクティス

h1 内に a タグを配置するか、 a タグ内に h1 を配置するか？

h1 > aの場合は文字の部分だけに対して、 a > h1の場合はインライン全てがクリック範囲となります。

h1 > aがわかりやすく、かつ要素の重要度的にもいいと思っています。がHTML5的にはどちらも有効

基本的には h1 > a のほうが良さそう。

HTML5 タグ

mainタグ：主要なコンテンツを表す | HTMLリファレンス

  • サイト全体で固有のコンテンツに対して使用する

    • 逆にサイト内のどのページでも共通して見られるもの（サイトのロゴ、ナビゲーションリンク、検索フォーム、コピーライト情報などが当てはまることが多い）は<main>に含めるべきではありません。

  • mainタグを1ページで複数回使ってはいけない

articleタグ：完結したコンテンツであることを表す | HTMLリファレンス

見出しにより内容を示す

<article>
  <h1>美味しい珈琲とは</h1>
  <p>豆が何より重要です。...</p>
</article>

1ページの中で複数回使ってもOK

<!--1つめの記事-->
<article>
  <header>
    <h1>美味しい珈琲とは</h1>
    <p><time>2019/12/25</time></p>
  </header>
  <p>豆が何より重要です。...</p>
</article>
<!--2つめの記事-->
<article>
  <header>
    <h1>カフェ巡りの旅</h1>
    <p><time>2019/12/22</time></p>
  </header>
  <p>美味しいコーヒーを探して…</p>
</article>

headerタグ：導入的なコンテンツをまとめる | HTMLリファレンス

  • 複数回使用できる
  • 見出しを含むことが多い
  • 装飾を目的として使わない

footerタグ：フッターを表す | HTMLリファレンス

  • footer内の連絡先情報にはadderssタグを
  • 装飾を目的として使わない

kbdタグ：キーボードなどの入力を表す | HTMLリファレンス

HTMLの<kbd>キーボードタグは、ユーザーによる入力（キーボード入力や音声入力など）を表します。kbdは「keyboard」の略です。

<section>: 汎用セクション要素 - HTML: HyperText Markup Language | MDN

HTML の <section> 要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

  • この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ (例えば、ブログ投稿やブログのコメント、新聞記事など) を表す場合は、 <article> 要素を使用したほうがいいでしょう。
  • 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合 (関連リンクや著者の経歴など) は、 <aside> を使用してください。
  • 内容が文書のメインコンテンツを表す場合は、 <main> を使用してください。
  • スタイル付けのためのラッパーとしてのみ使用する場合は、 <div> を使用してください。大まかに言うと、 <section> は文書のアウトラインの中に論理的に現れるべきです。

繰り返しになりますが、それぞれの <section> はできるだけ、特に見出し (<h1>-<h6> 要素) を <section> の子要素に含めて識別できるようにするべきです。