HTML Living Standard/head

head 要素

head 要素は、HTML文書のメタデータを定義するために使用されます。この要素は、文書のルート要素である html の直下に配置され、通常は body 要素の前に記述されます。

head 要素内のコンテンツは、ユーザーには直接表示されませんが、ブラウザや検索エンジンが文書を正しく処理するために重要です。

基本構造

以下は、head 要素を含むHTML文書の基本構造です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example Document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

主な子要素

head 要素には、以下の子要素を含めることができます：

必須要素

title: 文書のタイトルを指定します。このタイトルは、ブラウザのタブや検索エンジンの結果に表示されます。
```
<title>My Website</title>
```

メタデータ関連要素

meta: 文書に関するメタ情報を指定します。たとえば、文字エンコーディングやビューポート設定など：
```
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

スタイル・スクリプト関連要素

link: 外部リソース（例：CSSファイルやアイコン）を参照します：
```
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
```

style: 文書内で直接スタイルを記述します：

<style>
  body {
    background-color: lightblue;
  }
</style>

script: JavaScriptコードを埋め込むか、外部スクリプトを参照します：
```
<script src="script.js"></script>
```

その他の要素

base: 文書内の相対URLの基準となるURLを指定します：
```
<base href="https://example.com/">
```

使用上の注意

順序の重要性: <meta charset> はできる限り head の最初に記述することが推奨されます。これは、ブラウザが文書を正しくエンコードするために必要です。
必須の title 要素: HTML Living Standardでは、title 要素は省略できません。
重複の注意: 同じ内容の meta 要素や link 要素を重複して記述しないようにしてください。

head 要素の意義

head 要素は、文書の情報をブラウザや外部システムに伝える重要な役割を担います。この要素が適切に構成されていると、文書のアクセシビリティ、パフォーマンス、およびSEO（検索エンジン最適化）が向上します。