headについてhtmlプロパティ解説 - wordbro

HOME
headについてhtmlプロパティ解説

headについてhtmlプロパティ解説

概要

<head> タグは、HTML文書のメタ情報（タイトル、文字コード、外部リソースのリンクなど）をまとめる要素です。
ブラウザに表示されるコンテンツではなく、**文書の設定や制御**を行う部分に使われます。

基本的な使い方

See the Pen Untitled by 西野, WEBデザイン (西野誠) (@-WEB-the-vuer) on CodePen.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <meta name="description" content="ページの説明文">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>こんにちは、世界！</p>
  </body>
</html>

<head> タグ内には、<meta>、<title>、<link>、<style>、<script> などを配置します。
ページの挙動やSEO、外部リソースの読み込みに関係する重要な領域です。

出力される内容の例

<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>

役割とメリット（定義リスト形式）

文書の設定情報を記述: 文字コード・タイトル・検索エンジン向け情報などを指定します。

SEO対応: <meta name="description"> などを使って、検索エンジンにページの概要を伝えられます。

CSSやJavaScriptの読み込み: <link> や <script> を使って外部リソースを読み込むことができます。

ブラウザ・SNS対応: OGPタグやfavicon、viewport設定など、表示や共有に関する制御が可能です。

注意点

<head> タグは必ず <html> タグ内、<body> よりも前に記述します。
<meta charset="UTF-8"> は必ず先頭付近に記述してください（文字化け防止）。
<title> タグは1ページに1つだけ必要です。
記述ミスがあると、SEOやブラウザ表示に影響が出る場合があります。

まとめ

<head> タグは、HTML文書の制御情報を集めた重要な領域であり、SEO・パフォーマンス・デザイン全てに関わる設定を記述します。
正しい構造での記述が、信頼性のあるWebページ制作の基本です。