HTML

HTMLの<head>について解説

HTMLの<head>タグについて詳しく解説するね。

<head>タグとは？

<head>タグは、HTMLドキュメントのメタデータ（ページ情報）を定義するための要素です。ページの内容そのものは<body>タグ内に記述されるのに対し、<head>タグ内にはページのタイトルやスタイルシートのリンク、スクリプトのインクルードなどが記述されます。

<head>タグの構造

基本的なHTMLドキュメントの構造を見てみよう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>こんにちは、世界！</h1>
</body>
</html>

<head>タグ内でよく使われる要素

  1. <meta>タグ

    • メタデータ（ページ情報）を定義します。
    • **charset**属性: ページの文字エンコーディングを指定します。
<meta charset="UTF-8">

**name属性とcontent**属性: ページの説明、キーワード、作者などの情報を指定します。

<meta name="description" content="これはサンプルページです。">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="山田太郎">

<title>タグ

  • ブラウザのタブや検索エンジンの結果に表示されるページのタイトルを指定します。
<title>ページのタイトル</title>

<link>タグ

  • 外部リソース（スタイルシートやアイコンなど）をリンクします。
  • **rel**属性: リンクの種類を指定します。
  • **href**属性: リンク先のURLを指定します。
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<script>タグ

  • 外部のJavaScriptファイルを読み込む、またはインラインでJavaScriptコードを記述します。
  • **src**属性: スクリプトファイルのURLを指定します。

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

<style>タグ

  • インラインでCSSを記述します。
<style>
body {
    background-color: #f0f0f0;
}
</style>

<base>タグ

  • ページ内の全ての相対URLの基準となる基本URLを指定します。
<base href="https://www.example.com/">

<meta>タグの詳細

<meta>タグは、特定のメタデータを設定するために使われます。ここでは、一般的に使用されるいくつかの<meta>タグを紹介します。

  • <meta charset="UTF-8">
    • ドキュメントの文字エンコーディングをUTF-8に設定します。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • モバイルデバイスでの表示に適したレスポンシブデザインを実現するための設定です。
  • <meta name="description" content="ページの説明">
    • ページの概要を記述し、検索エンジンの結果に表示されることがあります。
  • <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
    • ページのキーワードを設定します。
  • <meta name="author" content="作者の名前">
    • ページの作者情報を設定します。

<head>の役割

  • SEO: 検索エンジン最適化のためにページのメタデータを提供します。
  • ブラウザ表示: タイトルやアイコンを設定し、ユーザーに分かりやすい情報を提供します。
  • パフォーマンス: CSSやJavaScriptの外部リソースをリンクし、ページのパフォーマンスを向上させます。
  • レスポンシブデザイン: ビューポート設定などにより、モバイルデバイスでの表示を最適化します。

まとめ

  • <head>タグは、HTMLドキュメントのメタデータを定義するための要素です。
  • ページのタイトル、スタイルシート、JavaScript、メタデータなどを含みます。
  • 正しく設定することで、SEOやページのパフォーマンス、ユーザー体験が向上します。

これがHTMLの<head>タグの基本的な解説です。

スポンサーリンク

-HTML