HTML Living Standard/メタデータ・コンテンツ

メタデータ・コンテンツ

メタデータ・コンテンツは、HTML文書に関する情報を記述するための要素群で構成されています。この情報は、文書のタイトル、スタイル、スクリプト、外部リソースのリンクなど、Webブラウザや検索エンジンなどのユーザーエージェントが文書を正しく解釈・処理するために重要です。

構成要素

メタデータ・コンテンツに含まれる主な要素は次の通りです：

<title> — 文書のタイトルを指定します。
<base> — 相対URLの基準を指定します。
<link> — 他のリソースへのリンクを定義します。
<meta> — 文書のメタ情報を記述します。
<style> — 文書に埋め込むCSSスタイルを定義します。
<script> — クライアントサイドのスクリプトを埋め込みます。
<noscript> — JavaScriptが無効な場合に表示される代替コンテンツを定義します。

メタデータ要素は主に <head> 要素内に配置されます。

title 要素

<title> 要素は、HTML文書のタイトルを指定します。タイトルはブラウザのタブやブックマークで表示され、検索エンジンの検索結果にも影響を与えます。

例：

<title>HTML Living Standard 教科書</title>

base 要素

<base> 要素は、文書内で使用される相対URLの基準となるURLを指定します。これは、1つのHTML文書につき1回のみ使用できます。

例：

<base href="https://example.com/">

link 要素

<link> 要素は、外部リソースとの関係を定義します。特にCSSファイルやアイコンを参照する際に使用されます。

例：

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

meta 要素

<meta> 要素は、文書のメタ情報（文字セット、説明、作者情報など）を定義します。

使用例

文字セットの指定：

<meta charset="UTF-8">

文書の説明やキーワード：

<meta name="description" content="HTML教科書">
<meta name="keywords" content="HTML, 教科書, Web開発">

ビューの設定（レスポンシブデザイン）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

style 要素

<style> 要素は、HTML文書内に埋め込まれるCSSスタイルを定義します。この要素を使用すると、スタイル情報をインラインで記述できます。

例：

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

script 要素

<script> 要素は、クライアントサイドスクリプト（通常はJavaScript）をHTML文書に埋め込むために使用されます。

埋め込みスクリプトの例

<script>
  console.log("Hello, world!");
</script>

外部スクリプトの読み込み

<script src="script.js"></script>

noscript 要素

<noscript> 要素は、JavaScriptが無効な場合に表示される代替コンテンツを指定します。

例：

<noscript>
  <p>このサイトではJavaScriptを有効にする必要があります。</p>
</noscript>

メタデータ・コンテンツの配置例

以下は、典型的なメタデータ・コンテンツを含むHTML文書の例です：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML教科書</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href="https://example.com/">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
  <script>
    console.log("メタデータの例");
  </script>
</head>
<body>
  <noscript>
    <p>JavaScriptが無効です。</p>
  </noscript>
  <p>メタデータのサンプルページ</p>
</body>
</html>

注意事項

メタデータ・コンテンツは通常、<head> 要素内に配置しますが、一部のスクリプト要素やスタイルは、<body> 内にも記述することが可能です。
検索エンジン最適化（SEO）において、適切なメタデータを定義することが重要です。

HTML Living Standard/メタデータ・コンテンツ

メタデータ・コンテンツ

構成要素

title 要素

base 要素

link 要素

meta 要素

使用例

style 要素

script 要素

noscript 要素

メタデータ・コンテンツの配置例

注意事項

関連項目

関連仕様