HTML 速習チュートリアル

HTML <head> 要素

HTMLの <head> 要素は、メタデータ（データに関するデータ）のためのコンテナです。この要素は <html> タグと <body> タグの間に配置されます。

ここに記述された内容はブラウザ上には表示されませんが、ブラウザがページを正しく読み込んだり、検索エンジン（SEO）がページ内容を理解したりするために不可欠な情報が詰まっています。

1. <head> 内で使用される主な要素

<head> セクションには、以下の要素を含めることができます。

1.1 <title> 要素（必須）

ドキュメントのタイトルを定義します。ブラウザのタブに表示されるほか、検索結果のタイトルとしても使用される、最も重要な要素の一つです。

1.2 <style> 要素

一つのHTMLドキュメントに対して、内部的な CSS（スタイルシート） を定義するために使用します。

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
</p>
</style>

1.3 <link> 要素

外部リソースとの関係を定義します。最も一般的な用途は、外部の CSS ファイル を読み込むことです。

<link rel="stylesheet" href="mystyle.css">

1.4 <meta> 要素

文字セット、ページの記述、キーワード、作者、ビューポートの設定など、その他のメタデータを指定するために使用します。

  • 文字エンコーディングの指定:
    • <meta charset="UTF-8">
  • 検索エンジン向けの記述（Description）:
    • <meta name="description" content="HTMLの基礎を学ぶチュートリアル">
  • レスポンシブデザイン用の設定（Viewport）:
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">

1.5 <script> 要素

クライアントサイドの JavaScript を定義、または外部スクリプトファイルを読み込むために使用します。

1.6 <base> 要素

ページ内のすべての相対URLに対するベースURLや、リンクのデフォルトターゲットを指定します。

<base href="https://www.volardev.com/" target="_blank">

2. まとめ

<head> 要素は、いわばWebページの「設定画面」のようなものです。ユーザーには見えませんが、これがないとブラウザは何を表示すべきか、検索エンジンはどう評価すべきか迷ってしまいます。

要素説明
<head>メタデータのコンテナ。
<title>ページのタイトル（必須）。
<style>内部CSSの定義。
<link>外部リソース（CSSなど）との接続。
<meta>文字セットやSEO、ビューポートなどのメタ情報。
<script>JavaScriptの定義。
<base>ベースURLの指定。
[!NOTE]
モダンなWeb開発では、特に <meta name="viewport"> の設定を忘れると、スマホで見たときに文字が小さすぎて読めない「非レスポンシブ」なサイトになってしまうので注意が必要です。