HTML 要素リファレンス

HTML 要素は単なるタグではなく、意味を持つ構造上の基本単位です。各要素には、レイアウトやアクセシビリティに影響するコンテンツモデルの規則、使用可能な属性、ブラウザーの動作があります。

<link> #

<link> は URL によって外部リソースを参照します。最も重要な属性は次のとおりです。

• リレーションを示す rel;
• リソースを指す href。

スタイルシートや preconnect ヒントには、次のような用途があります。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="/styles.css">

rel の値は多くの用途に使われるため、動作が不明確な場合は IANA link-relations レジストリと照合して確認する必要があります。

<meta> #

<meta> は、文字エンコーディング、ビューポート設定、ページの説明などのメタデータを提供します。通常はドキュメントの head 内に配置され、ブラウザー、クローラー、ソーシャル共有システムなどによって利用されます。

<noscript> #

<noscript> は、JavaScript が無効化されているか、サポートされていない環境向けのフォールバックコンテンツを格納します。

次の用途に適しています。

• プログレッシブエンハンスメント;
• テーマのブートストラップに関するヒント;
• スクリプト依存機能に対する警告メッセージ。

<p> #

<p> 要素は入れ子にできません。ある段落の内部に別の段落を書くと、ブラウザーは外側の段落を暗黙的に閉じます。

この動作が重要なのは、手書きの HTML が正しく見えても、テンプレートエンジンが誤って無効な入れ子構造を出力する可能性があるためです。

<p>
  First paragraph.
  <p>Second paragraph.</p>
</p>

ブラウザーはこのマークアップを、別々の兄弟段落に書き換えます。

レイアウトと意味論 #

要素は相互に置き換え可能ではありません。

• 構造要素はドキュメント階層を定義します。
• フレージング要素はインラインコンテンツを定義します。
• 画像や canvas などの置換要素には、ホストによって定義されたレンダリング動作があります。

テンプレートからページを構築する場合、要素の選択はスタイリングとアクセシビリティの両方に影響します。意味的に正しい要素を使うと、後から必要になる CSS の量を減らせることが多くなります。

実践的なルール #

要素を契約として扱います。

1. 許可されているコンテンツモデルを確認する。
2. 必須または意味のある属性を確認する。
3. 無効なマークアップをブラウザーがどのように修復するか確認する。

この習慣により、多くのレイアウトバグがページに到達する前に防げます。