ヘッダーについての質問が２つあります。

Question

前提・実現したいこと

宜しくお願いします。

ヘッダーについて質問です
以下2点の意図を理解したいです。

1. ヘッダーにロゴを挿入する際にh1タグでaタグ、imgタグを囲むという模写サイトをよく見受けられます。

このh1で囲む理由は何でしょうか？
私自身は画像が正しく表示されない際にimgタグのalt属性の文字（ロゴマーク）をh1で見出し表示していると解釈しているのですが、こちらの理解で合っていますでしょうか？

1. 下記のヘッダーの中のaタグにline-height: 1px;が記述されているのですが

何のための記述でしょうか？

以上となります。宜しくおねがいします。

こちらのサイトでの質問をしたことが無いので
質問の仕方に不備やわかりにくい部分がありましたらおしゃってください。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<h1 class="site-title">
   <a href="index.html">
      <img src="img/logo.svg" alt="ロゴマーク">
   </a>
</h1>

.site-title a {
    width: 180px;
    line-height: 1px;
    display: block;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こんにちは。

このh1で囲む理由は何でしょうか？

意味論的な話です。

たとえば、 <h1> 要素はセマンティック要素で、「ページの最上位の見出し」の役割 (または意味) をまとったテキストを提供します。

Semantics (セマンティクス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

ですので、そのロゴが「ページの最上位の見出し」の役割を持っているならそうすべきでしょうし、そうでないのであればそうすべきではないでしょう。

---

__下記のヘッダーの中のaタグにline-height: 1px;が記述されているのですが

何のための記述でしょうか？__

見た目が違います。

サンプル

個人的にはこれはバッドノウハウだと思いますが、どのような影響があるのか理解して採用するならば、それはそれでいいと思います。

コメントを受けて追記

__これは、aタグには元々の高さが設定されていないため

１ｐｘの高さを付けてｈ１要素と高さを揃えているのでしょうか？__

説明が難しいです。
私見ですが、これについては無理に理解しようとせず、とりあえず以下だけを覚えておくことをお勧めします。

「インライン要素は地雷なので、とにかく使用を避ける」

ですので、個人的にはline-height: 1pxはバッドノウハウで、display: blockを用いるべきだと思っています。

---

どうしても理解したいのであれば、以下をお読みください。

---

画像は特に何も指定しなければ、文字のようなものとして扱われます。
画像1枚がとても大きな文字1文字、と理解していただければ、それほど外さないと思います。

ところで、アルファベットには下にはみ出す文字があることをご存じかと思います。このはみ出している部分をディセンダーと呼び、ディセンダーを分けるラインをベースラインと呼びます。
ディセンダー - Wikipedia

文字領域にはこのディセンダーが含まれており、たいていの日本語の文字にはディセンダー領域にグリフが存在しないため、たいていの文字は下に余白があります。

ところで、さきほど「画像は文字のようなもの」と書きましたが、画像にもベースラインがあるのだろうか？という疑問が出てきますよね。
これは、画像のマージン領域下端と決められています。マージンがない場合は、画像の下端です。

さて、vertical-alignというプロパティはご存じでしょうか？
これはインラインの垂直そろえをするものなのですが、何も指定しなければvertical-align: baselineとなります。
これは、行の中の文字はベースラインでそろえる、というものです。

これで、下に隙間ができる理由が分かったかと思います。
画像のベースラインはマージンがなければ画像の下端ですが、行のベースラインはディセンダー部分の余白の上にあり、そこに揃えられることになるのです。つまり、画像はディセンダー部分の余白の上に置かれます。

さて、line-height: 1pxの効果について、これでお分かりかと思います。
つまり、行の高さをつぶすことによって強制的にディセンダー部分の余白もつぶしているのです。

Comments

[minipla]

Lさん回答ありがとうございます。

ｈ要素の役割が理解できました。ｈ要素にはテキスト部分しか対応しないと勝手に認識していました。

line-heightの件も見た目で確認取れました。
これは、aタグには元々の高さが設定されていないため
１ｐｘの高さを付けてｈ１要素と高さを揃えているのでしょうか？

[Lhankor_Mhy]

回答に追記しました。

>Lさん

いきなり愛称呼びって感じ悪いっすね。
俺らそんなに仲良かったでしたっけ、みーちゃん？