height属性(ハイトアトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説

height属性は、HTML要素の高さを指定するための属性である。主に、画像を表示する<img>タグや動画を埋め込む<video>タグ、外部のウェブページを埋め込む<iframe>タグなど、それ自体が固有の寸法を持つ要素に対して使用される。この属性の主な目的は、ウェブページがブラウザによって描画される際に、対象となる要素が表示される領域をあらかじめ確保することにある。値は単位を付けない整数で指定し、これはCSSピクセルとして解釈される。例えば、<img src="image.jpg" width="600" height="400">と記述した場合、その画像は幅600ピクセル、高さ400ピクセルの領域を確保するようブラウザに指示される。現代のウェブ開発において、height属性は見た目を直接的に制御するというよりも、ページの表示パフォーマンスとユーザー体験を向上させるための重要な役割を担っている。

height属性の最も重要な役割は、レイアウトシフトを防ぐことである。レイアウトシフトとは、ウェブページの読み込み中に、後から読み込まれたコンテンツによって既存のコンテンツの位置がずれてしまう現象を指す。特に画像や動画のようなファイルサイズの大きいメディア要素は、テキストなどの他のコンテンツよりも読み込みに時間がかかることが多い。もし<img>タグにheight属性とwidth属性が指定されていない場合、ブラウザは画像が読み込まれるまでその要素がどれくらいの大きさなのかを判断できない。そのため、最初は高さゼロの領域として扱い、後から画像データがダウンロードされ、寸法が判明した時点で初めて、その画像の高さ分のスペースを確保しようとする。このとき、画像の後に続くテキストやボタンなどの要素が一斉に下方向へ押し下げられ、ページ全体のレイアウトがガクッと動いてしまう。ユーザーが読んでいるテキストの位置が変わったり、クリックしようとしたボタンがずれたりするため、これは非常に悪いユーザー体験につながる。Googleが提唱するウェブサイトの健全性を示す指標「Core Web Vitals」の一つであるCLS（Cumulative Layout Shift）は、このレイアウトシフトの発生度合いを数値化するものであり、検索順位にも影響を与える重要な要素とされている。height属性とwidth属性をあらかじめHTMLに記述しておくことで、ブラウザは画像データを読み込む前から、その画像が表示されるべき領域のアスペクト比（縦横比）を計算し、適切なスペースを確保することができる。これにより、画像の読み込みが完了しても後続のコンテンツがずれることがなくなり、レイアウトシフトを効果的に防止できる。

height属性は、CSSのheightプロパティとしばしば混同されるが、その役割と特性には明確な違いがある。HTMLのheight属性は、前述の通り、ブラウザの初期レンダリング段階で領域を確保することが主目的である。一方、CSSのheightプロパティは、ページの視覚的なデザイン、つまりスタイリングを担う。CSSでは、ピクセル（px）だけでなく、パーセンテージ（%）、親要素のフォントサイズに対する相対的な単位（em, rem）、ビューポートの高さに対する相対的な単位（vh）など、より多様な単位を使用して高さを指定できる。また、max-heightやmin-heightといったプロパティを併用することで、柔軟なレイアウト制御が可能になる。優先順位の観点では、CSSによる指定はHTML属性による指定よりも強く、後から上書きすることができる。現代のウェブ開発における一般的なベストプラクティスは、まずHTMLの<img>タグなどにwidth属性とheight属性で元画像の寸法を指定し、レイアウトシフトを防ぐためのアスペクト比をブラウザに伝える。その上で、レスポンシブデザインに対応させるために、CSSでimg { max-width: 100%; height: auto; }のようにスタイルを適用する。このCSSが適用されると、画像の幅は親要素の幅を超えないように調整され、高さはHTML属性で定義されたアスペクト比を維持するように自動的に計算される。このように、HTML属性は初期の構造的な情報を提供し、CSSは最終的な見た目を調整するという役割分担がなされている。

かつて、HTML4の時代には、<table>タグのセル（<td>）の高さを調整するためにもheight属性が使われていたが、レイアウトに関する指定はCSSで行うべきという考え方の下、これらの用途では非推奨となり、HTML5では正式に廃止された。しかし、<img>や<video>といったメディア要素においては、レイアウトシフト防止という明確かつ重要な目的のために、その価値が再認識され、引き続き標準的な仕様として利用が強く推奨されている。システムエンジニアやウェブ開発者を目指す者にとって、height属性は単なる高さ指定の手段ではなく、ウェブページのパフォーマンスとユーザー体験を最適化するための基礎的な技術であることを理解しておくことが不可欠である。